session 2 - 10000 feet up

1000 Feet Up: Analysis + StoryboardsSession 2 - April 10, 2014School of Visual Concepts - UX1

http://svc-ux1.leannagingras.com

Week 1: Introduction, process and interviewingwhat is UX? what does “doing UX” look like?

Week 2: Analysis and storyboardshow do we make sense of the bigger picture?

Week 3: User-centered design techniqueshow do we go from good concepts to good designs?

Week 4: Prototyping and guerilla testing how do we communicate and test design?

Week 5: Measuring UXhow do we measure UX impact and make UX actionable?

** tentative schedule. adjust to taste

Agenda● Discussion: Interviews● Analyzing interview data● Exercise: Affinity diagramming● Personas and scenarios● Design narratives● Studio: From personas to design

Discussion

How’d your interviews go?

LEARNING FROM INTERVIEW DATA

WHAT DO WE DO WITH THIS DATA?The data we get from interviews gives us this information:● Who are our users and what are we designing for? ● What are their key tasks and scenarios?● How do they go about their tasks? ● What gaps and opportunities are in our product?

CONSOLIDATION: THE SIMPLE WAY● When you have a good idea of the problem space ● When the objectives have clear next steps● When you don’t have a lot of interviewees ● When “eyeballing it” is good enough

GO BACK TO YOUR OBJECTIVES“learn what information PTs and clients are sharing now”

- usually following a program built for a specific purpose (marathon, climbing ability, get swole), range from 5 weeks to 6 months (Jeff, Chelsea)- pair reviews recent progress / numbers (all clients) - show #s on Fitness Buddy (Jason) or pad and paper notebook (Claire)- don’t track w gadgets gadgets because “they’re only good for cardio” (Jeff, Claire)- uses gadgets to share with friends, partner (Jeff, Claire)- PT uses history during consultation - keeps track of client with written notes (Jeff) or iPad (Jason) or memory (Liam)

PICK OUT PATTERNS & INSIGHTS“learn what information PTs and clients are sharing now”

- Nobody currently using a targeted collab solution - all verbal / email

- Personal trainers use individual client files, notes - trends are anecdotal / memory

- Pain point: meticulous and difficult to track granular workout details (lifts, reps, weight)

FIGURE OUT NEXT STEPS“learn what information PTs and clients are sharing now”

- Nobody currently using a targeted collab solution - all verbal / email competitive: are there already solutions on the market that are not being used? why not?

- Personal trainers use individual client files, notes - trends are anecdotal / memorydesign: review file photos & map out what info they contain

- Pain point: meticulous and difficult to track on-the-ground workout details (lifts, reps, weight) as well as program trends over time (rate of progress)

group brainstorm: concepts for easy workout tracking - explore integration with gadgets eg Fuelband

CONSOLIDATING BIGGER SETS

AFFINITY DIAGRAMMING is super collaborative, and a great way to find natural clusters and patterns.

1. Record each note on cards or post-it notes

2. Look for things that seem to be related

3. Sort notes or cards into groups until all cards have been used

4. Repeat as many times as needed5. Add labels to groups if

appropriate

http://wiki.fluidproject.org/display/fluid/Affinity+Diagrams

Affinity diagram of items at a grocery store

From Indi Young’s Mental Models book

groups of related items

individual notes

MENTAL MODELS are a type of affinity diagram that model the user’s behavior. what are their needs? how do they accomplish something?

From Indi Young’s Mental Models book

From Indi Young’s Mental Models book

GETTING READY IN THE MORNING

task timeline

From Indi Young’s Mental Models book

GETTING READY IN THE MORNING

stages

From Indi Young’s Mental Models book

GETTING READY IN THE MORNING

features

activities

This is a model of how novices write research papers. This takes data from different users and consolidates and aligns it to a timeline. Stages are yellow, activities are green and blue, features are red and purple.

Exercise: Consolidation

Everyone gets a pile of post-its and a sharpie.Break down how you did your last grocery shopping trip.

How did you plan it and execute it?What did you use? Where did you go?

Anything out of the ordinary?

Next: We’ll break up into 2 / 3 groups, put everything on the wall, and consolidate our data!

THE HIGH-LEVEL UX TOOLKIT

