Designing responsive experiences across screens takes consideration of users’ needs and situation. By mapping out and understanding the customer journey, we can plan content from the smallest canvas-out, and create content that's right for our organizations and our users regardless of the device.

1. Context, baby! Context!
User journeys
for
Responsive design
CS Applied USA 2013
@rebekahcancino

2. Surprise!

3. Context, baby! Context!
User journeys
for
design

4. That’s me, in the back there!
@rebekahcancino

5. It’s responsive!
It’s adaptive?

6. You keep using that word.
I don’t think it means what you think
it means.

7. We have to think beyond
breakpoints

8. We have to plan from
the smallest canvas-out

9. You don’t know what you don’t know.
Short-term tactics without long-term
strategy will always lose. It’s just a
matter of time.
The “future” is getting faster.
#CSAUSA
@rebekahcancino

10. Why user journeys?
User journeys are really people journeys.

11. CONTEXT.

12. CONTEXT is not tied to
devices

13. CONTEXT is tied To
people

14. Every content experience we design is
for people.
To design delightful experiences, we
must let our users decide what works
for them and their context.
#CSAUSA
@rebekahcancino

15. Sup, JSpool!

16. "Search is only for the site’s content. The
refund policy is not content."
- A Client

17. Everything is content.
“Content is what the user needs
or wants right now.”
- Jared Spool

18. Good for grain,
bad for user experiences

19. Brands are not experienced in one
channel or touchpoint.
A lack of interconnectedness is a
major competitive risk.
#CSAUSA
@rebekahcancino

20. The experience we create digitally is just
one very small slice of the overall customer
experience.
Customer journeys are massively
important when it comes to creating a
more unified experience across everything.
#CSAUSA
@rebekahcancino

21. A bit of distinction.
Customer Journey vs. User Journey.
Today, we’re bringing in our focus to the
User Journey in relation to a website.
But please, for the love of all that’s holy,
don’t forget the overall Customer Journey,
in your other work.
#CSAUSA
@rebekahcancino

22. Your context is not my
context

23. What about the “mobile context?”
“I love fiction. UFOs, unicorns, faith
healing, the Mobile Web, the Mobile
Context, psychics.”
- Stephen Hay

24. We live in a cross-platform culture.
People don’t think, “Is this task
appropriate for this device?”
We often use multiple devices, from
start to finish, during a single task.
#CSAUSA
@rebekahcancino

25. A mobile device may be someone’s only
access to your site.
People with lower incomes deserve equal
access to the internet.
#CSAUSA
@rebekahcancino

26. Surprise!

27. “He found his last three sports cars on
his phone. When he arrived at the
dealership, he was ready to buy.”

28. user journeys
1
1
2
1
Define your purpose and goals
3
1
v
4
1
5
Consider their behavioral context
Know your audience
Map their journey and attach to persona
Iterate, test, refine, repeat!

29. Why are you in business?

30. Every journey has a
destination

31. Where a person is going says a lot about
their journey.
The person on the journey does not
decide what the destination is like, they
choose it because of what it already is.
#CSAUSA
@rebekahcancino

32. Defining your purpose, values, style,
and vision is the foundation for
everything else.
You can’t understand your users’
journeys without knowing why you exist
and what you stand for.
#CSAUSA
@rebekahcancino

33. PURPOSE
VALUES
Why you’re in business.
It summarizes the difference
you’re trying to make in the
world and what drives you every
day.
The attitudes and beliefs at the
core of your company. What’s
truly important to your business,
and should be reflected in all of
your decisions and actions.
STYLE
VISION
Traits representing your core
characteristics and style of doing
business. Used as a source of
inspiration and guidance for
branding, site design, messaging,
and more.
What the future will look like once
your goals are achieved. It’s
important for this to be clear so
everyone is working towards a
common goal.

35. “We’re 80sTees.”
“And our mission is to delight and
amaze the kid in us all.”

36. user journeys
1
1
2
1
Define your purpose and goals
3
1
v
4
1
5
Consider their behavioral context
Know your audience
Map their journey and attach to persona
Iterate, test, refine, repeat!

37. Take a look inside

38. Personas should be grounded in
research and elevated by empathy.
They’re filters to help you to see through
your users’ eyes.
They speak to decision modes,
preferences, concerns, motivations, and
information needs.
#CSAUSA
@rebekahcancino

