Before You Build: UX on a Budget

A little planning goes a long way! This session walks through a simple needs analysis and design process for a small business or personal brand website.

We cover the the most important steps to take before you place the first pixel or write a line of code.

— Defining project goals & audience
— Content requirements & strategy
— Wireframes
— Rapid Prototyping
— Style Board
— Design / Choosing a template

Transcript

1. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 1 BEFORE YOU BUILD UX on a Budget Friday, April 4, 14
2. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 2 GREAT USER EXPERIENCES ARE THE RESULT OF TAKING USERS’ NEEDS INTO ACCOUNT AT EVERY STAGE OF THE DESIGN PROCESS. “ Friday, April 4, 14
3. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 3 ANALYTICS A/B TESTING FOCUS GROUPS SURVEYS USER TESTING USER-CENTERED RESEARCH & TESTING METHODS Friday, April 4, 14
4. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 4 Friday, April 4, 14
5. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 4 BUDGET CONSTRAINTS Friday, April 4, 14
6. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 4 BUDGET CONSTRAINTS TIME CONSTRAINTS Friday, April 4, 14
7. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 5 KEEP USERS IN MIND Friday, April 4, 14
8. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 5 KEEP USERS IN MIND Friday, April 4, 14
9. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 6 DO THE BEST YOU CAN WITHIN THE CONSTRAINTS YOU’RE GIVEN, KNOWING THAT GOOD ENOUGH USUALLY IS. “ Friday, April 4, 14
10. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 7 DESIGN PROCESS Friday, April 4, 14
11. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 8 Friday, April 4, 14
12. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 8 Friday, April 4, 14
13. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 9 Friday, April 4, 14
14. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 9 Friday, April 4, 14
15. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 10 ๏ Gather Information about Business and Users ๏ Make Thoughtful Assumptions ๏ Prioritize Business and User Goals DISCOVERY 1 ACTIVITIES Friday, April 4, 14
16. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 DISCOVERY 1 ARTIFACTS 11 GOOD ENOUGH BETTER USER SURVEYS SIMPLE PERSONAS COMPETITIVE ANALYSIS Friday, April 4, 14
17. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 12 DISCOVERY 1 SAMPLE NEEDS ANALYSIS Friday, April 4, 14
18. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 13 DISCOVERY 1 SAMPLE USER SEGMENTATION USER SEGMENT THEIR PURPOSE DESIRED ACTION DESCRIPTION Friday, April 4, 14
19. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 14 DISCOVERY 1 SAMPLE USER SEGMENTATION USER SEGMENT THEIR PURPOSE Prospective PR Clients PR Colleagues Small Businesses Doing Own PR DESIRED ACTION DESCRIPTION Friday, April 4, 14
20. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 14 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. Friday, April 4, 14
21. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 14 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 Friday, April 4, 14
22. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 ๏ 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 14 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 Friday, April 4, 14
23. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 15 ๏ Define Content Requirements ๏ Organize Structure ๏ Define and Prioritize Page Elements INFO ARCHITECTURE 2 ACTIVITIES Friday, April 4, 14
24. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 INFO ARCHITECTURE 2 ARTIFACTS 16 GOOD ENOUGH BETTER ANALYTICS USER / TASK FLOWS Friday, April 4, 14
25. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 17 INFO ARCHITECTURE 2 SAMPLE SITEMAPS MONEY4MILLENIALS.COM ๏ HOME (LATEST EPISODE) ๏ ARCHIVE ๏ PAST EPISODES ๏ BLOG ๏ CONNECT ๏ ABOUT ๏ TOPIC SUGGESTIONS ๏ MEDIA KIT Friday, April 4, 14
26. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 18 INFO ARCHITECTURE 2 SAMPLE PAGE ELEMENTS Logo & Tagline Nav Menu Recent Blog Posts About Opt-In CTA Testimonial Latest Episode Social Connect Social Share Friday, April 4, 14
27. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 19 INFO ARCHITECTURE 2 SAMPLE PAGE ELEMENTS Logo & Tagline Nav Menu Recent Blog Posts About Opt-In CTA Testimonial Latest Episode Social Connect Social Share HIGH PRIORITY SECONDARY TERTIARY Friday, April 4, 14
28. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 20 WHEN EVERYTHING IS IMPORTANT, NOTHING IS IMPORTANT. “ Friday, April 4, 14
29. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 21 ๏ Sketch ๏ Develop Prototype ๏ Validate ๏ Refine IDEATION 3 ACTIVITIES Friday, April 4, 14
30. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 IDEATION 3 ARTIFACTS 22 GOOD ENOUGH BETTER “GUERRILLA” USER TESTING ONLINE USER TESTING Friday, April 4, 14
31. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 23 IDEATION 3 SAMPLE WIREFRAME Friday, April 4, 14
32. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 24 IDEATION 3 SAMPLE RAPID PROTOTYPE Friday, April 4, 14
33. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 25 ๏ Create Brand & Style ๏ Design Interface VISUAL DESIGN 4 ACTIVITIES Friday, April 4, 14
34. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 VISUAL DESIGN 4 ARTIFACTS 26 GOOD ENOUGH BETTER MORE MOCKUPS, INCL. MOBILE Friday, April 4, 14
35. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 27 VISUAL DESIGN 4 SAMPLE STYLE BOARD Friday, April 4, 14
36. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 27 VISUAL DESIGN 4 SAMPLE STYLE BOARD Friday, April 4, 14
37. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 28 VISUAL DESIGN 4 STYLE BOARD + WIREFRAME Friday, April 4, 14
38. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 29 VISUAL DESIGN 4 STYLE BOARD + WIREFRAME Friday, April 4, 14
39. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 30 Friday, April 4, 14
40. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 30 Friday, April 4, 14
41. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 31 Friday, April 4, 14
42. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 31 Friday, April 4, 14
43. PHOENIX DIGITAL SUMMIT Betsy Cohen @betsela www.radiatewp.com /32 THANK YOU Any questions? 32 @betsela betsy@radiatewp.com Friday, April 4, 14