START 1000 FEET UPFiguring out the overall experience first:● gives you a place to start ● keeps your concepts anchored in reality● gives you an idea of what you need to create● helps identify gaps before you start designing● gives you an idea of how it hangs together

Image from http://www.wright-brothers.org

Dropbox’s auto camera upload feature is an example of improving at a high level. The folks at Dropbox probably saw a pattern in what people were saving to their Dropbox, and automated it to take out a few steps.

Amazon likes to make the path to your wallet as short as possible. Adding a feature like this requires looking at the entire experience from 1000 feet up.

Add to cart View cart Shipping options

Payment options

Review order

Order confirmation

Select address and add to cart

Use default payment

Review order

Order confirmation

Typical e-commerce workflow

Amazon’s workflow

Select address and one-click it

Order confirmation

Amazon’s one-click workflow

http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf

THE UX TOOLKITThese are tools for getting started on a design. What you use depends on what you need. ● Personas and scenarios● Experience maps● Design narratives

Warning: don’t get hung up on the distinctions between these things. They’re fuzzy sometimes. Just think of them as approaches for framing problems from 1000ft up..

PERSONAS

PERSONAS!Personas are fictional characters created to represent a user type and how they might use a site, brand or product.

They are artifacts to help you in the building process.

http://asinthecity.com/2011/05/13/explaining-personas-used-in-ux-design-%E2%80%93-part-2/

Personas don’t have to be fancy to get the job done.

Content● Photo or sketch● Quick quote● Demographics● Key tasks, goals & needs● Pain points

https://uxmag.com/articles/using-proto-personas-for-executive-alignment

Placeholder

Lee will share some personas she’s using right now!

HOW DO WE USE PERSONAS?

Personas make great straw men throughout the design and decision-making process!● Making sure the team is all aligned on who they’re building for● Communicating user goals and needs● Guiding design decisions (“would Chelsea want this feature?”)● Surfacing different groups using your product (administrator vs. content creator)

Sometimes personas are very direct and obvious

Every design project has a persona, formal or not. Who do you suppose Columbia designs for?

Grab ‘n Go Gus Savvy Sally

This section of the Rick Steves website is designed to help the tour persona evaluate and make decisions about tours.

David, Opportunistic Fan“My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!"

Goals: ● Get great seats as soon as sales open● Follow a specific rivalry● Jump on cheap last-minute tickets

Frustrations:● Too slow to buy tickets on his phone● Doesn't care about following the whole

season● Missed opportunities to get playoff tickets

David, Opportunistic Fan“My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!"

Goals: ● Get great seats as soon as sales open● Follow a specific rivalry● Jump on cheap last-minute tickets

Frustrations:● Too slow to buy tickets on his phone● Doesn't care about following the whole

season● Missed opportunities to get playoff tickets

Generalizes user groups but is specific enough to be useful!

David, Opportunistic Fan“My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!"

Goals: ● Get great seats as soon as sales open● Follow a specific rivalry● Jump on cheap last-minute tickets

Frustrations:● Too slow to buy tickets on his phone● Doesn't care about following the whole

season● Missed opportunities to get playoff tickets

Provides context and motivations

David, Opportunistic Fan“My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!"

Goals: ● Get great seats as soon as sales open● Follow a specific rivalry● Jump on cheap last-minute tickets

Frustrations:● Too slow to buy tickets on his phone● Doesn't care about following the whole

season● Missed opportunities to get playoff tickets

Clearly identifies user goals and key tasks

David, Opportunistic Fan“My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!"

Goals: ● Get great seats as soon as sales open● Follow a specific rivalry● Jump on cheap last-minute tickets

Frustrations:● Too slow to buy tickets on his phone● Doesn't care about following the whole

season● Missed opportunities to get playoff tickets

Calls out pain points and frustrations

DESIGN NARRATIVES

SCENARIOSScenarios (or user stories) are a narrative description of a problem or a key task.

SCENARIOS

BAD: Diana wants to book a tour

BAD: As a tour member, Diana needs a “buy” button so she can pay us

BAD: Diana goes to the tours landing page and then clicks the primary CTA which takes her to the tour listing page which provides her with a radio button select of tour dates blah blah blah

My rule of thumb: If you were explaining it to someone on the phone, they’d be able to follow along and it would be plausible as a real story.

BUILDING GOOD SCENARIOS

Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour!

Describe who the persona is

