Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Before You Build / WordCamp Columbus 2014

Betsy Cohen
August 02, 2014

Before You Build / WordCamp Columbus 2014

We all know that WordPress is an amazing tool, but producing an amazing web site is never a given. A little planning goes a long way and in this session we’ll walk through a typical planning and design process that should be completed before you place the first pixel or spend hours searching through themes. As small businesses often have small budgets, we'll also look at ways to manage the process within such constraints.

Betsy Cohen

August 02, 2014
Tweet

More Decks by Betsy Cohen

Other Decks in Design

Transcript

  1. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com BEFORE YOU

    BUILD User Experience, Content 
 & Design on a Budget
  2. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com GREAT USER

    EXPERIENCES ARE THE RESULT OF TAKING USERS’ NEEDS INTO ACCOUNT AT EVERY STAGE OF THE DESIGN PROCESS. “
  3. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ANALYTICS A/B

    TESTING FOCUS GROUPS SURVEYS USER TESTING USER-CENTERED RESEARCH & TESTING METHODS
  4. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DO THE

    BEST YOU CAN WITHIN THE CONSTRAINTS YOU’RE GIVEN, KNOWING THAT GOOD ENOUGH USUALLY IS. “
  5. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Gather

    Information about Business and Users ๏ Make Thoughtful Assumptions ๏ Prioritize Business and User Goals DISCOVERY 1 ACTIVITIES
  6. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

    ARTIFACTS GOOD ENOUGH BETTER USER SURVEYS SIMPLE PERSONAS COMPETITIVE ANALYSIS
  7. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

    MEET THE CLIENT ๏ Seasoned PR Pro with 7 years experience at a top PR firm ๏ Ready to branch out on her own ๏ Wants to attract clients and establish her credibility Iris Natalya Kaminsky PR / Communications Consultant
  8. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com Why do

    you need a website? ๏ To establish credibility for prospective clients ๏ To give me a platform to share my experience, develop a following, and raise my profile in the industry. What do you most want from your site’s users? ๏ I want prospects to call me or submit an inquiry form ๏ And/Or — I want them to subscribe to my newsletter so I can stay in touch. DISCOVERY 1 NEEDS ANALYSIS Us: Iris: Us: Iris:
  9. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

    NEEDS ANALYSIS GOALS USERS CONTENT BRANDING FEATURES & FUNCTIONALITY
  10. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

    SAMPLE USER SEGMENTATION USER SEGMENT THEIR PURPOSE DESIRED ACTION DESCRIPTION
  11. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ To

    learn how to do their own PR better. ๏ Not yet familiar with my work — probably arrived via keyword search; Interested in case studies and techniques. ๏ Subscribe to newsletter ๏ Become “fans.” ๏ Refer clients in my niche DISCOVERY 1 SAMPLE USER SEGMENTATION USER SEGMENT THEIR PURPOSE Prospective PR Clients PR Colleagues Small Businesses Doing Own PR DESIRED ACTION DESCRIPTION ๏ To learn more about me to decide whether to trust me, hire me. ๏ Senior mgmt with businesses in my niche market; tech savvy, socially engaged, and extremely busy. ๏ Fill out inquiry form. ๏ To learn how to do their own PR better. ๏ Not yet familiar with my work — probably arrived via keyword search; Proactive, eager to learn to be more media-savvy. ๏ Subscribe to newsletter ๏ Become “fans.” ๏ Refer clients in my niche
  12. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Define

    Content Requirements ๏ Organize Structure ๏ Define and Prioritize Page Elements INFO ARCHITECTURE 2 ACTIVITIES
  13. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com INFO ARCHITECTURE

    2 ARTIFACTS GOOD ENOUGH BETTER ANALYTICS USER / TASK FLOWS
  14. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com INFO ARCHITECTURE

    2 SAMPLE SITEMAPS MONEY4MILLENIALS.COM ๏ HOME (LATEST EPISODE) ๏ ARCHIVE ๏ PAST EPISODES ๏ BLOG ๏ CONNECT ๏ ABOUT ๏ TOPIC SUGGESTIONS ๏ MEDIA KIT
  15. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com INFO ARCHITECTURE

    2 SAMPLE PAGE ELEMENTS Logo & Tagline Nav Menu Recent Blog Posts About Opt-In CTA Testimonial Latest Podcast Social Connect Social Share
  16. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com INFO ARCHITECTURE

    2 SAMPLE PAGE ELEMENTS Logo & Tagline Nav Menu Recent Blog Posts About Opt-In CTA Testimonial Latest Podcast Social Connect Social Share HIGH PRIORITY SECONDARY TERTIARY
  17. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Sketch

    / Wireframes ๏ Develop Prototype ๏ Validate ๏ Refine IDEATION 3 ACTIVITIES
  18. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com IDEATION 3

    ARTIFACTS GOOD ENOUGH BETTER LIVE USER TESTING ONLINE USER
 TESTING
  19. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Create

    Brand & Style ๏ Design Interface ! VISUAL DESIGN 4 ACTIVITIES
  20. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com VISUAL DESIGN

    4 ARTIFACTS GOOD ENOUGH BETTER MORE MOCKUPS, INCL. MOBILE
  21. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com RESOURCES Content

    Development ๏ Zerys.com (Marketplace) ! Color Palette Design & Inspiration ๏ Kuler.adobe.com ๏ Colorschemedesigner.com ! Typography / Web Safe Fonts ๏ Google.com/webfonts ๏ Fontsquirrel.com ! Stock Images, Illustrations & Icons ๏ DepositPhotos.com ๏ iStockPhotos.com ๏ shutterstock.com Here you’ll find links to some of the cool tools mentioned during the presentation, along with a few other favorites. Style Board Design ๏ Betsy’s Style Board template for Photoshop: www.positiveelement.com/wordcamp- phoenix-2014-resources/ ๏ StyleTile.es ! Image Editing & Resizing ๏ Picmonkey.com ๏ Imsanity Plugin - wordpress.org/plugins/ imsanity/ ! Placeholders ๏ Lipsum.com ๏ placehold.it