Before You Build / WordCamp Columbus 2014

1e7c3250a088fabd144d47c1ad36391d?s=47 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.

1e7c3250a088fabd144d47c1ad36391d?s=128

Betsy Cohen

August 02, 2014
Tweet

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 BUDGET CONSTRAINTS

    TIME CONSTRAINTS
  5. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com KEEP USERS

    IN MIND
  6. 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. “
  7. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com OUR PROCESS

  8. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com

  9. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com

  10. 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
  11. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

    ARTIFACTS GOOD ENOUGH BETTER USER SURVEYS SIMPLE PERSONAS COMPETITIVE ANALYSIS
  12. 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
  13. 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:
  14. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

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

    NEEDS ANALYSIS
  16. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com DISCOVERY 1

    SAMPLE USER SEGMENTATION USER SEGMENT THEIR PURPOSE DESIRED ACTION DESCRIPTION
  17. 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
  18. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Define

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

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

    2 SAMPLE SITEMAPS
  21. 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
  22. 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
  23. 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
  24. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com WHEN EVERYTHING

    IS IMPORTANT, NOTHING IS IMPORTANT. “
  25. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com INFO ARCHITECTURE

    2 CLUTTERED MESS!
  26. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Sketch

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

    ARTIFACTS GOOD ENOUGH BETTER LIVE USER TESTING ONLINE USER
 TESTING
  28. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com IDEATION 3

    WIREFRAMES
  29. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com IDEATION 3

    RAPID PROTOTYPE
  30. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com ๏ Create

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

    4 ARTIFACTS GOOD ENOUGH BETTER MORE MOCKUPS, INCL. MOBILE
  32. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com VISUAL DESIGN

    4 STYLE BOARDS
  33. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com VISUAL DESIGN

    4 STYLE BOARDS
  34. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com VISUAL DESIGN

    4 STYLE BOARD + WIREFRAME
  35. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com VISUAL DESIGN

    4 MOCKUPS
  36. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com VISUAL DESIGN

    4 THEME SELECTION
  37. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com

  38. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com

  39. 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
  40. WORDCAMP COLUMBUS 2014 #WCCBUS Betsy Cohen @betsela www.RadiateWP.com THANK YOU

    Any questions? @betsela betsy@RadiateWP.com