BUILDING GOOD SCENARIOS

Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour!

Describe their context of use

BUILDING GOOD SCENARIOS

Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour!

Describe what happens (not how)

BUILDING GOOD SCENARIOS

Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour!

Describe reaching a user goal (or solving a problem)

EXPERIENCE MAPS are a representation of the user’s complete experience, including context, needs, interactions and touchpoints.

http://www.ux-lady.com/experience-maps-user-journey-and-more-exp-map-layout/

Here, I mapped known user experience issues against the customer experience journey. This let us take a step back, quit playing usability whackamole, and hammer out a strategy for holistically improving the experience. (Issues were compiled from 23 studies including usability tests, Foresee surveys, Compete, and heuristic evaluations.)

USER FLOWSStep-by-step representation of completing a task or reaching a goal. They’re good for:● showing where elements are are connected● mapping out conditionality and decision points● identifying screens to be considered in the design

User flow showing how librarians make purchasing decisions. This also shows contingencies and decision treeing.

Placeholder

Lee will share some complicated workflows from a past project!

SCENARIODiana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and looking at Rick Steves tours!

BREAK IT DOWNLet’s whiteboard this!

STORYBOARDSStoryboards take you from concept to design. Storyboards can have a range of fidelities, from box and arrow scribble to full out comics.

Storyboard for fitting a new feature into an existing system and making it easy for users to discover and access. (ITHAKA/JSTOR)

Storyboard for a feature implemented in a single 2-week sprint. (JSTOR)

Affected pages

Persona

Step by step scenario

Note this storyboard is a living document!

Less beautiful, more granular storyboard created to answer the question “what exactly does the hover functionality do?”

http://www.flickr.com/photos/rosenfeldmedia/3978305312/in/set-72157622384497663

Adaptive Path’s sketchboarding video: https://www.youtube.com/watch?v=iVFTBj_BYy0#t=21

Diana is an armchair traveler who loves to live vicariously through her globetrotting 23-year-old son! Maybe she’ll travel some day, but it seems scary!

start by breaking down the scenario, step by step

Diana is an armchair traveler who loves to live vicariously through her globetrotting 23-year-old son! Maybe she’ll travel some day, but it seems scary!

lay out what each step might look like for Diana

???

Diana is an armchair traveler who loves to live vicariously through her globetrotting 23-year-old son! Maybe she’ll travel some day, but it seems scary!

fill in gaps and move around as needed

STUDIO: FROM PERSONA TO DESIGN

Studio:Split up into three groups.

Each group gets a persona!Create a storyboard for your persona.

Present.Discuss.

David, Opportunistic Fan“My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!"

Goals: ● Get great seats as soon as sales open● Follow a specific rivalry● Jump on cheap last-minute tickets

Frustrations:● Too slow to buy tickets on his phone● Doesn't care about following the whole

season● Missed opportunities to get playoff tickets

Jacqueline, Rabid Senior"I don't like going on the group bus to Yankee stadium because the younger people don't think that seniors like me know the game. Whenever I talk about Mariano Rivera's stats they look at me funny."

Goals: Go to Yankee Stadium to see Yankees games, via bus, without the hassle of parking and driving

Frustrations:● She is 70 and high energy but the chartered buses are full

of younger fans who don't respect her substantial knowledge of the game.

● She lives 90 minutes away. She doesn't want to drive because of the cost of parking and stress of NYC driving.

● Public transportation to the stadium requires multiple stops (Drive, commuter train, switch to NY Subway, arrive at Yankee stadium)

Aaron, Ticket Day Trader“We set up alerts in our calendar that connect to StubHub. Sometimes people think I'm looking at my calendar during meetings, but I'm tracking price and seat changes real-time.”

Goals:● Get best ticket / seat value for today's Giants game● Get advance tickets for key games when either a

famous opponent or his favorite pitcher is playing● Easy way to get tickets and settle payments for him

& his crew (2 other guys)

Frustrations:● Non-negotiable: he wants good value, but if he goes

to game, he must get there for the first pitch. ● Hates the back & forth of confirmation and payment

when he gets tickets for the group

Jacqueline, Rabid Senior Aaron, Ticket Day Trader

David, Opportunistic Fan

Homework: Personas & Workflow

Consolidate your interviews. What did you learn?Create a proto-persona and scenario.

Storyboard it out!