Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress, Design, and You (WCTO 2017)

114 views

Published on

How does a user-centered design process deliver digital products that people love? Let's get back to basics in this UX 101 presentation where we apply the Elements of User Experience to a WordPress project!

Presented at WordCamp Toronto 2017 (Toronto, Canada)

Published in: Design
  • Be the first to comment

  • Be the first to like this

WordPress, Design, and You (WCTO 2017)

  1. 1. Jesse Emmanuel Rosario @jemrosario WordPress, UX Design, and You
  2. 2. every project kickoff EVER
  3. 3. How do we do this?!?
  4. 4. TODAY’S AGENDA: What is User Experience Design? How do we use it to build digital products that people love?
  5. 5. Jesse James Garrett’s The Elements of User Experience is the founding document of what we currently know as User Experience Design (next to Alan Cooper’s About Face in 1995)
  6. 6. 1 Strategy What do we want to get out of the site? What do our users want? GOAL: Establish business + user needs and goals CONTENT STRATEGY USER EXPERIENCE RESEARCH content analysis core strategy message architecture content audit content plan governance model stakeholder interviews personas competitive analysis mental models journey maps usability testing
  7. 7. Applying the STRATEGY plane Competitive analysis: Survey previous WCTO sites to see how they were built. Site purpose + initial content plan: What is this site about? What could go in there? Establish success metrics: Revenue generation? Speaker applications? #1 on Google?
  8. 8. 2 Scope What features will the site need to include? GOAL: Answer “How are we going to do this project (e.g. features, requirements, etc.)?” PROJECT DISCOVERY requirements & spec project timelines content requirements interaction models features functionality
  9. 9. Applying the SCOPE plane Firm up project’s business framework: Objectives, KPIs, OKRs, timelines, project team, etc. Tech specs: e.g. Domain and hosting, WP security, third-party services, etc. Content and functionality: What pages, content, and features must this site have that truly matter to users?
  10. 10. 3 Structure How will the pieces of the site fit together and behave? GOAL: Site organization (and interaction) INFORMATION ARCHITECTURE sitemaps user flows tags & categories content models content placement, etc.
  11. 11. Applying the STRUCTURE plane Sitemap: Site sections, subsections, etc. Content Organization: Tags vs. Categories Pages vs. Posts Home About Blog Contact
  12. 12. 4 Skeleton What components will enable people to use the site? GOAL: Make design decisions (e.g. copy, headings, images, layout, interface elements, etc.) INTERFACE DESIGN wireframes page layouts information hierarchy interface controls interactive prototypes, etc.
  13. 13. Applying the SKELETON plane SOURCE: wirify.com wireframes
  14. 14. Applying the SKELETON plane SOURCE: “The Skeptic’s Guide to Low-Fidelity Prototyping” by Laura Busche (Smashing Magazine, 2014) LOW FIDELITY (paper sketches, cutouts, etc.) HIGH FIDELITY (super colorful design mockups)
  15. 15. Applying the SKELETON plane
  16. 16. 5 Surface What will the finished product look like? GOAL: Packaging and presentation VISUAL DESIGN color layout typography imagery high-fidelity comps design systems, etc. Hello world!
  17. 17. A very important distinction! creative problem-solving “make it pretty” Design design
  18. 18. Take your pick…
  19. 19. What Good Visual Design Is… Good visual design gives you an entry point into the design and guides your eye along the elements.
  20. 20. Applying the SURFACE plane What’s involved? color layout typography imagery (e.g. photos, icons) design documentation (e.g. high-fidelity comps, style tiles, style guides, pattern libraries, design systems, etc.) SOURCE: “Airbnb UI Toolkit-Web” by Derek Bradley (https://dribbble.com/shots/1669299-Airbnb-UI-Toolkit-Web)
  21. 21. Applying the SURFACE plane Decide on the colors, fonts, images, page layouts, etc.: Document these decisions somewhere (e.g. style tile) Select the WP theme: Which theme suits my needs? Free? Premium? Consider theme customization: How far can I ‘personalize’ this theme? Child themes? functions.php? Page builders?
  22. 22. User-centered beats being (solely) business-centered.1
  23. 23. y tho
  24. 24. “If I’d asked people what they wanted, they would have said faster horses” -  said no one ever
  25. 25. FUN FACT: I was supposed to attend a “Nudge-a-Thon”, a Behavioural Economics Design Challenge, today at Rotman. The problem to tackle was fare evasion. I saw this comment at the Event Page yesterday (September 29, 2017; 2PM).
  26. 26. As designers, we strike a balance between what users want and what matters to the business. 2
  27. 27. Nobody knows the design problem better than me, which is why I alone can fix it. -  some designers (thanks, but no thanks, 45…)
  28. 28. A solid process gives you signposts to look out for.3
  29. 29. THINK OF IT THIS WAY: What if a marathon didn’t have any progress indicators?
  30. 30. Mont Ventoux’s Finish Line A solid process suggests that you’re on a trackable path. PHOTO FROM http://www.macsadventure.com/eu/tour-2072/road-cycling-mont-ventoux
  31. 31. In Conclusion WHY DO IT: Drive user-centricity on top of business relevance.
  32. 32. If you only have to remember one thing…
  33. 33. The best designers are ! process driven, ! not product-driven. Trust the process. 
 Design. Decide. Deviate. ! And repeat. @sarahdoody www.theuxnotebook.com
  34. 34. Thank You! SLIDES: http://bit.ly/ux4wordpress CONNECT: @jemrosario

×