hugeinc.com
info@hugeinc.com
45 Main St. #220 Brooklyn, NY 11201
+1 718 625 4843
June 7, 2011
It Takes 2 To Make a Thing G...
•  Many parties involved.
•  Varying skillsets.
•  Limited time and money.
•  Technology constraints.
2.
Digital design ca...
•  Many parties involved.
•  Varying skillsets.
•  Limited time and money.
•  Technology constraints.
3.
Digital design ca...
Tight constraints call for tight
collaboration.
1. The two of us
2. Case study
4.
The two of us.
Part 1:
Jessica L’Esperance
•  Obsessed with vegetables
•  Visited 36 countries
•  Teach mobile design at
Miami Ad school
•  Train...
About HUGE.
We help companies build
digitally-driven businesses.
Our stats.
$12.3 billion per year
150 million people per ...
HUGE Work.
•  We are in DUMBO, Brooklyn.
•  Our Notable Mobile work: HBO, Adult Swim, Reuters,
NYCGO, Target, Nutrisystem,...
Case Study.
Part 2:
12.
Our hospitality client.
•  Five star hotel chain known for its impeccable service.
•  Consistently reviewed and honore...
13.
The assignment.
Large-scale redesign of web property & mobile experience.
Our strategy:
1.  Increase SEO
2.  Update vi...
14.
Good mobile design considers
both sides.
User
Goals
Business
Goals
•  Why go mobile
•  Core value proposition
•  Inves...
15.
As designers, we care about two
parts of the same product.
Experience Design:
•  User goals & tasks
•  Features & func...
16.
Imperatives for website.
1.  Create a sense of place
2.  Show me, Sell me
3.  Every place has its own story to tell
4....
17.
Content Strategy shifted for mobile.
Web Content Strategy Mobile Content Strategy
• Major clean up of entire holdings ...
18.
For design, we focused on mobile-
specific needs.
•  Understand the primary use cases & support them.
•  Reduce load t...
19.
For this client, booking was core.
Mobile focus:
•  Find and book a property
•  Get directions
Web consumption model:
20.
Mobile scope: what made the cut.
1.  Homepage
2.  Property page
3.  Booking flow pages
4.  Photo galleries
5.  Menus
6...
21.
How we divided and conquered.
Experience Design:
•  Optimize booking flow
•  Establish a flexible navigation
for prope...
We narrowed down offerings.
Reprioritized experience.
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...
4 Insights.
Conclusion:
Insight 1:
Mobile is not an add-on.
28.
Businesses are thinking impulsively.
“We have $50k to burn.
This iPad thing seems cool -
Let’s try something with that...
29.
Content is your product. There should
be a payoff for investing in it.
•  Clear value proposition
•  Differentiation f...
30.
Mobile content is just one part of the
larger ecosystem.
Brand	
  X	
  
Core Site
Newsletters Web
Android app
iPhone a...
Various content
properties revenue
Mobile app or site
revenue
31.
Think about how mobile can
augment entire business model.
Insight 2:
Your core offering should drive
your mobile initiatives.
33.
Primary purpose with minimal fluff.
Check flight status &
check in
Access sale slinger in
store
Book a hotel on the
ro...
34.
A broader payoff.
Check flight status &
check in
Access sale slinger in
store
Less airport staff &
shorter check-in li...
Insight 3:
Mobile is less about visual design
and more about context & use
case.
People use mobile everywhere.
•  84% at home
•  80% during misc. downtime throughout the day
•  76% waiting in lines of wa...
Cut to the chase.
1.  Make it easy for people running on a network
2.  Use very few images
3.  Prioritize content
4.  Use ...
It needs to be a product people love.
39.
Insight 4:
Mobile moves fast.
Collaboration is essential.
E-­‐Commerce	
  
Barnes & Noble
British Airways
Dish Network
IKEA
JetBlue Airways
Mattel
Nestle Water
Nutrisystem
Sigma-Al...
42.
The mobile team.
•  Extend upfront website team to mobile track
•  Lean and mean
•  Resource hybrid talents to maximiz...
43.
Be flexible in your working relationship
Together!
•  Shared deliverables, instead of waterfall
•  Sat next to each ot...
hugeinc.com
info@hugeinc.com
45 Main St. #220 Brooklyn, NY 11201
+1 718 625 4843
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk Mobile Design & Content
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk Mobile Design & Content
It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk Mobile Design & Content
Upcoming SlideShare
Loading in …5
×

It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk Mobile Design & Content

1,753 views
1,673 views

Published on

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 a case study, we share our method for co-owning the product creation and putting siloed design to bed.

Published in: Design, Technology

