Scope


P.O._Proactiv 1.jpg
P.O._Proactiv 2.jpg
P.O._Proactiv 3.jpg
P.O._Proactiv 4.jpg
 
Background_Proactiv 1.jpg
Background_Proactiv 2.jpg
Background_Proactiv 3.jpg

RESEARCH


AppleDevices.png

Heuristics Evaluation

What's working and not working with Proactiv's current website? Our Researcher, Laura, and I conducted a heuristics evaluation to help us identify usability problems with the user interface and learned:

  1. Language for certain pages or UI elements needed to be rewritten

  2. Navigation was not easy to understand

  3. Layout for certain pages could be more user-friendly (brief content, simple layout on mobile, and consistency from desktop to mobile)


Competitive & Comparative Analysis

What are our competitors in the skincare industry offering their customers? I compared 5 companies that offered similar services and found:

  1. All companies have a mobile-responsive site. 45% of our members view our site on mobile so a redesign would need to take this into consideration.

  2. Acne quizzes help customers find specific products for their skincare needs. Most companies offered this feature to help you find the right product. Proactiv used to have this feature, so we explored bringing this option back to our members.

  3. Finding not just price, but perks are important too when enticing customers to buy items and be a returning user. Competitors clearly told their users what the benefits were of using their products and what they could get out of being a user/member. Benefits of membership are not clearly visible on the homepage or throughout the proactiv.com website, it is hidden under a section that rarely received visits from our members.

*After completing the C&C, I realized I should have included competitors that had a similar business model; a monthly subscription box. So I kept this in mind during the design phase.


Analytics

Common Tasks.png

What are the most common activities visitors/members do on our site? Laura and I wanted this information to help guide us on what pages to test with our visitors.

From this information, we were able to put a usability research proposal together.


Usability Testing

We wanted to hear what potential customers and members thought about the website so we created a script of questions that were presented to users on UserTesting.com. We tested a total of 32 people from different age ranges on both desktop and mobile throughout the acquisition and member site and found that:

  1. users think items for certain pages could be laid out differently especially for most of the mobile site, they found it overwhelming especially with all the text

  2. process to buy was confusing on the acquisition site

  3. certain tasks like postponing shipment could be more simple

*During this first study, we learned that for our next study we needed to let users naturally pick what area/page they would go to next versus guiding them there.

 

Aside from all the usability issues, most users had an overall positive experience with the member website on desktop. Using the System Usability Scale (SUS), we asked users at the end of the test if they would recommend the Proactiv website to a friend or colleague and 32% said that they would "Very Likely" recommend the site. 

The SUS Score for the desktop member site was 87.4. The average SUS score across 500 websites is 68. A SUS score of 80+ is viewed as an “A” site (on a scale of A through F).

 


Redesign


Design Studio.jpg
 

Wireframe Sketches

 

After presenting a detailed report of our research findings to our stakeholders, Laura and I prioritized the issues that needed addressing by the number of times users had mentioned the issue along with business goals (increase engagement and usability). Once we had approval to redesign these pages, I moved onto the design phase and started sketching with team members from each team. I involved members of each team to get involved so I could hear opinions from each department. Based off of user's reviews, I knew that some elements needed rearranging so following their feedback along with the Baymard Institute's E-Commerce UX Research and business goals from each department is how I came to my design decisions.

 

Sketches.png

High-Fidelity Wireframes
 

After completing my sketches, my manager had a general idea of what I was going to wireframe. Noticing that the stakeholders prefer completed high-fidelity mockups, I continued to do this for each page within Photoshop for easy access to the team's Creative Cloud assets. After about 3-4 reviews with a team of Designers, Copy Writers, Project Managers, and Developers, we received approval from our Customer Experience and Creative Director, as well as the Brand and Legal team.

 

 

Homepage

Product Search Page

Product Detail Page

Manage My Shipments

Customize Your Kit

 

Prototype


The videos below show me quickly walking through some of the wireframes that I created. If you would like to walk through the screens yourself, you can do that through the Adobe XD "ALL SCREENS" link below.

The first video on your left is a user interaction through the acquisition buy flow.

The second video walks you through the Customize Your Next Kit feature where members can add items to their monthly kit.

The last video is the member experience of postponing shipment, changing shipment frequency, and having their monthly kit shipped immediately. *This experience is still going through design iterations and stakeholder approvals as well as vendor updates.* 

 

 
 
 
 
 

SUMMARY

At the end of December 2017, we handed off the final designs to the Development team. At the beginning of January, an outside contractor that Proactiv works with for development needs had some issues implementing a calendar functionality for members to postpone their shipment. In February 2018, the Proactiv team and I worked out a solution in the interim to push the redesign live on March 1. 

 

Back:

Next: