SENIOR BRAND & VISUAL DESIGNER
Dropcam_.png

Dropcam Store Page

Dropcam Store Page

DESIGN PROCESS

Salazar_WeFinance_Branding_Logo.png
 
 

The project

This particular project was one of my favorites. We were getting ready to launch a brand new website to add our new product, the Dropcam Pro. One of the projects was to re-design the Store Page in out website.

Then, we were getting many drops on our website at the Store/Checkout Page. My job was to figure better ways for our users to go through the funnel and meet our sales goals for launch.

 
 
Store/checkout page before re-design

Store/checkout page before re-design

 
 

the CHALLENGES

 

1. What are we selling?
After talking to our Support Team  we discovered that our customers were confused by the 2 different items listed on the Store, they thought we had 2 different cameras available; but in reality we only only had 1 camera, and the other team listed was the camera + Cloud Video Recording. 

2. Overwhelming amount of information
We have a lot of information, lots of text with the same visual weight as well as graphics with the same visual weight, and do we want to have a full right-column dedicated to very specific technical terms? We needed to find a better way to simplify information, add better typography and bring value to things that matter.

3. Store + Checkout
Presenting information and having the user be convinced all at the same time seems like a lot to take in

 


the goals

1. Simplify information
Break down information to be more digestible to the user. The user is greeted with a lot of text, and the text has similar visual weight and colors are used sparingly. The store/cart page all rolled into one page -- we needed to find of way of simplifying this experience.

2. Make Cloud Recording purchase easier to understand
What we have now is a bit confusing because it isn’t clear how to purchase the Cloud Recording feature.

3. Split device description from Checkout
We want users to feel comfortable with purchasing our device prior to going to Checkout

 
 
Salazar_WeFinance_Branding_stat.png
 
 

SITE MAP

After doing research in various Store and Checkout experiences, the best flow was the one that presented a store, with all the information, and from there the user was taken to the checkout. I decided this was a common and most intuitive flow to have for our store, and pitched this to the team. 

Now we have a Store and Checkout flow.

 
 
 
 

wireframes 

After wireframing different options, this was the one that made the most sense to me. When a user selects the device they want to purchase a drop-down would follow once they hit select, and make them choose between plans: (a) 7-Day CVR  (b)30-day CVR   (c) No plan

Giving the options of 7-Day CVR first would make users think about it and maybe purchase, but still have an understand that this is an additional service attached to their device.

 
 
 

FINAL VISUAL DESIGN

For the final design, I was heavily inspired by Fashion Web Sites where they show case the product in very large pictures. Typography was used to highlight important information, and simplified text to support the decision to purchase. Iconography was added to quickly show the user benefits to buying with us: Fast and Free Shipping, Money back Garanteed. 

 
 
 
Our new store saw a 21% increase in sales for our Cloud Video Recording services, and a 40% increase sales through our new mobile checkout.
— Scott Scruffner, Project Manager at Dropcam
 
 
 

©2017 Anna Salazar. All rights reserved.