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

DollarShaveClub.com

Designing & iterative testing of DSC.com

My Role

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

Employer

Team One Logo

Client

Lexus Logo
The primary front-end flow for our holiday gifting redesign.

Overview Of Role

As a Sr. Experience Designer working at Dollar Shave Club I lead large roadmap projects and help challenge the norms of traditional e-commerce platforms. I Tackle each project from the mind set of our members and perspective members while also keeping the business goals in mind. Working closely with Visual Designers, CRM, Product Managers and engineers I try to educate all team members on user experience best practices and encourage testing if the room is tore between designs.

Form Field Re-Design

Coming into Dollar Shave Club, the .com forms and error delivery system was out dated and not very useful. Starting from scratch and completely rethinking the system, we wanted to create a surprise and delight moment for members and non-members alike. Forms are not normally thought to be a “Fun” or Memorable experience, but those are some goals we set out for ourselves.

Screen grab of wireframes from a .Sketch file.


Since the UX team kickstarted this project, we took lead on setting up requirements and brainstorming with visual designers. We broke the project into chunks so development could work to get an MVP out on the .com to test while we were simultaneously running user tests to test our own hypostases. Like mentioned earlier, we had a concept and goal of making forms fun by adding branded feedback and success validation states along with contextual error messaging.


Documentation of error use cases and warning states.

To achieve contextual error messaging and branded validation states without cluttering the form it self, we decided to repurpose the form label. What was traditionally called the form fields “Placeholder”, we have made the form fields label. This label, will transition like the more modern pattern of shrinking a few pixel sizes and transitioning up to allow room for whatever the user inputs. If the user leave a specific form fields and the field returns an error, the form label will turn change it’s copy and styling to represent a contextual error message while still giving context to what exactly the forms contents should be. Form the success or validation state, the same transition and state styling would occur, except it would reflect a more positive styling and branded copy to help bring the user down the form, provide bursts on surprise and delight and also help influence for a higher number conversations.

A page from the spreadsheet in which I constructed to share form mico-copy with team members.


Again, this was a UX lead process and forms and a huge part of the user experience and makes the difference between someone converting to a member or abandoning the site. With this in mind, I wrote all form micro copy, validation and error copy throughout the site. To help distribute this form copy throughout the team, I prepared 2 documents, one in Sketch and the other in a Google Spreadsheet. I worked closely with engineering to determine proper terminology and architecture for how form fields would function.


The form refactor on a dark background.
Form refactor elements on a light background.


Global Notification System

A sub-project that branched off of the form refactor was a re-design of the global notification system. The reason this project was kickstarted and done in parallel by UX with the form refactor was because with form page errors and backend system depended on it. We thought it would use the same system just form errors would transition in from the bottom of the view port near the CTA and global notifications that were not form related would transition in from the top of the view port.



How I layed out the MVP system for the global notification system for members to share with the team.

We designed 5 different interactions and instances for the global notifications. Below, you can see a chart I architected for the MVP version of the system. Depending on the importance of the notification would determine the way it would act and the characteristics of that specific notification.


System rule guidelines.


Funnel Refactor

From the moment I started at DSC, I was not thrilled with the way the acquisition funnel was designed and architecture. Seeing usability test after usability test helped build the case for a complete funnel redesign. As a major advocate for any new (major) change within a large or growing company you have to have reasons and lots of data to back-up claims. Did I have that, yes. But, It became very easy to sell this through once we started a new 'business changing' promotion in which we allowed guests to get their first month free. This does not seem like a huge change, but it changed the preserved quality of our product and understanding 100% for the user.


Flows created for the project

After advocated for the new design for months, the green light was given and I was off. Tackling new flows and repaving the road. Fixing all the little pot holes I noticed over the year plus of watching poor usability studies. In doing this, it was a great opportunity to introduce a new light-weight feature to the experience that we'd seen users asking for repeatedly.

Unlike our most direct competitor, Harry's, we have multiple razor types (3). Guests don't really know the difference between the razors and the way we laid out the differences was lack-luster to say the least. We created, tested and ultimately went live with a compare table that allowed guests to compare the razors. This did 2 things for us. One, it gave guests what they wanted in being able to accessibly understand these razors and their features. And two, cleared up some room and clutter from the blades product page it self for us to showcase the razors in a bit sexier of a way to improve the quality perception.



Wireframes from project Wireframes from project


Above, you'll see some of the early wireframe prototypes we made to test the feature of compare and new blades page combined. This rapid usability testing in where we would test, iterate, test, iterate over a few days time was really valuable to the process. Some may call that 'rapid prototyping' but it was more of 'testing sprints.' as we were in a marathon of feedback and refinement.

We tested multiple different offers and small design tweaks to this page and ultimately came out on-top. It increased razor-mix, LTV, AOV and many more brand perception metrics.



System rule guidelines.

Gifting The Club

Gifting becomes a hot discussion around Father’s Day and the end of year Holiday Season. Approaching Christmas time in 2015, we wanted to upgrade the gifting feature with new offerings while also making a previously desktop only experience responsive since 58% of the site’s traffic comes from mobile devices.

Front-end flows of the gifting redesign

In an agile design process, I creating wireframe designs, user flows and rapid problem solving with the product team to get this product live in time. On a very short timeline, we were able to spec and design an MVP and long term vision of Gift Card purchasing and a new Gift Bundle feature were guests can purchase a duration of membership for a loved one. We did not only design the .com experience, but we took a step back and designed the entire gifted experience and gifted experience.

I lead UX design efforts in creating this seamless user experience. From purchasing, emails, receipts, physical box design, sign-up or claim process and how the back end would represent the gift bundle purchase as credit to the new member’s account.



Wireframes of the gifting UX process.


Gifting checkout and account set up flow designs.

The Member Handbook represents inclusion in the club, it holds X # of months of free shaves, so let’s treat the giftee's membership as much as a gift as the physical products.

For the giftee to realize the full potential of the gift, they have to unlock their membership, represented by the member handbook. So we are proposing to wrap the member handbook with a belly band with a physical card attached to it in order to drive this message home. This would really capture the messaging hierarchy of we desire which is that we first want them to claim then secondly, we want to them to become invested and more knowledgeable about the club.



How I layed out the MVP system for the global notification system for members to share with the team.

System rule guidelines.

Prototyping iXD

At Dollar Shave Club we want to create surprise and delight moments throughout every touch point of the member experience. In order to test these interactions with users we would do a mixture of high fidelity and low fidelity prototypes with quick interaction and motion prototypes for the developers to reference while they build out the new feature or enhancement.

To test interactions and help out the development team, I would prototype certain portions of upcoming projects through code. I learned how to code my CSS in SASS in order to create a fluent hand off to the development team. The full screen calendar prototype above and many other code based prototypes I’ve done could be found on my GitHub account.

Success Metrics & Testing

Our team would challenge past and upcoming design decisions by creating prototypes and testing them with real users. Using both User-Testing.com and UserZoom.com we would write test scenarios and tasks for users to perform. We observe both user’s actions and listen to their thoughts verbalized. These often tell different stories so we have to pay close attention to both.





Matt Reamer © 2015 - All Rights Reserved    OTHER PROJECTS