Art Director & Visual Designer
dropcam_photography_02.jpg

Dropcam Store Page

 
 

Dropcam  
Super simple home security.

 
 
dropcam_photography_02.jpg
 
 

Drop in on those you love.

Dropcam was a San Francisco based startup who reinvented WiFi video streaming cameras, and later was acquired by Google's NestLabs in June of 2014. Dropcam was the first-in-market product to provide a simple to use security camera that was accessible from anywhere because of our cloud video storage and streaming. At Dropcam, I got to work with an amazing team of talented and hard-working folks. We strived for providing our users with a great product and user experience.

My role: Lead Brand Designer (in-house)
VP of Marketing: Elizabeth Hamren  |  Company size: 100  |   Year: 2013-2014

 
 
 

The Team

I started working for Dropcam in February 2013 as their first Brand Designer in the Marketing team — at the time the company was at 28 employees.  

During this project, I worked closely with our Marketing and Sales teams to understand the our business goals and how to message it with our users, worked with Support to understand some of the pain points of our current pain points, and with the PM and Engineering team to get it done.

 
 
Drop_logo.png
 
 
 

Web Design
Store Page UX/UI Re-Design

Dropcam was about to launch our newest product on Fall of 2013, just in time for holiday season. The company wanted to make sure we addressed some issues with our current checkout flow on our website. I was the sole designer working on this project, but working cross functionally made the work much more attainable.

 
 
 
Salazar_Dropcam_OldStore.png
 
 
 

What we knew

According to our data analysts, our current store was not performing well and we were having a consistent large number of drop-offs from the checkout page. After talking to our Support Team  we discovered that our customers were confused about what we were selling. Couple with our findings with data analysts and support, we also performed some user-testing and I did some design research, and here are some of our findings:

User-base Demographic:
• Most live in urban cities in the United States
• Between 25-45 years old
• Homeowners, single/family, with children, pet owners
• Mid-high income
• Little to very tech Savvy

Behaviors and Assumptions:
• Users were not clear what our products were
• Users didn’t understand how to purchase Cloud Recording
• Users spent a long time reading through all the content in the page
• Confused on the steps on the checkout process

 
 
 

The Goals

  1. Create an easy and intuitive checkout flow

  2. Create a UI that makes our company look credible and safe

  3. Better visual design to describing services and products

Business Goal: Create a flow that provides better data analysis, and increase product and cloud recording sales both on web and mobile.

 
 
 
Dropcam_UXFlow_1.png
 
 
 

New UX: Creating a Store Page

After talking to Support, looking at the data, and doing some design research. It was clear we were presenting our users with a lot of content, and it was hard to focus on the task in hand. After talking to the team, I pitched the idea to have dedicated Store Page, where the user could focus on learning more about the product and services before being brought to checkout. A Store Page was something a lot of other web stores had, and as I walked through the flows I saw a great opportunity in adding it as we scale to more and more products. Users could add products into the cart and checkout when they were ready.

 
 

Cloud Recording as an Add-on

Previously Cloud Recording was being purchased as a bundle with a camera, however, this flow was very confusing to our users with only one product. Instead of creating a bundle, I decided to have it as an add-on when you select a camera.

 
 
 
Salazar_Dropcam_STORE_WIREFRAME.png
 
 
 

New UI: Empowering users

After establishing the UX flow, we now had more real-state to present the user with information. I opted to do what a lot fashion stores do and showcase our beautiful hardware design on our Store Page. The type hierarchy clearly communicates what matters to a user when purchasing a product.

To meet sales goals and sell more Dropcam Pro cameras than Dropcam HD cameras, the Dropcam Pro camera is displayed before the Dropcam HD camera on the page. The Dropcam HD camera is shown slightly above the fold of the website, so the user knows to scroll down to see a different product.

 
 
 
DC_Store_A-1.png
dc_store_2.gif
 
 
 

New Checkout Flow

We decided to break down the checkout flow into different pages, instead of having it in an accordion. To help the user through the different steps I added a progress bar to show where they are on the process, and highlighted important information for them.

Separating pages would give us even more data on where users are dropping off in the flow, which would help us when re-design the page in the future.

 
 
 
DC_Store_A-4.png
DC_Store_A-3.png
DC_Store_A-5.png
 
 
 
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
 
 
 
 

Moving forward

We we able to gather great data on the new store performance, and there were somethings we considered changing:

• We A/B tested having the CVR dropdown versus the CVR always being shown, and the tests showed better performance when the options were displayed.
• I wanted to go back and update the design for the cart and checkout. Unfortunately, in order to meet our deadline, we had to rush to get the cart and checkout ready quickly. I would have loved to do more on getting it to be as elegant as the store page.
• Definitely would want to revisit the progress bar and iconography.

Overall, this is was a successful project and I’m really glad I got to work on it :)