UX (User Experience) Process, May 2017
1 like626 views
The document outlines a comprehensive user experience (UX) process by Gary Coker, detailing methodologies such as user-centered design and lean/agile principles. It emphasizes the importance of user research, iterative prototyping, and usability testing in creating effective UX through characterizing user personas and understanding their needs. Additionally, it covers planning activities, usability testing techniques, and the need for continuous improvement in UX design and development.
UX (User Experience) Process, May 2017
- 1. User Experience (UX) Process Gary Coker, May 2017
- 3. UX Areas 3
- 4. Philosophies / Methodologies 4 User-Centered Design User Research, Rapid Prototyping, Usability Testing Lean/Agile UX: Iterative, Evidence-Based Design Mobile First Responsive Design Accessibility (WCAG 2.0 / a11y) Browser Compatibility Living Style Guide / Pattern Library
- 5. Lean UX 5 Lean UX emphasizes collaborative learning via iterative hypothesis testing instead of “Big Design Up Front” and heavy documentation processes. - Jeff Gothelf
- 6. UX Activities 6 Design PrototypeUsability Test Code RWD Test BC TestAC Test Usability Test Plan Understand existing systems User research User personas Understand new system’s requirements Information Architecture Iterate Adjunct UX Education Hire & Manage UX Team Develop UX Guidelines Develop UX Pattern Library Monitor UX/Design Trends
- 7. UX Activities: Prerequisites and Planning Plan Understand existing systems User research User personas Understand new system’s requirements Information Architecture
- 8. Planning 8 1.Understand functionality of existing systems. 2. User Research: Understand users of existing systems and prospective users of new system. Identify and involve stakeholders (external to development teams): Provide ongoing ideas & feedback to UX team by participating in agile iterations. Establish communication / collaboration mechanisms. Field studies / data gathering: Journey Mapping: Map the user’s experience with our products & services. Identify weak points and opportunities for improvement. Contextual Inquiry: Watch users in their own environment to see what they really do (vs. what we think they do); find gaps between expectations/needs and current offerings. Review existing analytics (if available).
- 9. Planning (continued) 9 3. Create User Personas: Characterize categories of users of the new system. Formatted as profiles of individual persons that describe skills, behaviors, and other attributes. Allow us to better understand target users by summarizing user research. Goals of personas: Guide design decisions by taking a “real” user’s point of view. Create empathy for users with stakeholders & development teams.
- 10. User Research: User Groupings and Personas 10 Groupings are based on previously conducted user research: • Contextual Inquiry visits to clients and prospects • Meetings with clients • In-house knowledge of our users and their needs User research is the beginning of the User-Centered Design process, which keeps us focused on users at every step in the project’s lifecycle.
- 11. User Research: User Grouping and Personas (cont.) 11 User Grouping helps us understand the different categories of users, with differing needs, for whom we need to design. Groupings are based on the key attributes of user populations. These attributes are identified via user research. Groupings serve as a platform for development of personas.
- 12. Sample User Grouping Dimensions 12 Group Name J Task Scope W M H Domain Exp. M L H Collab & Comm MNeed Frequency of Use Device Pref. N H F O Goals & Motivations Goal 1 Goal 2 Goal 3 Pain Points / Frustrations Frustration 1 Frustration 2 Frustration 3 n J = Jack of All Trades (very wide range of tasks) W = Wide (wide range of tasks) M = Medium N = Narrow H = High M = Medium L = Low Computer Tablet Smartphone Size of circle indicates extent of usage of that item / method. Dotted line indicates minimal usage. Size of bar segment indicates proportion of user population with that attribute. H = Habitual F = Frequent O = Occasional Methods (current) Paper Phone Other systems Email Face-to-face Fax
- 13. Patient-facing Staff, Multi-taskers 13 J Task Scope W M H Domain Exp. M L H Collab & Comm M Need H Frequency Device Pref. Goals & Motivations Delight patients Accuracy Speed Avoid rekeying data Pain Points / Frustrations Performance (too slow) UX is unpleasant Poor data exchange between systems 1 Methods (current) User Grouping Example
- 14. Denise, the Front Office Multi-tasker 14 I am the face of the business for patients and the staff of other providers (e.g. referring physicians). I also work closely with other staff at my facility. In this role, I want to delight everyone with the quality of my service, but especially patients. I need to capture and use data quickly and accurately, which is important to our business running smoothly. Goals & Motivations § Want to make patients and coworkers happy, which reduces stress for me. § Need to multi-task (juggle multiple tasks at once and switch quickly, while maintaining my context for each). § Be able to manage my tasks quickly and efficiently so that I can handle the workload and go home on time. § Accurately collect money due on date of surgery. Pain points § I often get interrupted during tasks (I need to be able to stop and start tasks while not losing my progress on a task); it’s often hard to switch between tasks quickly. § I often have to re-key data from other systems, because data doesn’t transfer. § I have to wait on the software too much. § Too much paper! Name Denise Type Patient-facing, Multi-tasker Tasks Registration, Scheduling, Audit, Billing, Payments, + “I want to provide great service to everyone I deal with, but I also just want to get done and go home.” Behaviors / Attributes Low High Technical experience Low High Domain knowledge / experience Narrow Jack of all trades Task scope Guided / novice Power user Usage style Occasional Habitual Frequency of usage Low High Collaboration & Communication Needs
- 15. Planning (continued) 15 4. Understand requirements/constraints of new system: Business goals: What value are we creating for users? Target users: Are they different from existing systems? How are they changing? Contexts (Environments, Devices): Different from existing systems? Technical Targets/Constraints: Web/Native Apps, UX Frameworks, Responsive Design, Accessibility, Browser Compatibility, etc. 5. Information Architecture: Establish the overarching model of how information and associated tasks within the system are organized and structured.
- 16. Per-Sprint UX Activities: Overview 16 Design Prototype Usability Test Revise Code RWD Test BC TestAC Test Usability Test Design Loop Implementation Loop Upcoming Sprints Current Sprint
- 17. Per-Sprint UX Activities: Details 17 Define features in upcoming sprint •Requirements / Stories •Information Architecture Design features in upcoming sprint •Visual design •Interaction design Mockups / prototypes • Low-fidelity / wireframe • Clickable • Working code Test and refine •Cognitive Walkthrough •Usability Test Code UX for features in current sprint •HTML / CSS / Sass •Javascript / Angular Responsiveness Test • Smartphone • Tablet • Desktop Browser Compat. Test •All browsers and versions specified in SM browser standards doc Accessibility Test • WCAG 2.0 Level A Post-mortem • Revise IA • Add to UX guidelines / pattern library Design Loop Implementation Loop Upcoming Sprints Current Sprint
- 18. Tech / Tools Example 18 HTML5 / CSS3 SASS, SMACSS AngularJS + Bootstrap + Pattern Library Customized to needs of DEVELOPERS Adobe tools Balsamiq, Sketch JustinMind, Invision, UXPin Dev Design Customized to needs of STAKEHOLDERS, UX RESEARCHERS, and DEVELOPERS Working Code Design Artifacts
- 19. UX Artifacts 19 Mockups & Prototypes CSS / HTML Living Style Guide Styles & Colors Interaction Design UX Pattern Library Personas Usability Test Reports Per-Feature Design Docs
- 20. Mobile First and Responsive Design 20 Mobile (smartphone) solution is designed first Tablet and Desktop solutions follow Responsive Design means the same code base adapts to different devices
- 21. Usability Testing 21 assesses these quality attributes of a UX Usability Testing Useful Findable Accessible Usable Desirable
- 22. Usability Testing: Types of Tests 22 1. Quantitative (Analytics) 2. Qualitative • Participant: A “regular” person who is not associated with the development of the product. • Facilitator (Moderator): The person conducting the test. Usually a UX professional. • Participant uses software while Facilitator observes. • 15 minutes to 1 hour per participant. 80% of usability problems can be found by testing just 5 users
- 23. Usability Testing: Process 23 Create testable wireframe / mockup / prototype Formulate UX questions & hypotheses Create user tasks list Recruit participants Conduct tests with users, observe & record Compile and analyze results Report problems & create solutions
- 24. Usability Testing: Setup 24 Participant uses a device with screen-sharing and -recording software so that what they do can be seen by others. Example: WebEx. For computers, the webcam & microphone are used so that we can see and hear the user. For mobile devices, an external camera is pointed at the device’s screen so we can see the user’s physical actions, such as finger taps and swipes.
- 25. Usability Testing: Method 25 Participant is given a list of real-world tasks to perform. “Think Aloud” protocol: User verbalizes what they’re thinking as they use the software. One-on-one: Participant performs tasks in the software while Facilitator observes and takes notes. Additional observers can watch remotely via screen sharing and webcams / microphone.
- 26. Usability Testing: Technique 26 Focus is on observing actual behavior, not asking for opinions. We want to know if the user can accomplish tasks in the software, not if they “like” it. Local (Participant and Facilitator in same location) vs. Remote (in different locations). Moderated (Facilitator present) vs. Unmoderated (Facilitator not present; session is recorded for later review).
- 27. Usability Testing: When do we test? 27 We test at every stage of design & development Test competitors Test wireframes Test static mockups Test clickable prototypes Test pre-release Test post-launch
- 28. Usability Testing: What do we test? 28 Wireframes / Sketches / “Paper Prototypes” • Only practical for local testing (requires Facilitator) • Limited range of tasks that are feasible Clickable / Tappable Prototypes • Can be done remotely using screen sharing and webcams • Much wider range of feasible tasks Working Code / Production Code • Can be done remotely using screen sharing and webcams • Greatest range of feasible tasks • But often “too late” – if usability problems are found, design / code must be reworked ($$$)
- 29. UX Activities: Adjunct Tasks Adjunct UX Education Hire UX Team Develop UX Guidelines Develop UX Pattern Library Monitor UX/Design Trends
- 30. Adjunct Activities 30 1. UX education for stakeholders & development teams: Presentations / webinars / blog posts / videos Recommended learning resources (books, videos, articles, tools, etc.) Champion Design Thinking throughout the enterprise 2. Hire UX team members (engineers and designers) 3. Develop UX guidelines and standards documentation, and pattern (code) library as design & development evolve. 4. Monitor emerging UX/design trends and incorporate as warranted.
- 31. THANK YOU! Email questions and comments to: [email protected]