Session 2 - 10000 Feet Up

1000 Feet Up: Analysis + Storyboards
Session 2 - April 10, 2014
School of Visual Concepts - UX1
http://svc-ux1.leannagingras.com

Week 1: Introduction, process and interviewing
what is UX? what does “doing UX” look like?
Week 2: Analysis and storyboards
how do we make sense of the bigger picture?
Week 3: User-centered design techniques
how 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 UX
how 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?

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
- 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
- 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 / memory
design: 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

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 needed
5. 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?

GETTING READY IN THE MORNING
task timeline

stages

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!

START 1000 FEET UP
Figuring 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 TOOLKIT
These 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 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?

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

Timbers game!"
Goals:
Frustrations:
season
Generalizes user
groups but is
specific enough to
be useful!

Timbers game!"
Goals:
Frustrations:
season
Provides context
and motivations

Timbers game!"
Goals:
Frustrations:
season
Clearly identifies
user goals and key
tasks

Timbers game!"
Goals:
Frustrations:
season
Calls out pain
points and
frustrations

SCENARIOS
Scenarios (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

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

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)

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.

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 FLOWS
Step-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!

SCENARIO
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 looking at Rick Steves tours!
BREAK IT DOWN
Let’s whiteboard this!

STORYBOARDS
Storyboards 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

lay out what each step might look like for Diana
???

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.

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

Homework: Personas & Workflow
Consolidate your interviews. What did you learn?
Create a proto-persona and scenario.
Storyboard it out!

Session 2 - 10000 Feet Up

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Session 2 - 10000 Feet Up

Ähnlich wie Session 2 - 10000 Feet Up (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Session 2 - 10000 Feet Up