An Intro to UX & Content Strategy Best Practices for the Mobile Web

1. MOBILE FIRST
An Intro to UX & Content Strategy Best Practices for the Mobile Web
Kerry Carnahan Ellis & Nicolas Perner - 27 Feb 2014
1

2. 📱
MOBILE FIRST
iPhone, anyone?
2

3. 📱
MOBILE FIRST
…and second, and third
3

4. WHAT IS MOBILE FIRST?
Thank you, Mr. Wroblewski!
http://www.lukew.com/ff/entry.asp?933
4

5. THREE RATIONALES
For Mobile First Methodology
» Greater Opportunity
» Better Focus
» More Innovation
5

6. OPPORTUNITY
Some Stats
1. Nearly half of all American kids want an iPad for Christmas
2. Global mobile traffic now represents roughly 13% of Internet
traffic
3. Nearly a third of all American adults own a tablet or e-reader
4. There are 5 billion mobile phone users in the world, but only 1
billion smartphone users
5. Android is growing after than anything
http://www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile/
6

7. FOCUS
Removing distractions.
7

8. INNOVATION
What will “mobile” mean next?
8

9. SOME DEFINITIONS
Getting Buzzed…
9

10. RESPONSIVE DESIGN
10

11. GRACEFUL DEGRADATION
Where to start?
11

12. PROGRESSIVE ENHANCEMENT
Where to start?
12

13. I’M IN. NOW WHAT?!
Let’s think differently. Some best practices and process.
13

14. MOBILE IS NOT THE “LITE“
VERSION OF YOUR SITE.
14

15. UNDERSTAND YOUR AUDIENCE
Who are we designing for?
» Motivations & Objectives
» Biographical Sketches
» Usage Contexts
» Domain Knowledge
15

16. DEFINE EXPERIENCE PRINCIPLES
16

17. Rail Europe Experience Map
Guiding Principles
People choose rail travel because it is
convenient, easy, and flexible.
Rail booking is only one part of people’s larger
travel process.
People build their travel plans over time.
People value service that is respectful, effective
and personable.
Customer Journey
STAGES
Research & Planning
RAIL EUROPE
Shopping
Enter trips
Research destinations, routes and products
Destination
pages
Review fares
Select pass(es)
Confirm
itinerary
Post-Booking, Pre-Travel
Delivery
options
Payment
options
Review &
confirm
Change
plans
Map itinerary
(finding pass)
Print e-tickets
at home
Web
FEELING
Check ticket
status
Google
searches
• What is the easiest way to get around Europe?
• Where do I want to go?
• How much time should I/we spend in each
place for site seeing and activities?
• I’m excited to go to Europe!
• Will I be able to see everything I can?
• What if I can’t afford this?
• I don’t want to make the wrong choice.
E-ticket Print
at Station
View
maps
Paper tickets
arrive in mail
Look up
timetables
Research
hotels
• I want to get the best price, but I’m willing to pay a
little more for first class.
• How much will my whole trip cost me? What are my
trade-offs?
• Are there other activities I can add to my plan?
• It’s hard to trust Trip Advisor. Everyone is
so negative.
• Keeping track of all the different products
is confusing.
• Am I sure this is the trip I want to take?
Follow-up on refunds for booking changes
Share
photos
Get stamp
for refund
Web
Share
experience
(reviews)
Buy additional
tickets
Kayak,
compare
airfare
Blogs &
Travel sites
Share experience
Activities, unexpected changes
May call if
difficulties
occur
Talk with
friends
Post Travel
Live chat for
questions
DOING
THINKING
Travel
Wait for paper tickets to arrive
Look up
time tables
raileurope.com
Plan with
interactive map
Booking
• Do I have everything I need?
• Rail Europe website was easy and friendly, but
• Do I have all the tickets, passes and reservations
web/
apps
Arrange
travel
Plan/
confirm
activities
Request
refunds
• I just figured we could grab a train but there are
• Trying to return ticket I was not able to use. Not
when an issue came up, I couldn’t get help.
• What will I do if my tickets don’t arrive in time?
• Am I on the right train? If not, what next?
• I want to make more travel plans. How do I
• People are going to love these photos!
• Next time, we will explore routes and availability
• Stressed that I’m about to leave the country
I need in this booking so I don’t pay more
shipping?
• Rail Europe is not answering the phone. How
else can I get my question answered?
not more trains. What can we do now?
sure if I’ll get a refund or not.
do that?
more carefully.
• I am feeling vulnerable to be in an unknown place in
• Excited to share my vacation story with
• Frustrated that Rail Europe won’t ship tickets
• Stressed that the train won’t arrive on time for my
• A bit annoyed to be dealing with ticket refund
to Europe.
• Happy to receive my tickets in the mail!
• Website experience is easy and friendly!
• Frustrated to not know sooner about which
• Meeting people who want to show us around is fun,
and Rail Europe won’t answer the phone.
tickets are eTickets and which are paper tickets.
Not sure my tickets will arrive in time.
the middle of the night.
my friends.
connection.
issues when I just got home.
serendipitous, and special.
Enjoyability
Enjoyability
Enjoyability
Enjoyability
Enjoyability
Enjoyability
Relevance of Rail Europe
Relevance of Rail Europe
Relevance of Rail Europe
Relevance of Rail Europe
Relevance of Rail Europe
Relevance of Rail Europe
Helpfulness of Rail Europe
EXPERIENCE
Mail tickets
for refund
Helpfulness of Rail Europe
Helpfulness of Rail Europe
Helpfulness of Rail Europe
Helpfulness of Rail Europe
Helpfulness of Rail Europe
Opportunities
GLOBAL
PLANNING, SHOPPING, BOOKING
POST-BOOK, TRAVEL, POST-TRAVEL
Communicate a clear value
proposition.
Help people get the help they
need.
Support people in creating their
own solutions.
Enable people to plan over time.
Visualize the trip for planning
and booking.
Arm customers with information
for making decisions.
Improve the paper ticket
experience.
Accommodate planning and
booking in Europe too.
STAGE: Initial visit
STAGES: Global
STAGES: Global
STAGES: Planning, Shopping
STAGES: Planning, Shopping
STAGES: Shopping, Booking
STAGES: Post-Booking, Travel, Post-Travel
STAGE: Traveling
Make your customers into better,
more savvy travelers.
Engage in social media with
explicit purposes.
Connect planning, shopping and
booking on the web.
Aggregate shipping with a
reasonable timeline.
Proactively help people deal
with change.
Communicate status clearly at
all times.
STAGES: Global
STAGES: Global
STAGES: Planning, Shopping, Booking
STAGE: Booking
STAGES: Post-Booking, Traveling
STAGES: Post-Booking, Post Travel
Information
sources
Stakeholder interviews
Cognitive walkthroughs
Customer Experience Survey
Existing Rail Europe Documentation
http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map/
17
Ongoing,
non-linear
Linear
process
Non-linear, but
time based
Experience Map for Rail Europe | August 2011

