The document outlines key components of user experience design, including understanding users through research, mapping user journeys, creating wireframes and prototypes, and conducting usability testing. It emphasizes the importance of empathy maps to identify user needs and pain points, the structure of wireframes based on atomic design principles, and various fidelity levels for prototypes. Lastly, it provides guidelines for effective usability testing, focusing on participant recruitment, testing scenarios, and incorporating user feedback into design refinements.

1. User Experience

2. Components
• Understanding Your User
• User Journeys and Scenarios
• Wireframes
• Prototypes
• Usability Testing

3. Understanding
Your User
• Business Requirements
Clear goals before beginning
Important decisions before design
Business requirement questions asked during project kickoffs
• User Research
Empathy Map
 Think and Feel: What goes on in their mind?
 See: Their environment and surroundings.
 Say and Do: Their actions and expressed thoughts.
 Hear: Information they receive from others.
 Pain Points: Frustrations, fears, obstacles.
 Gains: Wants, needs, and measures of success.

4. User
Journeys and
Scenarios
• User Journeys
Exploring Delightful Experiences
Map of actions and emotions
that a user goes through
Components: motivations for
using the app, problems it
solves, different phases, and
user emotions.
Realism Based on Research
• Scenarios and Flows
S: specific functional areas
Storyboards Illustration: comic
book format; accessible and
easily comprehensible
Drawing Skill Not Required
F: how users navigate through
the system, depicting the ideal
path and even considering
edge cases.
Flexibility in Representation

5. Wireframes
• Best Practices in Wireframing
• Atomic Design
 Atoms: Basic building blocks; HTML tags
 Molecules: Smallest units of a compound,
formed by combining atoms
 Organisms: complex sections of an interface
 Templates: Groups of organisms stitched
together to form pages
 Pages: with real content and images; the final
visual presentation
• Fidelity Levels: structure and components rather
than detailed visuals.
• Responsive Design: responsiveness in wireframes

6. Prototypes
• Types
Flow Prototyping: Focuses on testing navigation, user task
completion, and overall system movement.
Interaction Prototyping: interactions within the interface
Low Fidelity Prototypes: paper prototypes and wireframes.
Mid Fidelity Prototypes: interactivity over visual design.
High Fidelity Prototypes: appearance and functionality
• Creating a Paper Prototype:
1. Start with wireframes.
2. Create a basic visual representation of the interface.
3. Rearrange and experiment with layout ideas easily on paper.
4. Test different interactions by sketching them out.
5. Play with various design elements to refine the user experience.
6. Paper prototypes allow for quick iteration and testing of ideas.

7. Usability
Testing
Usability Testing: How To
• Decide what aspects of
design to test
• Develop a testing script with
key scenarios for users to
perform.
• Adjust prototype to support
the scenarios outlined in the
script.
• Consider starting with a
paper prototype for quick
feedback and then move to a
digital prototype.
Usability Testing: How To
• Recruit around 5 to 7
participants
• Create a testing schedule
with specific time slots for
each participant.
• Consent forms and
incentives may be needed
• Incorporate any feedback
or insights gained from
usability testing to refine
your design.