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

© 2013 5th Finger

How NARS Got The Benefits of Responsive

Design Without Rebuilding Their Site

Steen AnderssonVice President

5th Finger, A Merkle Company

Jeanette GarnerVice President, Ecommerce Shiseido and NARS

Shiseido Americas Corporation

2


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

Mult

i-C

hannel D

igit

al Str

ate

gy

3

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

“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

NARS – Case Study

6

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

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

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

NARS Requirement 3: Ability to Customize Experience

NARS wished to have a tailored experience on desktop, tablet, and mobile.

10

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

NARS Which Technology?

12

NARS Best of Both Worlds

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

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 WorksModification of HTML to enable it to be rendered

using CSS techniques

Add additional CSS elements to

responsify the site

15

The Project

16

NARS Mobile Experience

17

NARS Tablet Experience

18

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

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 team2. Enhanced production process

20

NARS The Execution

Challenge 3: NARS has very complex brand guidelines that had yet to be implemented on mobile or tablet.

Our SolutionWe 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

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

NARS Key Consideration – Promo Image Workflow

vs

23

NARS Key Consideration – Using Gestures

Option 2Option 1

24

NARS Key Consideration – Font Size

Version 1 A

Version 2 AVersion 3 A

25The Results

26

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


54%Increase in Checkout

Conversion

28


24%Increase in Checkout

Conversion

29

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.


30

Steen AnderssonVice President


Jeanette GarnerVice President, Ecommerce Shiseido and NARS

Shiseido Americas Corporation

Q & A