When it comes to building mobile products it takes a tight collaboration between content and design. Mobile users are task driven, want localized information, and have multiple elements around them competing for their attention. Design can't meet the users needs by merely creating a lovely interface, and content strategy can't tailor content independent of the device constraints.
Together, Content Strategists and Designers can optimize the user experience for mobile to ensure the products are useful and usable. Through case studies, we will share our method for co-owning the product creation and putting siloed design to bed.
1. June 7, 2011
It Takes 2 To Make a Thing Go Right
Jessica L’Esperance
Experience Director
@jessless
Erin Scime
Associate Content Strategy Director
@erinscime
hugeinc.com
info@hugeinc.com
45 Main St. #220 Brooklyn, NY 11201
+1 718 625 4843
2. Digital design can get pretty crazy.
• Many parties involved.
• Varying skillsets.
• Limited time and money.
• Technology constraints.
2.
3. Digital design can get pretty crazy.
• Many parties involved.
• Varying skillsets.
• Limited time and money.
• Technology constraints.
And mobile only makes it harder.
3.
6. You and I.
Jessica L’Esperance Erin Scime:
• Obsessed with vegetables • Karaoke with soul
• Visited 36 countries • Eats anything [natural]
• Teach mobile design at • Former life in art museums
Miami Ad school • Trained as a Librarian
• Trained as a Librarian
7. About HUGE.
We help companies build
digitally-driven businesses.
Our stats.
$12.3 billion per year
150 million people per month
8. HUGE Work.
• We are in DUMBO, Brooklyn.
• Our Notable Mobile work: HBO, Adult Swim, Reuters,
NYCGO, Target, Nutrisystem, Newsweek
• We work within User Experience Group (50ppl/350ppl).
12. Our hospitality client.
• Five star hotel chain known for its impeccable service.
• Consistently reviewed and honored in Travel & Leisure.
• Over 90 hotels & resorts worldwide.
• Mix of leisure and business travelers.
• Corporate office partners with local owners to manage the hotels
and for use of brand.
• Website managed by corporate office.
12.
13. The assignment.
Large-scale redesign of web property & mobile experience.
Our strategy:
1. Increase SEO
2. Update visual style
3. Optimize booking flow
4. Build a new architecture
5. Personalize the experience
13.
14. Good mobile design considers
both sides.
User Business
Goals Goals
• Targets • Why go mobile
• Use cases • Core value proposition
• Understands the context • Investment
14.
15. As designers, we care about two
parts of the same product.
Experience Design: Content Strategy:
• User goals & tasks • Content experience
• Features & functionality • Business case & ROI
• Navigation & flow • Content production & distribution
15.
16. Imperatives for website.
1. Create a sense of place
2. Show me, Sell me
Informed the site’s
3. Every place has its own story to tell feature planning,
content planning,
4. Get me right, wow me if you can and design
5. Meet guests where they are
16.
17. Content Strategy shifted for mobile.
Web Content Strategy Mobile Content Strategy
• Major clean up of entire holdings • Subset of holdings
• Long-term analysis & planning • Freedom in creativity with subset
• Content is managed • Content is pushed
• Tell multiple stories with content • Tell a single, focused story
• Significant editorial restructuring • Refined editorial structuring
17.
18. For design, we focused on mobile-
specific needs.
• Understand the primary use cases & support them.
• Reduce load time by cutting videos & photos from core exp.
• Make it easy to read on a small screen.
• Expose navigation, as opposed to teaser content.
• Make form inputs as painless as possible.
• Elevate local and immediate needs.
18.
19. For this client, booking was core.
Web consumption model:
Mobile focus:
• Find and book a property
• Get directions
19.
20. Mobile scope: what made the cut.
1. Homepage
2. Property page
3. Booking flow pages
4. Photo galleries
5. Menus
6. A LOT of phone numbers
20.
21. How we divided and conquered.
Experience Design: Content Strategy:
• Optimize booking flow • Prioritize content that will
• Establish a flexible navigation encourage booking
for properties to accommodate • Language must be more
needs instructional instead of
• Make photos findable, but not marketing
dominant
• Link to full site for heavy lifting
21.
24. Supported core tasks.
Mobile-only features got phased out.
1. Book tonight
2. Find nearest hotel.
25. Worked closely with developers.
1. Relationship needs to be tight.
2. We didn’t design every page, but
instead a few key pages.
3. Content model allowed us to skip
documentation and instead rely on
communication.
25.
28. Businesses are thinking impulsively.
“We have $50k to burn.
This iPad thing seems cool -
Let’s try something with that!”
“…and we’ll launch it in 3 weeks!”
28.
29. Content is your product. There should
be a payoff for investing in it.
• Clear value proposition
• Differentiation from competition
• Resources to create and manage it
• Long-term plan
= Return on investment
29.
30. Mobile content is just one part of the
larger ecosystem.
Print / Broadcast Core Site
Micro-site /
Campaign site
Content
Newsletters Brand
X
inventory Web
iPhone app
Marketing
Mobile Touch Site
Email blasts Mobile Blackberry app
Social Digital
Media platforms Android app
E-readers
Twitter Roku WAP
iTunes Game counsels
Facebook
YouTube In-store digital
Apple / Google TV
30.
31. Think about how mobile can
augment entire business model.
Various content
properties revenue
Mobile app or site
revenue
31.
33. Primary purpose with minimal fluff.
Check flight status & Access sale slinger in Book a hotel on the
check in store road
33.
34. A broader payoff.
Check flight status & Access sale slinger in Book a hotel on the
check in store road
Less airport staff & Increased chance of in- Increased chance of
shorter check-in lines store purchase impulse / convenience
purchase 34.
35. Insight 3:
Mobile is less about visual design
and more about context & use
case.
36.
37. People use mobile everywhere.
• 84% at home
• 80% during misc. downtime throughout the day
• 76% waiting in lines of waiting for appointments
• 69% while shopping
• 64% at work
• 62% while watching TV (alt. study claims 84%)
• 47% during commute in to work
Cpmpete Smart phone report.
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
38. Cut to the chase.
1. Make it easy for people running on a network
2. Use very few images
3. Prioritize content
4. Use numbered menus for navigation
5. Vertical scroll is your best friend
38.
40. Insight 4:
Mobile moves fast.
Collaboration is essential.
41. Our process; tweaked for mobile.
Media & Entertainment Marke,ng
Pla8orms
E-‐Commerce
Educa,on
&
Non-‐Profit
A&E Television Networks Cisco Barnes & Noble Alvin Ailey Dance Foundation
Advance Publications Electrolux British Airways American University
Fox Broadcasting Company Ericsson Dish Network Amnesty International
Macmillan J.P. Morgan Chase & Co. IKEA The City of New York
MTV Networks Johnson & Johnson JetBlue Airways Columbia Journalism School
NBC Universal L’Oreal Group Mattel Girl Scouts of America
The New York Times Co. MasterCard Nestle Water Nat’l 9/11 Memorial & Museum
Scholastic Nintendo Nutrisystem National Association of Realtors
Thomson Reuters Nokia Sigma-Aldrich New York Philharmonic
Time Warner PepsiCo Target The One Foundation
Walt Disney Company Samsung Under Armour The Red Cross
Warner Music Group TransAmerica The Vitamin Shoppe West Point Military Academy
42. The mobile team.
• Extend upfront website team to mobile track
• Lean and mean
• Resource hybrid talents to maximize efficiency
• Staff team for the length of the mobile project
For this project:
• Experience Lead
• Product Designer
• Content Strategist
• Developer
• Project Manager
42.
43. Be flexible in your working relationship
Together!
• Shared deliverables, instead of waterfall
• Sat next to each other
• Daily check-ins with broader team
• Streamlined client relationship
• Flexibility when direction changed or new ideas emerged
• Saw entire project through
43.