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).
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 for the “History” tab, where users can access their previous orders.
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: