1
PREPARED BY
IT’S ABOUT THE JOURNEY
@MARSINTHESTARS
September 10, 2016
Big Design Conference
Marli Mesibov, Director of Content StrategyMad*Pow
2
• Managing Director of Content Strategy at Mad*Pow
• Managing Editor of UX Booth
• Theater Major, Brandeis – that’s a long way from speaking about design
Big Design | @marsinthestars
Who am I? Why am I here?
3Big Design | @marsinthestars
I took a journey to get here
_______ My journey
4Big Design | @marsinthestars
I took a journey to get here
Apply Acceptance Travel Arrive Speak
I researched Big Design conference, and decided it was a good fit for my talk. I applied using the online form.
I received an email accepting my talk, responded, and began looking up flights to book.
I checked in the day before, then took an Uber to the airport, flew to Texas, and took a cab to the hotel.
I checked into the hotel, went to my room and unpacked.
I checked into the conference, and prepared to speak with you.
5Big Design | @marsinthestars
Let’s make this a mobile-first experience
Apply Acceptance Travel Arrive Speak
Create responsive submission form, accessible via mobile phone.
Design email to load easily, with few (small) images.
Allow check-in via phone, and hotel updates in my email designed for mobile access.
Include a QR code for mobile hotel check-in, and a key via QR code for my hotel room.
Show conference badge on phone screen.
Phone Phone Phone Phone Phone
6Big Design | @marsinthestars
Let’s make this a journey-first experience
Apply Acceptance Travel Arrive Speak
I researched Big Design conference, and decided it was a good fit for my talk. I applied using the online form.
I received an email accepting my talk, responded, and began looking up flights to book.
I checked in the day before, then took an Uber to the airport, flew to Texas, and took a cab to the hotel.
I checked into the hotel, went to my room and unpacked.
I checked into the conference, and prepared to speak with you.
Computer Tablet Phone Phone In-person
7
WHAT’S WRONG WITH MOBILE-FIRST?
8Big Design | @marsinthestars
Desktop thinking
Desktop Mobile
9Big Design | @marsinthestars
Mobile-first thinking
“Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.”
–Luke Wroblewski, Mobile First (2009)
10Big Design | @marsinthestars
Mobile-first thinking
Mobile Desktop
11Big Design | @marsinthestars
Journey-first thinking
“If I’m browsing and adding to a cart on my smartphone, I expect that same history and half-filled shopping basket to be carried across to the desktop site, and vice versa. It’s the only way to guarantee customer satisfaction, aid conversion, and encourage return visits.”
- Christopher Ratcliff, More than 40% of Online Adults are Multi-device Users (2014)
12Big Design | @marsinthestars
Journey-first thinking
13Big Design | @marsinthestars
Journey-first thinking
The divide between online and IRL has dissolved. Our experiences run across phone, laptop, tablet…
14Big Design | @marsinthestars
Journey-first thinking
…watch, TV, car…
15Big Design | @marsinthestars
Journey-first thinking
…and toilet?
16
WHAT IS THE JOURNEY?
17Big Design | @marsinthestars
The journey is the steps taken
18Big Design | @marsinthestars
The journey is the path of touch points
19Big Design | @marsinthestars
The journey is the user flow
20Big Design | @marsinthestars
The path
The journey is the path a person takes from the start of the experience, through to the end of the experience.
Along the way, they encounter touch points. That’s what we can design.
21
FINDING THE PATH
22Big Design | @marsinthestars
The Mad*Pow Process
23Big Design | @marsinthestars
5 steps of journey-first design
Action Goal Deliverable
Interview end-users Learn from the source Raw notes
Create personas Compile the details of many people into a representation
1-3 Personas
Map the user flow(s) Understand potential scenarios and identify touch points
Journey map
Connect the touch points to channels
Learn how users communicate at each touch point
Ecosystem web
Design and content Build something A prototype
24Big Design | @marsinthestars
Step 1: Interviews
25Big Design | @marsinthestars
Step 2: Personas
26Big Design | @marsinthestars
Step 3: User flows
27Big Design | @marsinthestars
Step 4: Touch points
28Big Design | @marsinthestars
Step 5: Design
29
WELCOME TO THE FUTURE
30Big Design | @marsinthestars
Convince your boss
• Mapping the journey doesn’t take significant extra time or budget – it can be done in as little as 2 hours, and it doesn’t require screens to be designed for every option
• It can be done with a team of one, or a huge group
• Thinking about the multitude of possible devices helps prepare for the future
• Identifying touch points helps us create engaging content
31Big Design | @marsinthestars
Take into consideration
• Have I designed for the most critical device?
• What other devices might come into play here?
• What is the context for this interaction? Where will my user physically be?
• Is my content dynamic or static?
• What is the conversation between person and device?
32Big Design | @marsinthestars
How to get started
• Don’t wait for permission. Grab your sticky notes!
• Talk it out: talk through the story of what the persona is doing, where they are, and why.
• Imagine the use-case scenario for every screen you design.
• Read up on the Internet of Things.
33Big Design | @marsinthestars
Resources
• Designing Multi-Device Experiences, by Michal Levin (book)
• Adapting Ourselves to Adaptive Content, by Karen McGrane (presentation)
• Mobile First, by Luke Wrobelwski (book)
• Designing Digital Strategies, by Sofia Hussain (article)
34Big Design | @marsinthestars
Thank you!
Top Related