PROBLEM

Proactive wanted a user-friendly, responsive mobile platform that would increase sales.

The Proactiv team noticed that they were losing customers on their mobile platform for lack of responsiveness compared to their desktop e-commerce site.


MY ROLE & OUR TIMELINE

As a Solo UX Designer, I collaborated with cross functional teams, internal stakeholders, and a Researcher to complete this project.

Focusing my efforts on research, interface design, and prototyping in my own time to complete this project in 4 months. Working with large cross-functional teams, I had to keep in mind that the approval process would be a long one.

 
Proactiv Timeline.jpg
 

COMPLIANCE Check

A heuristics evaluation identified the complexity of buying or updating items on mobile.

Since this product was already live, I checked if it violated any usability principles. I noticed that it violated several but the one most important issue was Flexibility and Efficiency of Use since I found the site difficult to buy from on a smartphone.

Why was it difficult? I couldn’t find the Manage Kit section to switch out items. It was hidden at the bottom of the page and I thought it was another header. When I opened the Manage Kit section, I couldn’t remember the price of the items I selected and I wasn’t given that information on this page, so I had to go back to the previous page which made my experience very frustrating.

Also, I had a difficult time figuring out when my next kit would ship. I missed the section that would take me to the page with those details when I first signed in.

 
Manage Kit.png
PA_MemberSite_Mobile_Dashboard01-PA_MemberSite_Mobile_Dashboard_A.jpg

checking out the competition

Conducting competitor analysis of other skincare brands helped us to see what they were doing and if we could draw any inspiration from their experiences.

We found that there was one direct competitor, Curology, offering almost all the same services so we knew we would need to differentiate our brand from theirs. The first step would be to improve the mobile experience so I did some research into the buying experience from Curology.

I found that the mobile site was clean, quick and very easy to buy. Curology has a dermatologist custom create a formula for each patient versus a catalog of products to choose from, a progress bar informing you how far along you are in the buying process, and very minimal texts and visuals.

 

My Design Inspirations from Curology

 
IMG_6425.png
IMG_6426.png
 

listening to our USERS

After learning what our main competitor was offering, I wanted to test my hypothesis on users that customers were having a difficult time buying on mobile.

Working with the Director of Research, we conducted a quantitative and qualitative usability study for 2 months, where we tested 35 participants on the current mobile-responsive site through UserTesting.com.

We had users complete specific tasks such as switching out items in their kit, delaying shipment or changing shipment frequency, and ordering an item.

When the study was complete, we presented our findings to stakeholders from the top 3 negative results on mobile:

 
feedback.png
 

MOBILE redesign

During usability testing, the Manage My Shipments page and the Customize Your Next Kit page were mentioned the most so we decided to concentrate our efforts there for the redesign.

Since the Customize Your Next Kit page wasn’t a typical feature you would find on most websites, we decided to do a Design Studio for this feature. On the first day, team members from the Product, Design, and Engineering team gathered and asked questions about the project and then went to the whiteboard to map out a flow. On the second day, we all sketched out our solutions to the problem and then voted on our favorite 2 options. I took the option that had the most votes and further sketched out the page.

Since these pages already existed, I was able to do a quick sketch for all of them and then move into high-fidelity designs.

 
Design+Studio.jpg
 
 

Manage My Shipments

For the Manage My Shipments page, the new design helped our members clearly find all the information they needed for their next shipment (postponing shipment, customizing their kit, changing shipment frequency, etc.) as soon as they logged into their account, along with a description of what you could do on each page eliminating the search and questions about where things were.

 
 
 

Customize Your Next Kit

On the Customize Your Next Kit page, the new design gave our members the opportunity to see what was in their next kit at the very top of the page and easily add additional quantities. This new feature eliminated the hidden drawer function that most members easily missed at the bottom of the page.


 

ITERACTIVE PROTOTYPE

I created a clickable prototype to give stakeholders the chance to provide feedback on the final designs.

 
 

Lessons Learned

Involve development in your design iterations. By doing this, I would’ve learned how long the Customize Your Kit page would have taken. Engineering required they have time to figure out the details of building this design.

Since there has been a lot of changes in upper management at Proactiv, the design of switching items in a member’s kit was not implemented until a year later but usability issues have been addressed and there was an increase in sales by 8% since members could now easily find the items they were looking for.

 
“So glad they updated the account page. Before it was difficult to find anything about your next delivery but I found it very quickly today! It seems like they have done some clean up on that page. Finally!!!”
— Rebecca Mathews, Proactiv Member since 2015

Want to learn more? Let’s chat! Or you can check out my other case studies.