UX Design Course Notes

Course Overview

• Focus on creating storyboards, wireframes, and low-fidelity prototypes.
• Key learning outcomes include:
  • Using research to inform ideation.
  • Building storyboards to create wireframes.
  • Drawing basic elements (shapes & lines).
  • Understanding information architecture.
  • Creating paper and digital wireframes in Figma.
  • Developing low-fidelity prototypes.
  • Recognizing and avoiding deceptive patterns in designs.

Instructor Introduction

• Karen, Interaction Designer at Google, focuses on UX accessibility.
• Background includes marketing and business development before switching to UX design.
• Involved in running a UX community (Hexagon UX) advocating for underrepresented communities in UX.

UX Design Process Steps

1. Empathize with users to understand their needs.
2. Define user needs and problem statements.
3. Ideate potential design solutions using methods like Crazy Eights and "How Might We" questions.

UX Tools Overview

• Empathy Maps: Charts summarizing user insights, focusing on what users say, think, do, and feel.
• Personas: Fictional users representing broader user goals and characteristics.
• User Stories: One-sentence descriptions capturing user needs that inspire design decisions.
• User Journey Maps: Visual representations of user experiences to identify pain points.
• These tools help formulate problem statements that guide design solutions.

Transitioning to Design Solutions

• Goal Statement: A concise description covering who the product serves, what it does, and why it solves user needs.

Storyboarding

• Definition: A series of panels that visualize a user’s experience with a product.
• Key Elements:
  • Character (the user)
  • Scene (the environment)
  • Plot (the benefits/solutions)
  • Narrative (user problems and how design addresses them)
• Two types of storyboards:
  • Big Picture: Focuses on overall user experience.
  • Close-Up: Concentrates on specific product screens and interactions.

Wireframing Basics

• Wireframe: A basic outline of a digital experience, establishing page structure and highlighting intended functionalities.
• Benefits of Wireframing:
  • Organizes content and layout.
  • Highlights intended functions of elements.
  • Saves time and resources by allowing early testing of design concepts.

Transition to Digital Wireframes in Figma

• Importance of creating digital wireframes after paper prototypes to reflect structure and functionality.
• Use of elements like rectangles and lines to symbolize content in the app.
• Figma tools for creating shapes, text, and organizing layers.

Prototyping

• Definition: An interactive representation of a design solution.
• Transition from wireframes to low-fidelity prototypes involves adding interactivity to designs.
• Paper prototypes allow for rapid iteration and testing of ideas.
• Digital prototypes made in Figma allow users to navigate app flows and provide feedback.

Avoiding Deceptive Patterns

• Deceptive Patterns: Design techniques that trick users into actions (e.g., hidden costs, force continuity).
• Ethical implications of using deceptive patterns and the importance of designing user-centered experiences.

Conclusion

• Summary of skills gained:
  • Research-informed design process.
  • Creation of storyboards and wireframes.
  • Transitioning designs from wireframes to prototypes.
  • Recognizing and avoiding deceptive design practices.

Next Steps

• Prepare for further learning in the next course, focusing on research processes and usability studies.