Skip to content

ui-ux-design.md

Latest commit

 

History

History
145 lines (98 loc) · 6.32 KB

ui-ux-design.md

File metadata and controls

145 lines (98 loc) · 6.32 KB

UI/UX Design

Week 2 Keywords and Questions

(refer to the lesson slide deck)

  • What is UX?
  • What is UI?
  • How are they different?
  • How do UX and UI work together?
  • What is a user story?
  • Why do we write user stories before building?
  • Cite an example of good UI?
  • Cite an example of good UX?
  • Cite an example of bad UI?
  • Cite an example of bad UX?
  • Why are UI, UX, and user-centered planning important?

Vocabulary

Term Definition
UI User Interface — what users see and interact with (buttons, colors, layout)
UX User Experience — how users feel when using a product
User Story A short statement describing a user's need or goal, written from their perspective

Prerequisites

Motivation

User Interfaces (UI) and User Experiences (UX) describe the things users see and feel when they interact with a product. Almost all tech companies build products of some kind or another, and it's imperative that their products be well-received and well-loved by their users.

When a product feels great to use, it’s because someone thought carefully about the user's needs. This is where user stories come in — they help teams build with empathy by focusing on what users want and why.

Introducing user stories now creates a habit of centering the user — which helps participants later plan MVPs, database schemas, and system design in more human-focused ways.

Companies that focus on UI/UX designs:

  • Amazon: Amazon is a prime example of a company that has built its success and ROI upon a focus on customer experience throughout the entire customer journey and that continually measures the user experience.
  • interaction-design.org -Flipkart

Objectives

Participants will be able to:

  • Define "UI" and "UX"
  • Explain how UI and UX work together
  • Identify good examples of UI and UX
  • Write simple user stories that describe user needs

Specific Things to Learn

  • Differences between UI and UX
  • How UI and UX work together

Supplemental Materials

Lesson

UI/UX Design (video walkthrough of slides)

UI/UX Design (slides)

Things to Remember

  • Interface design is often seen as the "visible things on screen". In fact, it is about the experience, but not just the experience using the app, it's about the whole user experience, including the one outside the app. Designers must immerse themselves into the user's mind and life.

  • The iterative aspect of the design process is key. Designer motto: The first design is never right. A good designer always refines solutions and explores options.

Independent Practice

Activity #1 - Design Improvements Pick an app or website whose UI or UX you dislike and spend 10 minutes making a list of things that could be improved.

Focus of the following:

  • Am I able to complete the tasks for which the interface is built for?
  • Why would I not use the app on a daily basis?
  • Details matter. How is the copywriting? The app's personality? The visual language? The colors? The information density?
  • List other annoyances you might see, hear, or feel

Activity #2 - Design Successes Name something (an app, an object, an experience, a place) that you use regularly and that is truly making your life better. It doesn't have to be an application or software.

Spend 10 minutes writing down your feelings: Why do you use this in particular? Why not another app?

What do you think stands out in terms of the following?:

  • Emotional response
  • Usefulness
  • Usability
  • Simplicity
  • Sense of community
  • Speed

Pair Practice

Activity #3 - Writing User Stories

Work with a partner to practice writing and reviewing user stories.

  1. Choose an App Together
    Pick an app or product you both use — or come up with a simple idea together
    (e.g. a to-do list, recipe app, or pet adoption platform).

  2. Identify a Type of User
    Who is the app for? A student? A commuter? A parent? A small business owner?

  3. Write 2–3 User Stories
    Use this format:

    As a [type of user], When I [do something], then [I can achieve a benefit].

    Examples:

    • As a new user, when I visit the signup page, and I sign up with Google, then I am taken to the homepage.
    • As a logged in user, when I visit the settings page, I can fill out a form to update my password.

  4. Swap and Review
    Read each other’s stories and offer kind, helpful feedback. Ask:

    • Is the user type specific?
    • Is the benefit clear?

  5. Refine Together
    Pick one story to revise together, improving clarity and focus.

Wrap-Up Prompt:
What did you notice when reading your partner’s stories?
What made a story feel strong or unclear?