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

Before You Build: UX on a Budget

1e7c3250a088fabd144d47c1ad36391d?s=47 Betsy Cohen
March 31, 2014

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

1e7c3250a088fabd144d47c1ad36391d?s=128

Betsy Cohen

March 31, 2014
Tweet

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