Dollar Shave Club - E Commerce UX Design
Wireframes from a DSc project.

DollarShaveClub.com

Expanding member interaction capabilities

My Role

  • UX Designer
  • iXD
  • User Testing
  • Ideation
  • Flow Design
  • Prototype Dev

Employer

Team One Logo

Client

Lexus Logo
A few screens from the NSRQ roadmap project in their respective devices.

NSRQ  (No Subscription Required)

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 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 it’s 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.



A tabel that I put together to categorize all the box states for different user states on the site.

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.


Flows of how a user with a subscription and an NSRQ member cancel.

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.

General flows for the razor up-sell intersticial a user sees when purchasing.

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.

The account page re-design and how we build different components for different user and member states.

The business still wanted to inform customers that were checking out with non-razor products the benefit of having a razor subscription so we designed an interstitial experience in the check out flow that acted as a fork in the road. As lead UX designer on this project, I brought up that point that this screen might act as an annoyance to the customer we have we plenty of remarking campaign touch points to educate them about our razors.

The feeling was shared throughout the room, so we designed multiple versions to test remotely with users and gage their reactions to content, CTAs and the overall experience. We created long and full purchase flows so the testers would be in a more ‘true to life’ mind-set.

After multiple testing sessions, the overall sentiment was positive for the interstitial experience, given the product that was purchased. For example, if the customer had purchased a non-razor product that was shave related, the reaction was mostly positive because it felt contextual to their purchase. On the flip side, if we showed this experience to those who purchase a shower or freshening product, the sentiment was lower.

We also tested multiple content versions in step 2 of this project as well. Like, should we push one particular razor or just general education about our razor plans then direct to a screen to choose from our 3 blades? Customers most preferred the more general education experience then the more up-sell specific razor version.




Brand Page Redesign

For 2 months we conducted many moderated and remote usability test to pin-point what exactly users were having trouble with in navigating dollarshaveclub.com. One big concern among many members and non-members was the display of our products and ability to way-find on our brand product listing pages. From these insights, we developed a strategy to create a flexible system that met the needs of many different departments throughout the company and most importantly, our users.

Mock up of responsively redesigned brand page

The image above showcases some keyscreens from our redesign. A few things we wanted to keep in mind was modularity, dynamicness, flexibility, navigation and hierarchy. In testing our new design concepts we wanted users to have a better idea what was featured and how to read the content. Our prior design featured products and copy on a wood textured background which disturbed the readability and how we could actual structure new features we wanted to implement.


lo-fi wireframes we tested for content structure.

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.


Rules sets for the brand page tiles
Rules sets for the brand page tiles


Final mobile designs of the first version of brand pages

Post Purchase  (Member On-Boarding)

Before even getting into UI, we wanted to tackle the on-boarding story we were trying to tell. Post purchase is a huge opportunity for us to educate new members on important account information as well as offerings that many don’t know that come with a Dollar Shave Club razor subscription. Conceptually we thought of this as if the freshly joined member had just signed up in the office or front desk at a country club.

UX jam session where we crafted the DSC story told through onboarding.

Since Dollar Shave Club’s inception, the post purchase experience was a landing page that confirmed the member’s email address and a social referral widget. Very lack-luster right? Imagine if that happened when you committed to paying monthly on a country club subscription, they just said, “Alright, go on in. We will mail out your confirmation soon…”. So we wanted to guide them through and introduce them to different rooms of the club, some of the members and show them where they can manage their subscription. Our hypothesis, was that this will create more of a brand connection which would lead to a decreased percentage in curn over time.

Wireframe examples from the post-purchase project.

The UI went through countless iterations as the content in the story changed over a period of a month. Tweaks were made daily and sometime hourly as we tried to widdle down a perfect on boarding story. We always saw this as an on boarding experience so we first started with a traditional on-boarding UI with horizontal scrolling carousel and pagination dots to indicate the amount of content in the flow but quickly decided to try something different and take a horizontal approach to the experience.

When testing the same content in a horizontal vs vertical experience in a moderated testing environment, we saw the vertical version out perform the more traditional horizontal on-boarding experience in both mobile and desktop. This came as a shock to the team and stakeholders, but the moderated videos really helped sell this discovery through. Most customers found the vertical experience to be more expected and drove them down the page more which made them want to keep reading rather than skip. Some also mentioned the vertical experience being more delightful. We dove a little deeper in why the nontraditional vertical on boarding was performing better and a number of customers said it was because on the pervious check out pages they had to scroll down to fill out the forms.

We tried many variations of this design and functionality through user testing and finally came to a super user friendly, educational and flexible system we could use for various future projects. The design system we created around this experience was also intended to be also flexible for future iterations on this post purchase as Dollar Shave Club grows as a brand.

Final designs from the post-purchase project.

Matt Reamer © 2015 - All Rights Reserved    OTHER PROJECTS