Artwork featuring Sephora logo in multiple sizes across three different devices.

Responsive Design at Sephora

Responsive Design at Sephora

A research for Sephora's leadership board to present the value of implementing responsive design across its e-commerce platform.

ActivityResearch & Strategy
ClientSephora
DurationJanuary—March 2019

Research data, presentation design, and dashboard development are the result of close collaboration between myself, Sephora Director of Front-end Engineering, and its product team.

Challenge

Responsiveness is a design pattern that provides the same level of user experience across different screen sizes. However, it can be quite challenging to implement across a shipped product—a trial Sephora's design and engineering teams faced in early 2019.

Solution

Despite responsiveness clear benefits, transitioning to it requires time and effort from multiple teams. To give grounds for such investment, I partnered with Sephora's Director of Front-end Engineering to research and to raise awareness around the matter.

Results

Research led to the creation of an on-brand deck to present findings and a tentative transition strategy. Key deliverables were:

  • An interactive research dashboard

    to display benchmark data from select competitors
  • A research deck detailing responsiveness impact

    on customer experience, performance, and SEO
  • A tentative strategy to transition to responsiveness

    accounting actions from Sephora's Design, Front-end, SEO, and Product teams

Solution Process
& Deliverables

1

Definition

Solution Stage 1Understand goals and what kind of data would provide insight for Sephora's leadership.

2

Data Gathering

Solution Stage 2Researching design patterns, benchmarking competitors, and synchronizing team efforts.

3

Presentation

Solution Stage 3Designing the research deck and developing its accompanying interactive dashboard.
Basics
What is responsive design?
Basics
What is the sephora.com current design pattern?
Basics
Why should we transition to responsive design?
Industry
Which are the design patterns used by key retailers in the industry?
Industry
How do we compare against these key retailers?
Transition
What is the desired impact of transitioning to responsive design?
Transition
Which actions our internal teams would need to take?
Transition
How should we coordinate the transition to responsive design?

Before moving on to actual research, it was important to map which kind of data would provide insight for Sephora’s leadership on transitioning to responsive design.

Responsive Design
Pros
  • 1 URL;
  • No content duplication;
  • Consolidated SEO authority;
  • No redirects.
Cons
  • Might require redesign.
Dynamic Serving
Pros
  • 1 URL;
  • Consolidated SEO authority;
  • Easier to transition to.
Cons
  • Difficult to implement;
  • Reliant on server-side user agent detection;
  • Difficult to maintain.
Separate URLs
Pros
  • Easy to implement;
  • Speedy web pages.
Cons
  • 2 URLs;
  • Risk of content duplication;
  • Lots of redirects;
  • Splits SEO authority;
  • Expensive to maintain.

Data was gathered around the 3 main design patterns—Responsive Design, Dynamic Serving, and especially Separate URLs, since it was Sephora’s current pattern.

While Separate URLs serve speedy web pages, it is also harder to maintain in the long run, and it impacts Sephora negatively due to the direct effect design patterns have on SEO.

Lighthouse Performance slider stopping at 49.Performance
Lighthouse Accessibility slider stopping at 84.Best Practices
Lighthouse Best Practices slider stopping at 94.Accessibility
Lighthouse SEO slider stopping at 90.SEO

Performance Benchmark

The performance from strategic web pages from select retailers was measured on Lighthouse and compared with Sephora’s.

Devising a plan to transitioning to responsiveness

The performance from strategic web pages from select retailers was measured on Lighthouse and compared with Sephora’s.

*Data displayed below is slightly modified due to NDA.
Design
  • Update design for responsiveness;
  • Define breakpoints and behaviors.
Front-end
  • Update server-side and clients-side rendering;
  • Update and unify components;
  • Update CSS architecture;
  • Configure mobile-specific content.
SEO
  • Update Analytics to unified domain;
  • Map SEO data to be updated.
Product
  • Update deploy pipelines;
  • Adapt CRM.
Sephora e-commerce webpage being resized and displaying a non-responsive design pattern.Walmart webpage being resized and displaying a responsive design pattern.

Presenting research insights

Research findings were summed up and simplified into an on-brand deck, and I designed visuals to make data easier to digest throughout the presentation.

The spreadsheet used to store research data was transformed into a interactive dashboard and served as a companion piece for the presentation.

Key insights from the research include that responsiveness represented an opportunity to enhance code quality, improve performance, and consequentially the customer user experience.

And tying this with the positive SEO impact and the reduced maintenance required by responsiveness meant it would allow for overall cost savings too.