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.

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