Dollarshaveclub.com

Re-platforming, re-desinging and reimagining Dollarshaveclub.com

Exec Summary

Brand
Dollar Shave Club

Role & Responsibilities
Product Design, Research, Motion Design & Service Design

 

What

Dollar Shave Club was always known for being a razor subscription company. As the company grew so did the way we thought about the business. With new products and sub-brands being launched regularly the interest and demand for them grew from members, non-members and past members. One of the major draw backs of the Dollar Shave Club parent brand for many consumers is they could only purchase our other offerings if they had a razor subscription. So, listened to the consumer base and decided it was time to knock down the barrier of needed a subscription to become a member of the club.

 

NSRQ  (No Subscription Required)

NSRQ is an acronym for, “No subscription required”. We will be rolling out the MVP of this initiative in Q1 of 2016 to all DSC digital properties (web + mobile). The introduction of NSRQ means that non-members can visit the site or app and make NRP purchases without a razor subscription being required.

As we evolve the business and our web and mobile platforms, the cart or, “Box” has to evolve its logic for different use cases and user states. This chart is a high-level peek into the different use cases for the box when it’s opened from the main navigation icon link and what primary elements it contains at any given point.

 

Defining and organizing form elements in the Design Library in both light mode and dark mode.

Defining and organizing how we display deals in the Design Library in both light mode and dark mode.

Integrating this business model into our digital platforms took much thought and careful auditing. We had to comb through every consumer facing touch point and create proper flows so that our past, present and future members did not feel confused or mis-lead.

With the phase 2 NSRQ test, we are introducing a test to see if people are willing to purchase a razor subscription if we present them an interstitial screen to up-sell a razor. We will be testing 2 different versions. In one, the guest will have the ability to select a single razor (4x or Exec) and the second test would be a more educational screen explaining the benefits of a razor subscription.

As briefly discussed in the user flows above, we had to design for all member types, which meant designing custom authenticated account pages for those different user states. Whether the member came in through purchasing a non-razor product, a razor subscription, they are a past member or they are an active member with a suspended credit card, their content hierarchy on their account page was different.

We not only had to create all these consumer facing changes, we changed the way the business looked at this members. We called this, the user states refactor.

 
 

Brand Page Redesign

Once a framework and structure was established and recruiting was underway for our first UX Researcher that would join the team, we began to met with different companies like; Usertesting.com, Userzoom, Clicktail, User Interviews, etc and understand how we might sign for software that would enable our Product Teams and Researchers to collaborate at the highest-level while also automating a lot of the fulfillment and recruiting process that goes along with research. You might call this, research ops.

 

An example of a social survey. Here are 2 questions of the 6 we asked in this one.

 

In starting the wireframe concept phase, I started wide and hi-level to explore structure first. As soon as we tested a few structured that worked we moved into more hi-fidelity wireframes to test out these concepts in execution. When creating a new tile structure for the website we had to consider all the permutations of that tile and how it could live and evolve, which took a tremendous design exercise.

As you've seen from the sample above we molded these tiles into every shape we possible could think of. Then we wanted to pressure test with the structure, so we created the document below to communicate to stakeholders what you could and could not do with the new system. We had to do this because rules are everyone's best friends when it comes to systematic design. When introducing a new system to the site, we wanted to make sure that it was not being abused. The company could use big tiles (2/3) or small tiles (1/3) in the grid.