18. WHAT ABOUT THE CONTENT?
http://www.jeep.com/en/
18

19. WHAT IS “CONTENT,”
ANYWAY?
SUBSTANCE
STRUCTURE
“What kind of content do
we need and what is it
about?
“How is content
organized, prioritized,
and accessed?”
Kristina Halvorson/Brain Traffic, “Content Strategy for the Web” http://www.contentstrategy.com
19

20. ADAPTIVE CONTENT
» Content structure and chunking
(think “components,” not “pages”)
» Divorce content from presentation
(let the platform make style
decisions)
» Meaningful metadata
» Categories
» Topics
» Tags
» Relationships to other content
» Take it slow!
http://www.abookapart.com/products/content-strategy-for-mobile
20

21. CONTENT DEVELOPMENT
BEST PRACTICES
1.
Embrace mobile-first as the new mindset
2.
Understand your audience’s mobile habits
3.
Plan & write for multi-format reuse
4.
Focus on your headlines
5.
Find opportunities to work your lead-ins
6.
Mix up your content lengths
7.
Consider the reading level
8.
Introduce video and visual content
9.
Use secondary screens
http://www.forbes.com/sites/jaysondemers/2013/11/07/10-steps-to-creating-a-mobile-optimized-content-marketing-strategy/
21

22. TO FORK, OR NOT TO FORK?
Hard Task, Good Example
22

23. WIREFRAMING
Based on user needs and content requirements.
http://www.flickr.com/photos/43868681@N02/4066039551/
23

24. WIRE FRAMING
Based on user needs and content requirements.
24

25. FUTURE DISCUSSION
Other important things, out of scope for this presentation.
25

26. WHAT CONTENT TO KEEP
ON WHAT DEVICE?
26

27. DEFINE CONTENT
REQUIREMENTS
27

28. EXPERIENCE MAPPING
http://mappingexperiences.com/
28

29. DIVORCE CONTENT FROM
PRESENTATION
29