39. You are not your target audience.
Beware of biases.
Don’t assume you know what your users
want and why they choose to do
business with you.
Ask them.
#CSAUSA
@rebekahcancino

40. Capture the richness of the human
experience.
Have conversations, follow a directed
storytelling method, be curious,
document everything.
#CSAUSA
@rebekahcancino

41. Check it twice.
Qualitative research is only as good as
the questions you ask and the skill level
of the interviewer.
Use quantitative research to gather clues
and validate hunches, but be wary of
making broad assumptions.
#CSAUSA
@rebekahcancino

42. logical
methodical
competitive
slow
fast
humanistic
spontaneous
emotional

44. user journeys
1
1
2
1
Define your purpose and goals
3
1
v
4
1
5
Consider their behavioral context
Know your audience
Map their journey and attach to persona
Iterate, test, refine, repeat!

45. Thinking. feeling. doing.

46. Don’t be a heartless bastard.
“The number one practical competency
for success in life and work is empathy.”
- Peter Drucker
#CSAUSA
@rebekahcancino

47. Personal-behavioral context
Cognitive
Learning ability,
education, cognitive
assumptions
learning
Environmental factors,
physical activity, habits,
disabilities, sensory stimuli
Physical
doing
Emotional
feeling
Psychological state,
stress, desires, needs
By Daniel Eizans

48. Remember this guy?

49. He’s got a behavioral
context too.

50. user journeys
1
1
2
1
Define your purpose and goals
3
1
v
4
1
5
Consider their behavioral context
Know your audience
Map their journey and attach to persona
Iterate, test, refine, repeat!

51. User flows, ftw.

52. A deep dive into data can be delightful.
Google Analytics
ü Entry pages
ü Exit pages
ü Devices
ü User flow
ü Traffic sources
#CSAUSA
@rebekahcancino

53. Think it through
together

54. Invite everyone to the party.
The more skill sets and perspectives
represented, the better.
ü Marketing
ü Sales
ü Customer Service
ü Development
ü Executives, etc.
#CSAUSA
@rebekahcancino

55. A puppy story

56. EXAMPLE - Susan: the browsing buyer
Susan isn’t on a mission to buy a new
puppy, she’s just browsing the internet
and having fun looking at cuddly little
animals.
She switches modes when she finds a
pup on your doggy matchmaking site
she just can’t live without.

57. Susan: the browsing buyer
As a new user, Susan
comes to the site
through:
As a return user,
Susan comes to the
site through:
•
•
•
•
•
•
•
•
Image Search
Facebook/Pinterest
Individual dog listings
YouTube
Direct visit
Facebook/Pinterest
Breed hub page
Breed available
notification email

58. Susan: the browsing buyer
.

59. Adaptive Path knows what’s up.

60. Susan: the browsing buyer
In charting out Susan’s journey we discover:
•
•
•
•
Potential points of friction
Gaps in information
Opportunities for microconversions
What metrics we’ll use to continuously
improve her experience
• Content prioritization
• And more!

62. These insights inform our
considerations for small screens.
• COPE (Create once, publish
everywhere)
• Interdigitation (Flexbox)
• Localized content
• CMS issues
• Metadata and markup
• And more!

63. user journeys
1
1
2
1
Define your purpose and goals
3
1
v
4
1
5
Consider their behavioral context
Know your audience
Map their journey and attach to persona
Iterate, test, refine, repeat!

64. Look for patterns

65. Good: Metrics are about measurement
Better: Metrics are
about learning

66. Remember.
There’s no such thing as “the most
important metrics” for everyone or a
plug-and-play measurement strategy.
#CSAUSA
@rebekahcancino

67. Ask questions
You see a high amount of page views per visit with
a relatively low avg. time on site, and you wonder:
Are they having a hard time finding what they
need?
You formulate a hypothesis: Maybe our navigation is
unclear?
Which leads to an experiment: Let’s clarify the
navigation nomenclature and see if there’s an
improvement

68. This story never ends

69. Remember.
The digital work we do is never final. This
is an iterative process.
Plan for constant improvement,
adjustment, and learning.
#CSAUSA
@rebekahcancino

70. Don’t let your insight become an artifact.
Find ways to keep the understanding
you gained from charting user journeys
alive as you iterate.
Create accountability, buy-in, and a
shared sense of ownership.
#CSAUSA
@rebekahcancino

71. Questions?
Let’s talk, preferably with cocktails.
#CSAUSA
@rebekahcancino