The Brief

North Kingdom was contacted to produce Dollar Shave Club first ever mobile app aimed at giving users full control of their orders while learning more about the products and bringing the brand to life.

I was responsible to concept and design the user experience for the first launch of the DSC mobile app, producing the app structure, user flows, wireframes and Invision prototypes. The app was first launched in summer 2015.

Content Structure and User flows

The first steps consisted in defining the structure of the app and start sketching the key flows. Our reference in terms of content and structure was Dollar Shave Club’s website, but we still had to make some adaptations so it made sense from a native app point of view.

The challenges in this project were, first defining the funnel for new users that downloaded the app so they were prompted to sign up for a DSC subscription. The second challenge was organising the “shopping cart”, since there were so many variables that needed to be taken into account (DSC works on a subscription basis, which means they send you a box every month. This had to live with a regular “shopping cart” system, where a user buys something that’s shipped instantly).

dollar-shave-club-ios-user-flow

User flow for users to sign up for a subscription.

Sketching

The first sketches started after there was at least a draft of the structure of the app and the key flows were set. Sketching allowed us to quickly explore different layouts and approaches for the main screens of the app, incorporating all the elements and interactions that belong to the specific screens.

Early sketches, exploring several options for different screens of the app.

Wireframes

The wireframes were made once we were happy with the solutions sketched on paper. A wireframe document was created laying out all the screens and states, and including notes on how the elements behave and how can the user interact with the elements.

Sketches lead to wireframes first and then to an interactive prototype.

The wireframes below shows the main navigation of the app and the sub-navigation specific to the section. Main navigation was placed at the bottom, following iOs and mobile best practices, and the sub-navigation was placed at the top of the page, activated by tapping or swiping the screen left and right.

Wireframes DSC app

Wireframes for the “History” tab, where users can access their previous orders.

Wires

Transition guidelines between two sections.

Art direction by Clément Pavageau

Art direction by Clément Pavageau

The app won a Webby Award in 2017 and is loved by its users (it has a 5* average rating in the Appstore).

 

The app is currently available in the US Appstore and Playstore:

Dollar Shave Club in the Appstore

Full case study from North Kingdom:

Dollar Shave Club Case Study