Caley Ostrander
 
 

A new digital experience to complement your monthly Birchbox delivery.

 
 
Screen Shot 2017-10-13 at 2.49.11 PM.png
 
 

THE BRIEF

Birchbox, the beauty subscription startup, was looking to create a new online experience to mirror the offline experience that customers have every month when they receive their box. The ask was to create a page that clearly showcased the current month's box and the samples contained within it, as well as a way to navigate to past month's boxes. In addition, it was a requirement to be able to buy directly from this page and read reviews about each product. 

THE SOLUTION

To close the gap between the physical box and the online "box page", imagery of the physical box took on a central role visually. This box image is the first thing shown on the page, and then directly below is imagery of each sample within the box. These thumbnail images serve as the main way to navigate between different products in a single box. A timeline was also introduced at the top of the page as a quick way of jumping between the current month and previous months without revisiting the main navigation. This was supported by a "quick view" modal that appeared on hover to preview the box before clicking into it. 

 
 

 

User Research & Testing

Animation

App Design

Icon Design

User Experience Design

User Interface Design

Interaction Design

Prototyping

 
Screen Shot 2017-10-11 at 5.42.42 PM.png
 
 
 
 
 
 
 
PROCESS SKETCHES FOR.png
 
 
 
Screen Shot 2017-11-02 at 4.58.20 PM.png
 
 
 
 
 
 
 
caley-ostrander-quickview-hover-march.png
 
 
 
Screen Shot 2017-10-11 at 5.53.35 PM.png
 
 
caley-ostrander-birchbox-timelines.png
 
 
birchbox-sample-toggle.gif
 
 
 
Screen Shot 2017-10-11 at 6.10.31 PM.png

ADDITIONAL CREDITS

Photography: Charlie Cooper, Kathleen Lynch, Lyndsay Nevins

Box design: Rifle Paper Co.

Screen Shot 2017-10-17 at 7.55.21 AM.png