Gillette on Demand

Gillette on Demand is a subscription-based eCommerce web app offering grooming products.

  • For Gillette, Procter & Gamble
  • Type User Research, Personas, Design Systems
  • Time 6 months

Bringing Digital to Procter & Gamble

Alchemy is Procter & Gamble’s in-house tech shop. I was part of Alchemy's first Boston office, as they scaled beyond their core office in Cincinnati, to partner with Gillette and educate them in lean and agile processes.

Business Problem

In the digital razor market, subscription platforms like Dollar Shave Club and Harry's were dominating, so it was our job to take over the existing Gillette on Demand web app and give it a complete UX and front-end overhaul.

The Task: overhaul & launch a web app in 4 months

via GIPHY

(Spoiler alert: it took 6 months.)

Being presented with the deadline and business scope, we focused on lean processes, fighting for the users, and educating Gillette in human-centered design along the way.

The business requirements included:

  • Increase revenue, users, and basket size 💸🛒
  • Maintaining or improving site score on performance and SEO 🛠
  • Improve site accessibility 💡

The Team

This was a large effort with a lean 4-person scrum team. Core members: Myself, Harry Walker de la Rosa (UX), Adriana Rios (Front-End), Anum Qassam (Product Manager).

Stakeholders: Gillette's North America Visual Design Group and Marketing Group.

My Role

  • Lead UI Research and Design
  • Created Gillette's first Digital Design System
  • Lead initial Usability research, Testing, and Synthesis
  • Research and created Personas
  • Designed ongoing UI/UX on new grooming products

Research

Personas

Gillette didn't have defined personas, even for their brick-and-mortar user. "18-40 years old and uses a systems razor" was what they knew. This was more undefined in the digital subscription space, where DSC and Harry's champions affordability and the little guy. We needed to have an understanding of who their current user base really is.

As-Is Empathy & Affinity Maps
Taking 10 interviews with Gillette On Demand users, we created 10 As-Is Empathy Maps and synthesized the results into Affinity Maps to identify reoccurring themes and key opportunity areas.

Empathy Maps ➡️ Affinity Maps

Our Personas
We narrowed down to two personas. The cool Suburban Dad, a Gillette loyalist who wants to break the “dad” mold, is a legacy customer, and wants to elevate his shaving experience. And the career-driven Gen Z, who feels that what he buys, its price, and the mission behind it, affects his appearance – he is a mix between (fewer) existing consumers and a desired marketing persona.

Findings & Results

  • 100% of users are cost-aware (but will not forgo quality)
  • 80% look for premium products
  • 60% are analytical about shopping
  • 60% have other subscriptions

Our findings helped us start conversations with stakeholders to prioritize product launches, from a grooming products and kits to a $200 heated razor.

Final Personas: current Gillette On Demand user | To-Be Persona user

Benchmarking & Usability Testing

To understand how we should create the new site, we wanted to gain user-focused insight on the previous Gillette On Demand. To discover users' delights and pain points, I was responsible for conducting qualitative user testing. I lead writing the script, moderating 10 user interviews, and synthesizing the findings to gain an overview of if users find value in the previous website and their path-to-purchase flow.

Our first round of testing taught us:

  • Information Architecture: users struggled with navigating the site
  • Value Prop: The concept of subscriptions make consumers uneasy, and not all understood why they'd prefer the online service over their normal Brick & Morter
  • Layout and copy: The layout of product information wasn't fully utilized
  • Register: Consumers disliked being required to create an account in order to checkout
  • Product Selection: Consumers are always doing mental cost-benefit analyses

User Testing: old Gillette On Demand | synthesized maps

Assumptions Board | synthesized maps

From testing, we still had more questions (such as):

Why would a user choose one razor over another?
What information is the most valuable under their account?

In further interviews we dove deeper, conducting research to develop personas of existing On Demand users.

Synthesizing and Changes

From synthesizing, Harry, Anum and I worked To-Be changes in changes from navigation, user flows, and overall UX that tied into customer motivations and business objectives.

We couldn’t solve for all of the users' pain points. Due to constraints from internal systems, we had to find workarounds to guide users along their paths with reduced friction.

Redesigning a Global Brand

UI Research

We were running full speed ahead with creating the site. I was simultaneously conducting UI research (including competitive analyses and a brand audit), designing mockups, and creating the design system. It was critical to bring stakeholders through our process, as I diverted far from the previous Gillette on Demand and Gillette.com websites.

During bi-weekly playbacks, we took our stakeholders through our research and processes for education and trust.

Audit: old Gillette On Demand

Audit: Gillette.com and Gillette Social Media content

A New Design System

While creating the digital design system, it was apparent that Gillette's brand book was only geared towards print collateral.

This is one of the instances where our initial qualitative user research came into play. We used the user feedback to help inform and explain the direction of our designs. I provided our stakeholders with this information with the UI mockups, which we used to further connect and brainstorm.

We identified needed improvements in accessibility, which Adriana and I championed and introduced to Gillette.

Portions of the Design System (Gillette’s first digital system)

Launch, Results, & Additions

So, how did we do? We had a successful launch on March 25, 2019. We saw major improvements along most dimensions.
After launching our new site, we continued to iterate and also provide new products over 2-3 months following our go-live date.

Post-launch metrics:

  • User growth of 35%
  • Revenue growth of 150% ✅(new products → increased basket size)
  • Met user goal of increased product assortment ✅
  • Site speed became 50% faster
  • Improved Lighthouse score

New UI!