Caley Ostrander
 
 
 
 
 
 
 
 
Screen Shot 2017-11-24 at 7.46.13 PM.png
 
 
 

A new and improved checkout flow for Barkshop.com, the e-commerce arm of the popular dog subscription service Barkbox.

 
 
 
 
 

THE BRIEF

Barkbox, the dog treats & toys subscription startup, was looking to introduce gifting into their online e-commerce site, Barkshop. This experience needed to introduce the ability to define an order as a gift, send a gift message, and enter in your recipient's name and email address in a seamless way. In keeping with the Barkshop/Barkbox brand, the experience also needed to maintain a quirky, playful feeling for the user as they interact with the experience. 

THE SOLUTION

As the project kicked off, it became clear that not did gifting need to be introduced, but the checkout structure and design would also need to be updated. The existing live experience was clunky, hard to use and broken in several key areas of the experience — which would only get worse with more functionality added in on top. To move forward, a new checkout would need to be designed from top to bottom that's cleaner, easier to use and functionally sound. Playful moments were added in throughout the new experience, in things like a randomized gift message generator, animated GIFs of dog illustrations, and playful icons like magic wands and colorful gift boxes.

 
 

 

Mobile Web Design

Icon Design

User Experience Design

User Interface Design

Interaction Design

 
Screen Shot 2017-11-02 at 4.35.06 PM.png
 
 
 
 
 
 
 
 
 
 
Screen Shot 2017-11-24 at 7.48.33 PM.png
 
 
 
 
 
 
 
Screen Shot 2017-11-02 at 6.07.13 PM.png
 
 
 
 
 
 
bg.png
 

A peek behind the scenes at the style sheets:

 
 
 
Screen Shot 2017-11-02 at 6.07.13 PM.png
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
Screen Shot 2017-11-02 at 4.33.04 PM.png
 
 
 
 
Screen Shot 2017-11-02 at 6.07.13 PM.png
Screen Shot 2017-11-02 at 4.35.06 PM.png