It Takes 2 to Make a Thing Go Right: Jessica L'Esperance and Erin Scime Talk Mobile Design & Content

  1. 1. hugeinc.com info@hugeinc.com 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843 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
  2. 2. •  Many parties involved. •  Varying skillsets. •  Limited time and money. •  Technology constraints. 2. Digital design can get pretty crazy.
  3. 3. •  Many parties involved. •  Varying skillsets. •  Limited time and money. •  Technology constraints. 3. Digital design can get pretty crazy. And mobile only makes it harder.
  4. 4. Tight constraints call for tight collaboration. 1. The two of us 2. Case study 4.
  5. 5. The two of us. Part 1:
  6. 6. Jessica L’Esperance •  Obsessed with vegetables •  Visited 36 countries •  Teach mobile design at Miami Ad school •  Trained as a Librarian Erin Scime: •  Karaoke with soul •  Eats anything [natural] •  Former life in art museums •  Trained as a Librarian You and I.
  7. 7. About HUGE. We help companies build digitally-driven businesses. Our stats. $12.3 billion per year 150 million people per month
  8. 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).
  9. 9. Case Study. Part 2:
  10. 10. 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.
  11. 11. 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
  12. 12. 14. Good mobile design considers both sides. User Goals Business Goals •  Why go mobile •  Core value proposition •  Investment •  Targets •  Use cases •  Understands the context
  13. 13. 15. As designers, we care about two parts of the same product. Experience Design: •  User goals & tasks •  Features & functionality •  Navigation & flow Content Strategy: •  Content experience •  Business case & ROI •  Content production & distribution
  14. 14. 16. Imperatives for website. 1.  Create a sense of place 2.  Show me, Sell me 3.  Every place has its own story to tell 4.  Get me right, wow me if you can 5.  Meet guests where they are Informed the site’s feature planning, content planning, and design
  15. 15. 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
  16. 16. 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.
  17. 17. 19. For this client, booking was core. Mobile focus: •  Find and book a property •  Get directions Web consumption model:
  18. 18. 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
  19. 19. 21. How we divided and conquered. Experience Design: •  Optimize booking flow •  Establish a flexible navigation for properties to accommodate needs •  Make photos findable, but not dominant •  Link to full site for heavy lifting Content Strategy: •  Prioritize content that will encourage booking •  Language must be more instructional instead of marketing
  20. 20. We narrowed down offerings.
  21. 21. Reprioritized experience.
  22. 22. Supported core tasks. Mobile-only features got phased out. 1.  Book tonight 2.  Find nearest hotel.
  23. 23. 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.
  24. 24. 4 Insights. Conclusion:
  25. 25. Insight 1: Mobile is not an add-on.
  26. 26. 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!”
  27. 27. 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
  28. 28. 30. Mobile content is just one part of the larger ecosystem. Brand  X   Core Site Newsletters Web Android app iPhone app Print / Broadcast Mobile Micro-site / Campaign site Mobile Touch Site Blackberry app Marketing Email blasts WAP Social Media Facebook Twitter Digital platforms iTunes YouTube Content inventory Roku Game counsels In-store digital E-readers Apple / Google TV
  29. 29. Various content properties revenue Mobile app or site revenue 31. Think about how mobile can augment entire business model.
  30. 30. Insight 2: Your core offering should drive your mobile initiatives.
  31. 31. 33. Primary purpose with minimal fluff. Check flight status & check in Access sale slinger in store Book a hotel on the road
  32. 32. 34. A broader payoff. Check flight status & check in Access sale slinger in store Less airport staff & shorter check-in lines Increased chance of in- store purchase Increased chance of impulse / convenience purchase Book a hotel on the road
  33. 33. Insight 3: Mobile is less about visual design and more about context & use case.
  34. 34. 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/
  35. 35. 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.
  36. 36. It needs to be a product people love. 39.
  37. 37. Insight 4: Mobile moves fast. Collaboration is essential.
  38. 38. E-­‐Commerce   Barnes & Noble British Airways Dish Network IKEA JetBlue Airways Mattel Nestle Water Nutrisystem Sigma-Aldrich Target Under Armour The Vitamin Shoppe Media & Entertainment A&E Television Networks Advance Publications Fox Broadcasting Company Macmillan MTV Networks NBC Universal The New York Times Co. Scholastic Thomson Reuters Time Warner Walt Disney Company Warner Music Group Educa,on  &  Non-­‐Profit   Alvin Ailey Dance Foundation American University Amnesty International The City of New York Columbia Journalism School Girl Scouts of America Nat’l 9/11 Memorial & Museum National Association of Realtors New York Philharmonic The One Foundation The Red Cross West Point Military Academy Marke,ng  Pla8orms   Cisco Electrolux Ericsson J.P. Morgan Chase & Co. Johnson & Johnson L’Oreal Group MasterCard Nintendo Nokia PepsiCo Samsung TransAmerica Our process; tweaked for mobile.
  39. 39. 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
  40. 40. 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
  41. 41. hugeinc.com info@hugeinc.com 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843

×