Mobile web vs. native apps: It's not about technology, it's about psychology
It's About the Journey
-
Upload
marli-mesibov -
Category
Design
-
view
42 -
download
0
Transcript of It's About the Journey
![Page 1: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/1.jpg)
1
PREPARED BY
IT’S ABOUT THE JOURNEY
@MARSINTHESTARS
September 10, 2016
Big Design Conference
Marli Mesibov, Director of Content StrategyMad*Pow
![Page 2: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/2.jpg)
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?
![Page 3: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/3.jpg)
3Big Design | @marsinthestars
I took a journey to get here
_______ My journey
![Page 4: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/4.jpg)
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.
![Page 5: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/5.jpg)
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
![Page 6: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/6.jpg)
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
![Page 7: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/7.jpg)
7
WHAT’S WRONG WITH MOBILE-FIRST?
![Page 8: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/8.jpg)
8Big Design | @marsinthestars
Desktop thinking
Desktop Mobile
![Page 9: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/9.jpg)
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)
![Page 10: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/10.jpg)
10Big Design | @marsinthestars
Mobile-first thinking
Mobile Desktop
![Page 11: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/11.jpg)
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)
![Page 12: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/12.jpg)
12Big Design | @marsinthestars
Journey-first thinking
![Page 13: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/13.jpg)
13Big Design | @marsinthestars
Journey-first thinking
The divide between online and IRL has dissolved. Our experiences run across phone, laptop, tablet…
![Page 14: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/14.jpg)
14Big Design | @marsinthestars
Journey-first thinking
…watch, TV, car…
![Page 15: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/15.jpg)
15Big Design | @marsinthestars
Journey-first thinking
…and toilet?
![Page 16: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/16.jpg)
16
WHAT IS THE JOURNEY?
![Page 17: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/17.jpg)
17Big Design | @marsinthestars
The journey is the steps taken
![Page 18: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/18.jpg)
18Big Design | @marsinthestars
The journey is the path of touch points
![Page 19: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/19.jpg)
19Big Design | @marsinthestars
The journey is the user flow
![Page 20: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/20.jpg)
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.
![Page 21: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/21.jpg)
21
FINDING THE PATH
![Page 22: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/22.jpg)
22Big Design | @marsinthestars
The Mad*Pow Process
![Page 23: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/23.jpg)
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
![Page 24: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/24.jpg)
24Big Design | @marsinthestars
Step 1: Interviews
![Page 25: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/25.jpg)
25Big Design | @marsinthestars
Step 2: Personas
![Page 26: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/26.jpg)
26Big Design | @marsinthestars
Step 3: User flows
![Page 27: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/27.jpg)
27Big Design | @marsinthestars
Step 4: Touch points
![Page 28: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/28.jpg)
28Big Design | @marsinthestars
Step 5: Design
![Page 29: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/29.jpg)
29
WELCOME TO THE FUTURE
![Page 30: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/30.jpg)
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
![Page 31: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/31.jpg)
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?
![Page 32: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/32.jpg)
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.
![Page 33: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/33.jpg)
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)
![Page 34: It's About the Journey](https://reader035.fdocuments.us/reader035/viewer/2022070513/5882aa8f1a28abd75a8b4dfd/html5/thumbnails/34.jpg)
34Big Design | @marsinthestars
Thank you!