Presentation Transcript

1. User Experience Designdemystified April 29th 2014Nelly Mensah | Doug Van Wie
2. Agenda Introductions What is UX and Why Is It Important? UX Methodology UX in Practice Useful Resources Q&A   
3. introductions
4. Introductions Nelly has worked as a developer, UX designer, and product manager for Deloitte Digital for the last 5 years. She has also advised several start ups and is a freelance graphic designer and illustrator. She takes stock photo selection and white space very seriously. Dougstudied Graphic Design at Auburn University. After a career as a professional swimmer, he worked for a software company as an Interaction Designer developing prototypes and conducting user testing. He has also worked as a freelance web designer for the past eight years.
5. What is UX?
6. What is User Experience? UX
7. Benefits of Caring About UX Increased Adoption Customer Loyalty Brand Differentiation Productivity Gains Operational Efficiencies Reduced Development Costs Better morale and employee satisfaction
8. What is Usability? Learnability How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency Once users have learned the design, how quickly can they perform tasks? Memorability When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction How pleasant is it to use the design? 
9. UX Methodology
10. Determine Your Objective Set Goals e.g. Reduce shopping cart abandonment by 15% Select Channel / Platform e.g. Android vs iOS vs Web Establish Audience e.g. Existing customers Determine Content Type e.g. Product descriptions
11. UX Methodology Overview User Insights Personas Information Architecture Wireframing Visual Design User Experience and Style Guides User Testing
12. USER RESEARCH
13. User Research Description The User Research phase focuses on identifying key pain points and areas for improvement from the end-users’ perspective. The outputs of this phase of work are used as guidelines in designing the application. This phase lays the foundation for the design and sets guidelines for making design decisions. Activities Engage Users Conduct User Research Compile Requirements Identify end users Write interview script Create Global Design Field Observation User Interviews User Workshops Requirements Compilation Scoping Requirements Prioritization
14. PERSONAS
15. Persona Definition Description The objective of Persona Definition is to paint a clear picture of the typical target users and describe how/why they will be using the system. Personas should be able to invoke empathy by providing insights into the real behaviors, goals, pain points, skills, and environments of real users. Activities Conduct Workshops Document User Personas Validate User Personas Identify key functions and content required for user tasks Determine high-level user goals, preferences, and pain-points Understand “day in the life” user scenarios Characterize user goals, preferences, and key tasks into personas Validate interview findings with SMEs Present and validate user personas
16. Persona Definition Example
17. “When you design for everyone, you design for no one.” - Anonymous
18. Information Architecture
19. Information Architecture Description Information Architecture (IA) is the analysis and design of the content structure of the application, as well as the interrelationships between the content. Essentially, it is a means by which to logically organize information in the app and involves modeling a top-down view of how users will interact with various pages, functions, and information across the application. Activities Develop High Level Site Map Draft Page Flows Annotate Page Flows Draft high-level site map Review tasks flows from the user’s perspective Construct page/screen flows based on high-level site map Map page flows to content outline Write detailed page flow annotations to provide user narratives. Review & iterate page flows w/ Process SMEs
20. Site Map Example
21. Wireframing
22. Wireframe Development Description A proposed user interface design is articulated in wireframes. Wireframe development defines the standard structure, layout, and general real-estate for content and functions. Wireframes are developed in abstraction of visual, creative, and branding elements. Activities Review Requirements Design Wireframes Validate and Update Wireframes Iterations Review required fields Define controls and screen elements Brainstorm and draw wireframe sketches Develop wireframes for unique page layout types Review and obtain agreement on standard wireframes Review and validate wireframes with process SMEs and stakeholders Update wireframes Document visual styles and guidelines Document UX Guidelines
23. Design Principles Hierarchy Call to action Contextual UI elements Response to action Appropriate language
24. Wireframe Development Step 1: Get your thoughts on paper
25. Wireframe Development Step 2: Prototype and test
26. Wireframe Example Step 3: Refine and handoff
27. Usability Testing
28. Usability Testing UX and Style Guides User Testing Description Usability testing is a critical step in the user experience design process and must take place several times in the project lifecycle. It helps ensure that the design is going in the right direction and addresses the users’ needs. Activities Plan Usability Testing Approach Conduct Usability Testing Review and Act On Results Determine participants Prepare test scenarios Set up testing environment Brief participants Have participants complete a set of predetermined tasks Conduct satisfaction survey Aggregate results and analyze findings Prioritize findings Update design based on findings
29. Usability Testing Example: Low Tech UX and Style Guides User Testing
30. Usability Testing Example: High Tech UX and Style Guides User Testing
31. Visual design
32. Visual Design Description Visual design is the icing on the cake. It is the design of the final look and feel of the application and involves the selection of colors, fonts and icons for the interface. It has both practical and aesthetic implications for usability. Activities Develop Themes Finalize Visual Design Approve and Hand Off Design Develop visual themes that adhere to visual style guide and branding standards Design or obtain iconography Decide on typography options Write copy Narrow down design options Finalize visual theme of the application Clean up visual design Finalize visual style guide Hand over graphic assets to developers
33. Visual Design Examples Style Tiles
34. User Experience and Style Guidelines UX and Style Guides User Testing Description A UX Guidelines document is expected to be a living record that will be developed over several iterations. It ensures that the interface is consistent across screens and releases. Activities Document Screen Components Document UI Behavior Document Visual Design Standards Document global components including: Header Footer Navigation Panel Content Area Document standard UI behavior, such as: Drop-downs Drag & Drop Modal boxes Create Visual Style Guide to include visual design standards: Color Palettes Typography Iconography Screen resolutions Branding
35. Visual Design Examples Pattern Library A collection of front-end patterns or code-snippets that can be reused to form the building blocks of a website. Pattern libraries can include CSS and HTML code blocks and elements like headers, footers, form elements and list items as well as more complex elements such as responsive galleries. Salesforce BBC Twitter Bootstrap
36. Ux in practice
37. UX Roles Project Manager
38. Role Comparison
39. Size of Company Matters Startup Enterprise Multiple practitioners Can be independent department or part of development teams Varying levels of importance to product Political challenges More time and resources available Small or one-person team Multiple responsibilities Product focus essential UX shapes strategy and product development Limited time and resources Bootstrap testing
40. Integration with Development Involve developers early Document everything Push the limits
41. Analytics: Goals Revisited Set Goals Select Channel / Platform Establish Audience Determine Content Type Measure Outcomes
42. 10 Dos and Don’ts of User Experience DOevangelize user-centered design and usability within the organization DOdetermine appropriate metrics to measure user engagement and successDOinvolve stakeholders in workshops and review sessions DOstay in perpetual beta DOalign change management efforts with the usability approach DON’Tforget the users DON’Tlet politics or trends dictate the direction of design DON’Tleave out frequent user testing DON’Trely on waterfall methodology DON’Tset unrealistic expectations of what the UX will accomplish
43. Resources
44. Wireframing & Prototyping Tools Axure
45. Wireframing & Prototyping Tools Balsamiq
46. Wireframing & Prototyping Tools Mockingbird
47. Wireframing & Prototyping Tools Proto.io
48. Wireframing & Prototyping Tools Bootstrap
49. User Testing Tools Remote Screenshare – GoToMeeting, Skype, Google Hangout, etc.
50. User Testing Tools Silverback
51. User Testing Tools A/B testing – Google Analytics, Optimizely
52. Inspiration Dribbble
53. Inspiration Behance
54. Inspiration Abduzeedo
55. Blogs to follow http://www.smashingmagazine.com/ http://uxmag.com/ http://www.boxesandarrows.com http://www.useit.com/ http://www.uxbooth.com/
56. Q&A