Demystifying UX – A toolkit approach to better, cheaper & faster experience design

1,376 views

Published on

On April 9th 2014, Mary Kennedy, User Experience, Product Design & Management expert, gave a talk entitled "Demystifying UX – A toolkit approach to better, cheaper & faster experience design."

UX / User Experience is booming as a practice and methodology. However, there is often misunderstanding and mystery around UX basic practices. Join us for a discussion of simple tools and processes to use as a reliable toolkit from project to project. Yes, they take time to complete but these practices in the early stages of design mean lower rates of change later in the project - translating to lower cost, faster timelines and more solid design decisions.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,376
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Demystifying UX – A toolkit approach to better, cheaper & faster experience design

  1. 1. M. E. Kennedy UX Toolkit 2014 Demystifying UX A toolkit approach to better, cheaper & faster experience design Mary E. Kennedy April 2014
  2. 2. M. E. Kennedy UX Toolkit 2014 Strategic design of Functional, Intuitive Digital Experiences to be Persuasive, Educational, Profitable and Delightful UX Planning: Adds steps but saves time Gets better results WHAT IS UX & WHY DOES IT MATTER?
  3. 3. M. E. Kennedy UX Toolkit 2014 WHAT DO YOU DO? Human Factors Engineer Information Architect Usability Specialist UX Director UX Architect UX Strategist UX Manager UX Specialist UX Designer UI Designer Content Architect Content Strategist WHY IS IT SO CONFUSING?
  4. 4. M. E. Kennedy UX Toolkit 2014 WHY NOT JUST BUILD? $1 $10 $100 Paper Development Production We are going to make mistakes – let’s make them cheap!
  5. 5. M. E. Kennedy UX Toolkit 2014 COST EFFECTIVENESS OF UX
  6. 6. M. E. Kennedy UX Toolkit 2014
  7. 7. M. E. Kennedy UX Toolkit 2014
  8. 8. M. E. Kennedy UX Toolkit 2014 PERSONAS5 UX PRINCIPLES TO APPLY TO ALL DESIGN PROJECTS
  9. 9. M. E. Kennedy UX Toolkit 2014 PERSONASKNOW YOUR USER
  10. 10. M. E. Kennedy UX Toolkit 2014 Higher Ed: Student Parent Faculty Alumni Media Financial Services & Investing: Potential Customers Existing Customers Brokers Job / Career Seekers IDENTIFY USER TYPES
  11. 11. M. E. Kennedy UX Toolkit 2014 Identify the larger needs and user tasks for user types To… learn about products compare homes purchase a TV search for a hotel download a software trial contact support play a game read recommended articles watch a video share a blog reserve a car complete transaction… IDENTIFY USER NEEDS
  12. 12. M. E. Kennedy UX Toolkit 2014 PERSONASTOOLKIT: User Types & Tasks
  13. 13. M. E. Kennedy UX Toolkit 2014 PERSONASTOOLKIT: User Types & Tasks
  14. 14. M. E. Kennedy UX Toolkit 2014 • If redesigning a Website, has a content audit been performed? • What content is needed – what is available vs. new? • Is any content available? • Who will create what is needed? • Who has final say in approving content? • Will the amount of content writing, editing, approval realistically fit within project timeline? • Coupled with analytics, what content should removed, not included? KNOW YOUR CONTENT Imagesources: http://upload.wikimedia.org/wikipedia/commons/4/4b/Ames_Free_Library_%28North_Easton%2C_MA%29_-_interior_stacks.JPGhttp://directory.compostory.org/
  15. 15. M. E. Kennedy UX Toolkit 2014 AUDIT Tier – Structure within current site Page Name – Page Title (either name or title if these differ, just be consistent) URL – Full link to use as a reference Ranking – Pull information from Google Analytics, at least identify top ranked pages (top 50, 100, etc.) Notes - Additional comments that may not have a category (too much content, flash in use, etc.) Errors – Note any errors, dead links, etc. DETAILED SITEMAP Tier – Structure within current site Page Name – Page Title (either name or title if these differ, just be consistent) Old URL– Copy reference URL from existing site Wireframe – Does a wireframe exist for the page for reference? Note the page Template – If templates are being used, (common with a CMS) note the template name Content Assignment - Who will write / rewrite content Content Status - Not started, complete, etc. Editor Assignment – Who will edit the final content Editor Status - Not started, complete, etc. QA Assignment – Who will test QA Status - Not started, complete, etc. Toolkit – Content Audit and Detailed Sitemap
  16. 16. M. E. Kennedy UX Toolkit 2014 Toolkit – Content Audit and Detailed Sitemap AUDIT DETAILED SITEMAP
  17. 17. M. E. Kennedy UX Toolkit 2014 DESIGN YOUR EXPERIENCE WORKFLOWS NAVIGATION WIREFRAMES
  18. 18. M. E. Kennedy UX Toolkit 2014 • User tasks -> workflows • Identify user messaging needs • Workflow tool / pen & paper / Whiteboard &Camera • Flow start to finish for specific complex task • Complex = Generally more than 3 steps SKETCH WORKFLOWS An extra task, but workflows save more time than perhaps any other design tool in development & prevent REDEVELOPMENT!
  19. 19. M. E. Kennedy UX Toolkit 2014 Single main navigation menu • Consistent • Obvious • Avoid single button mega navigation • Terms obvious, simple, unique • User location is clear • Functional in all resolutions & browsers • Generic terms (“tools”, “resources”) avoided DESIGN NAVIGATION
  20. 20. M. E. Kennedy UX Toolkit 2014
  21. 21. M. E. Kennedy UX Toolkit 2014
  22. 22. M. E. Kennedy UX Toolkit 2014
  23. 23. M. E. Kennedy UX Toolkit 2014
  24. 24. M. E. Kennedy UX Toolkit 2014
  25. 25. M. E. Kennedy UX Toolkit 2014 Wireframes should be thought of as electronic whiteboards: • Help with conversation about design • Very rapid creation • High rate of change WIREFRAME
  26. 26. M. E. Kennedy UX Toolkit 2014 While much of responsive design happens and is adjusted in design, always identify and plan ahead for: • Navigation • Forms These two structural items are impacted more by mobile than any other items DEVICE ACCESSIBLE
  27. 27. M. E. Kennedy UX Toolkit 2014 • Don’t go it alone - recruit testers • Test early – the more complex, the earlier the test • Ask testers to complete most common tasks • Attitude – This is your time to FAIL!!  • A site should never “Pass” a usability test • Let testers make mistakes, surprise you, never coach • Test navigation, forms and all transactions on all devices / resolutions • Make Changes – test again! TEST DESIGN ASSUMPTIONS PSST! Testing is cheap and fast!! Pass it on!
  28. 28. M. E. Kennedy UX Toolkit 2014 • What are top pages? • What are top events / actions? • How long per page? • What content is not being viewed? • A/B Test / Validate New Content • Where do users come from? Cater new content to them • What devices are most popular? • Use analytics to prove / disprove your design hunches and inform full design for better engagement & conversion CONTINUALLY VALIDATE 55% Mobile 40% Tablet 15% Desktop Referrals: Google Twitter Facebook reddit… CONVERSIONS Top Events: Report PDF Free Trial
  29. 29. M. E. Kennedy UX Toolkit 2014 TESTING Usabilla – www.usabilla.com Usability Testing (pre or post launch Ethnio – www.ethn.io/ Online Usability Recruiting Tool (pre or post launch) Five Second Test – www.fivesecondtest.com/ Community based superfast, simple feedback (pre or post launch) Google Content Experiments - https://support.google.com/analytics/answer/17 45147 A/B Testing tied to Google Analytics (post launch) ANALYTICS Google Analytics – www.google.com/analytics/ Website traffic, origin and behavior analysis Crazy Egg – www.crazyegg.com/ Heat map and scroll reports, behavior analysis RESOURCES $$ $$ WIREFRAME Mockflow – www.mockflow.com/ Desktop Based template driven tool with community contributions Balsamiq – www.balsamiq.com/ Template based, sketchy format wireframe tool Axure – www.axure.com/ Template based wireframe tool, prototype output Visio, Omnigraffle – Open wireframe / drawing tools, (not template based) offer simple click through via hotspot linking WORKFLOWS Visio / Omigraffle / Pen, Paper / Whiteboard & Camera TOOLKIT Toolkit Brief– https://uxblueprint.box.com/s/zfp9ydvodtnaqwpzp7et Use it, update it, tear it apart – but share your comments please! Connect or email: linkedin.com/in/kennedyme Kennedymek@yahoo.com $$ $$
  30. 30. M. E. Kennedy UX Toolkit 2014 AM+A, Return on Investment for Usable User-Interface Design: Examples and Statistics, 2002 Barker, D. T. (2000). Cost benefits of usability engineering. Retrieved October 9, 2001 from www.interfacearchitecture.net/articles/benefits.htm Bias, R. G & Mayhew, D. J., (Eds.) 1994. Cost Justifying usability. San Francisco: Morgan Kauffman Publishers. REFERENCE
  31. 31. M. E. Kennedy UX Toolkit 2014 THANK YOU!!

×