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 ProblemIn 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
(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 💡
Stakeholders: Gillette's North America Visual Design Group and Marketing Group.
- 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
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
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
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.
- 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 ✅