1 of 34

Holly Reynolds Jon Haines

UX Bootcamp 2021

1

2 of 34

Holly Reynolds

Senior Product Designer - GitLab

2

3 of 34

Jonathan Haines

Product Designer - Epiq

3

4 of 34

Day 1

Day 2

Day 3

UX Fundamentals & Design Thinking

UI Design Foundations

Design / Developer Handoff

4

5 of 34

What is UX?

‘User experience’ encompasses all aspects of the end-user's interaction with the company, its services, and its products.

Donald Norman, Jakob Nielson - NNGroup

5

6 of 34

It’s not you!

6

“Norman Doors” are everywhere!

7 of 34

What is NOT UX?

UX is not UI
UX = user experience
UI = user interface

7

8 of 34

A Brief History of UX

In 1993 Don Norman coined the term “user experience” for his group at Apple Computer.

8

9 of 34

Design Thinking

9

10 of 34

Design Thinking Purpose

Provides structure
Fosters creativity and innovation
Challenges assumptions
Surfaces bias

10

11 of 34

Design Thinking :: Empathy

Who is/are the user(s)?
What are their goals?
What are their pain points?

11

12 of 34

Design Thinking :: Empathy Tools

Proto/lean personas
5 Whys
User interviews
Empathy maps

12

13 of 34

Design Thinking :: Define

Problem validation
What is the problem or opportunity?
What are your assumptions or theories about the user or problem?
What does success look like for the product?
What are the business needs?

13

14 of 34

Design Thinking :: Definition Tools

Affinity diagrams
Prioritization matrix
Point of View / Problem statements
Hypothesis statements
User insights
User scenarios

14

15 of 34

Design Thinking :: Ideate

Brainstorming!
Highly collaborative
More ideas is more important than great ideas

15

16 of 34

Design Thinking :: Ideation Tools

Whiteboarding
Miro
Mural
Dot voting
Crazy 8s

16

17 of 34

Design Thinking :: Prototype

Creating testable items that you can learn from
Thinking through and designing the user’s journey

17

18 of 34

Design Thinking :: Prototyping Tools

Figma
Adobe XD
Paper prototyping
Coded prototypes
InVision
Sketches
Digital wireframes
User flows

18

19 of 34

Design Thinking :: Test

Getting user feedback
Validating the solution

19

20 of 34

Design Thinking :: Testing Tools

Note-taking tools
Screen recording tools

20

21 of 34

UX + Design Thinking

Design Thinking is a framework for UX designers and researchers.

21

22 of 34

Activity: Create Persona 10 mins

You’ve been hired by your school to create a mobile app to solve a problem related to the school itself, classes or students. Think about what the problem is you want to address and then create a persona to represent the person you want to help.

Create a simple proto persona:

Sketch a simple image of the person (stick figures are OK!)
Make notes on who this problem impacts. How old are they? What’s important to them?
What are their “pain points”?
What are their goals?
What are they thinking, feeling, doing and saying about the problem?

22

23 of 34

23

Observed problem:

Morale has been low during Covid. Prompt people to engage in a daily act of kindness for other students or faculty.

24 of 34

Activity: Create Persona 15 mins

Name

Made up
Not your name
Not a celebrity

Picture of persona

Stick figures are fine!

Demographics info

Basic age, location, job, single/married

Goals

What do they want to do?
What do they need to do?

Pain Points

What is interfering with their goals?

24

25 of 34

Activity: Problem Statement 15 mins

You’ve been hired by your school to create a mobile app to solve a problem related to the school itself, classes or students. Craft your problem statement and explore how to address it.

Craft a point of view (10 minutes) statement: The point of view statement should include a specific user, a need/goal, and an insight.

For example:

“A high school senior wants to find a way to encourage his classmates and school staff during COVID because morale has been a bit low due to social distancing.”

25

26 of 34

Activity: Ideation Pt 1 10 mins

You’ve been hired by your school to create a mobile app to solve a problem related to the school itself, classes or students. Brainstorm ideas for possible solutions!

Come up with possible solutions (10 minutes) - as many ideas as possible. You can use words or sketches.

Example:

Send a cheerful text to 5 people each day
Create a Youtube video with positive messages and share daily
Create an “encouragement” list based on feedback from classmates/staff, contact each person weekly for a video chat to check in

26

27 of 34

Activity: Ideation Pt 1 10 mins

Come up with as many ideas as you can to potentially solve the problem!

This would typically be done in a team setting with others such as developers and product managers, possibly other designers.

27

28 of 34

Activity: Ideation - Next Steps

After this, you may “dot vote” on ideas as a group until 1 idea is selected as the feature to explore.

We’re skipping this for this activity.

28

29 of 34

Activity: Ideation Pt 2 10 mins

You’ve been hired by your school to create a mobile app to solve a problem related to the school itself, classes or students. Define a simple workflow for your proposed solution!

Define the user activities and steps (15 minutes): Write down all the steps you can think of that make up the user’s journey with this new idea.

For example:

Downloads the app, creates an account, finds friends and classmates through the app, views each person’s list of “Daily Kindness Requests”, chooses one, completes the request!

29

30 of 34

Activity: Ideation Pt 2 10 mins

30

31 of 34

Activity: Prototype 10 mins

You’ve been hired by your school to create a mobile app to solve a problem related to the school itself, classes or students. Wireframe a simple screen for this app!

Create 1 mobile screens (15 minutes): Sketch out 1 page of the user interface (i.e. the mobile screen) that would be needed for this step.

31

32 of 34

Activity: Prototype 10 mins

Create a simple wireframe prototype of one possible screen for this product.

Designers create wireframes to help show structure of a website, app or other product without showing aesthetic details like pictures and colors. This helps the team to focus on the basics as the other details will come later when the product is more defined.

Typically, designers make lots of these screens and make them interactive with tools like Figma, InVision or Adobe XD, then test them with users.

32

33 of 34