Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 30 Anzeige

How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site

Herunterladen, um offline zu lesen

Earlier this year at eTail West 2013 in Palm Springs, CA, our Vice President, Steen Andersson, gave a presentation with Jeanette Garner from NARS Cosmetics on How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site.

Enjoy the presentation and contact us at marketing@5thfinger.com

Earlier this year at eTail West 2013 in Palm Springs, CA, our Vice President, Steen Andersson, gave a presentation with Jeanette Garner from NARS Cosmetics on How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site.

Enjoy the presentation and contact us at marketing@5thfinger.com

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site (20)

Aktuellste (20)

Anzeige

How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site

  1. 1. © 2013 5th Finger How NARS Got The Benefits of Responsive Design Without Rebuilding Their Site Steen Andersson Vice President 5th Finger, A Merkle Company Jeanette Garner Vice President, Ecommerce Shiseido and NARS Shiseido Americas Corporation
  2. 2. 1 5th Finger, A Merkle Company We are a team of 50 5th Finger employees backed by over 1,500 Merkle employees. Our recent acquisition by Merkle adds multi-channel capabilities that allow us to optimize and expand our client services. Web & Email Media Mobile: 5th Finger Search Marketing Social Multi-ChannelDigitalStrategy
  3. 3. 2 NARS Cosmetics • Founded in 1994 by François Nars, French make-up artist and photographer. • Began as a collection of 12 lipsticks, debuting at Barneys New York. • Known for their edgy yet sophisticated brand of cosmetics and connection to the world of fashion. • Acquired in 2000 by Shiseido Cosmetics.
  4. 4. 3 “The text is too small. It's very easy to accidently click the wrong one next to it.” “It‟s hard to use the options for choosing product size and color.” “It‟s too difficult to change quantity.” “The size chart opens in a separate window.” “I found it annoying to switch between the size guide and the products.” “The Checkout button on the home screen should be larger.” How is your site doing on tablet and mobile today?
  5. 5. 4 NARS – Case Study
  6. 6. 5 NARS The Goal NARS wanted to keep up with the evolving expectations of the customer by adding mobile optimized solutions to their commerce offering.
  7. 7. 6 NARS Requirement 1: Integrated SEO NARS did not want to have to split and dilute their SEO investments across mobile, tablet, and desktop. The solution chosen needed to allow NARS to leverage any SEO investment for the benefit of all platforms.
  8. 8. 7 NARS Requirement 2: Deep Linking for Email & Social NARS was frustrated that their email and social links only led to their desktop site. They wanted a single site solution that allowed them to solve this problem of deep linking.
  9. 9. 8 NARS Requirement 3: Ability to Customize Experience NARS wished to have a tailored experience on desktop, tablet, and mobile.
  10. 10. 9 NARS Requirement 4: Quick to Launch and Minimal Site Maintenance NARS needed their site to get to market quickly. They also wanted a technology that did not require them to create and maintain 2 or 3 separate sites.
  11. 11. 10 NARS Which Technology?
  12. 12. 11 NARS Best of Both Worlds
  13. 13. 5th Finger Responsive Technology 5thFinger.js Step 2 – 5thFinger.js tags are added into the existing website‟s HTML code. Step 1 – Define „layout flows‟ for device breakpoint (typically 3 or 4). Step 3 – When the site is loaded, 5thFinger.js re-flows pages dynamically, hiding or expanding any content. On Any Existing eCommerce Platform
  14. 14. 13 Site page and content downloaded 5th Finger Responsive.js downloaded document.ready() HTML Loaded window.onload() Page Rendered 1 2 3 4 5 Add any mobile/tablet optimized controls Remove large images and content from the html The breakpoints are defined How 5th Finger Responsive Works Modification of HTML to enable it to be rendered using CSS techniques Add additional CSS elements to responsify the site
  15. 15. 14 The Project
  16. 16. 15 NARS Mobile Experience
  17. 17. 16 NARS Home Page - iPad [Portrait] Fig. 1 NARS Tablet Experience
  18. 18. 17 NARS The Execution Challenge 1: NARS had a highly customized instance of an eCommerce platform, with a labyrinth of patches and tweaks. Our Solution: • Two-way technology briefings. • Early integration into their source code repository. • We trained the ecommerce site team on 5th Finger responsive.
  19. 19. 18 NARS The Execution Challenge 2: Within the first month of the project, it was decided there were additional priorities. • An even more tailored experience based on specific screen sizes. • Specific promotions to specific screen sizes. Our Solution: 1. We scaled up the project team 2. Enhanced production process
  20. 20. 19 NARS The Execution Challenge 3: NARS has very complex brand guidelines that had yet to be implemented on mobile or tablet. Our Solution We migrated to a process where we shared on-device visual prototypes. This helped the client‟s creative team see their brand „on device‟, make more confident decisions, and minimized re- work of the designs down the track.
  21. 21. 20 Which Breakpoints do we optimize for? You don‟t want to have too many as it increases your maintenance overhead. NARS Key Consideration – Which Breakpoints?
  22. 22. 21 NARS Key Consideration – Promo Image Workflow vs
  23. 23. 22 NARS Key Consideration – Using Gestures Option 2Option 1
  24. 24. 23 NARS Key Consideration – Font Size Version 1 A Version 2 A Version 3 A
  25. 25. 24 The Results
  26. 26. 25 NARS The Results and Lessons Through extensive collaboration with NARS and the powerful 5th Finger Responsive framework, we were able to launch NARS‟ mobile and tablet site experiences within just 14 weeks.
  27. 27. 26 NARS The Results and Lessons 54%Increase in Checkout Conversion
  28. 28. 27 NARS The Results and Lessons 24%Increase in Checkout Conversion
  29. 29. 28 NARS could not have achieved this outcome with normal responsive design. Only by using 5th Finger Responsive, they were able to get: 1. Complete customizability between devices, which drove the significant conversion uplift. 2. Speed to Market - they did not have to rebuild their entire ecommerce site like you do with traditional responsive. NARS The Results and Lessons
  30. 30. 29 Steen Andersson Vice President 5th Finger, A Merkle Company Jeanette Garner Vice President, Ecommerce Shiseido and NARS Shiseido Americas Corporation Q & A

×