It’s time to find the right acne products for your personalized routine.
The market space is dominated by beauty and anti-aging product sales, followed by fitness and mind + body exercise and health eating, nutrition and weight loss companies.
The Proactiv Company needed a way to separate myth and folklore to find an acne treatment that works for each of their consumers. Acne sufferers generally believe acne is a teenager’s problem. However, acne is the most common skin disorder and it affects people of all ages.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of The Proactiv Company.
Project Team
Mark Kusek — Creative Director
Mike Faivre — Design Director
Lindsey Shapiro — Art Director
Erik Bjarnason — UI/UX Designer
Denis Kabistan — Senior Developer
James Scariati — Front-end Developer
I worked on the research, design, and front-end development execution on this project. The experience is an adaptive web-based experience that allowed users to understand their individual acne needs and it gave The Proactiv Company the ability to distill their userbase into more refined segments based upon their purchasing and acne treatment needs.
I worked with an art director, two designers, brand stakeholders, and a front-end engineer. The design team worked to translate the business goals into a user experience that would allow the distillation of consumer behavior and motivations.
The design team and I built out frameworks and prototypes to explain the overall vision and end goals to the stakeholders. We had too communicate the benefit of a quiz as an entry point to understanding our buyers.
The project manager acted as our initial stakeholder which allowed the team to have a fulcrum to evangelize customer goals and their relation to the overarching business goals. The team prioritized and negotiated features for launch and beyond.
The project manager built out the stakeholders needs into epics using JIRA. Each task was then vetted by the entire team so the workload was shared, understood, and communication remained transparent.
The team worked to collaborate on white boarding sessions, rapid sketching, and data gathering – based upon our then current knowledge of our users and their purchasing decisions. I executed user journeys, wireframes, prototypes and assisted with design specification creation.
The internal review process allowed the design team to work at an iterative pace with the business stakeholders to get sign off during the initial concept stages. Once the design team was at the prototype stage the stakeholders only had to sign off on the brand aesthetics because functionality, high-level design guidelines, and marketing had already been agreed upon.
Proactiv’s competition has been pushing quizzes to highlight that each acne sufferer is unique. The failing of our competition is that they are not effective step therapy systems. Proactiv is a proven three-step formula to combat and control acne. The system helps heal existing blemishes, as well as prevent new breakouts from forming. With that in mind it is the only solution that is able to truly recommend a personalized solution for acne sufferers.
The Challenge
The goal is to create an immersive experience for our site’s users that allows The Proactiv Company to collect our customer’s data to understand their specific form of acne and the best way to treat it. The challenge is to build a quiz where the users don’t feel burdened by taking a quiz.
To solve the problem of task based burdens we kept the quiz short by condensing the steps into the most pertinent questions and the interface was designed as a whimsical and playful full screen take over.
To move quickly (and not break things) we moved forward with the project in an agile-ish environment. This was new for The Proactiv Company but led to an efficient process where we could go from concepts and ideas, to mockups and prototypes at a rapid pace.
The architectural decision was to keep the quiz within the framework of Foundation 6 and have the purchasing aspect kept in the existing e-commerce structure of Demandware.
This was the first time the Proactiv Company let the design and development team implement scrum and the agile methodology into a large scale, far-reaching, project. Atomizing large epics into user stories allowed us to manage expectations and iterate on low fidelity wireframes as the business and marketing teams worked on finalizing the larger scope of Project Clear.
What that means is we were able to focus on concepting and wire-framing the initial client-facing aspects of the quiz while the business and marketing team were creating larger goals for the project, such as an individualized acne treatment portal that uses the quiz data to keep a user within the Proactiv family of products and treatments.
To communicate with the teams the sections of the project were compartmentalized.
This allowed for sign-off on the prototype stages and rapid iteration from there.
The design team was able to collect the business goals that affected the client-facing aspect of the quiz. Once prototypes were approved, the wireframes and prototypes were handed off to the development team. Concurrently, as each piece of Project Clear was approved and handed off, the design team was able to build templates to hand off assets to the development team rather than be constrained by creating mock-ups for each error, success, product, or option state of the quiz.
I refer to this as agile-ish because wireframes were kept within the design team and prototypes were used to communicate effectively with the development team. This was a massive step in the right direction to push the company into the scrum process, and Project Clear is used as a case study for successful implementation of SCRUM on a large project.
The basic Proactiv solution is a three part system comprised of a cleanser, a toner, and a lotion. The cleanser has tiny beads that help to physically exfoliate the dead skin cells, unblocking the pores. The toner contains glycolic acid and is a chemical exfoliant and compliments the physical exfoliant in the cleanser.
The third step is to use a repairing lotion which soothes the skin. The concept is for acne sufferers to be “proactive” about treating their acne while following the simple, three step system.
The goal is to explain the The Proactiv Company continuity program to potential customers in a clear and concise way, as well as show that Proactiv is the same trusted product with new ownership.
Before Proactiv was under the umbrella of The Proactiv Company, customer complaints filled our ForeSee account with people not understanding the monthly shipment system and payment schedule. Furthermore cancelling out of the program was originally difficult to do so.
Customers expect The Proactiv Company to understand their acne treatment needs. The 3-Step System is the core component of the acne treatment regimen. Considering each individual is just that, an individual, their skin needs are unique.
The vision is that we are not only recommending specific kits per user but we predict their future acne needs based upon their lifestyle as well as a host of other criteria.
Project Clear Quiz
Welcome to Project Clear, the Get Clear Quiz. This portal is the Proactiv users way to understand their skin type and individual skincare needs. Proactiv customers will get a personalized, curated acne treatment kit that grows with them and allows them to keep their completion clear.
Get Answers, Anywhere
From our Google Analytics we have been able to identify that the majority of Proactiv customers and potential customers visit the site on their mobile phones, specifically on an iPhone 4. To cater to the iPhone 4 we built the site to constrain to 320px x 480px.
To ensure consistency in the information users are seeking we built a responsive website but paired down the mobile version to have less animation which in turn reduced load time.
After the user completes the quiz they are taken to the results section.
We reinforce that each order is based upon on continuity model that is customized to each individual’s acne needs.
Letting the user know that they have sixty days to return the products, no questions asked, builds a sense of impermanence to their order and lets the customer know that despite their products being customized to their needs, they are not locked into the continuity program.
The Better Business Bureau’s logo on the quiz results gives potential customers a sense of comfort by the logo and a good rating conveyed a level of trustworthiness.
To compare the language of older Proactiv marketing sites to the quiz, we can see there has been substantial changes. From previous testing rounds we found that users do not respond to the barrage of BUY NOW buttons. TRY IT NOW lets the potential customer know that they are testing the product, along with the money-back guarantee they know they can return the products and get their money back.
The language and tone of the copy is conversational and informative. This lead to users feeling as if the quiz isn’t commanding them as well as the user’s name being dynamically shown throughout the quiz reinforces the individualized aspect of acne solutions.
The button’s alterations from the original Proactiv skeuomorphism to a flat style with the TRY IT NOW language was a design decision that required a lot of defense from stakeholders.
- Users do not respond to commands that make them feel like they have no hand in the decision.
We used ForeSee results to prove this. - Flat style allows for faster load times
- Keeping the brand’s orange will keep the call-to-action color consistent across all Proactiv sites.
Getting Social
The overall messaging across Proactiv’s social media was conversational, this kept the tone with the Get Clear Quiz.
Tying It All Together
The biggest challenge in the project was organizing the design process along with the recommendation engine and fitting the deliverables all within the Proactiv marketing cycle. Any alteration to the front-facing consumer site is a large change, which affects the design team, development, marketing, and the social media team.
Marketing and social media needed to leverage the Get Clear Quiz as a tool for Proactiv awareness as well as use their channels to funnel users into the main website. Each team’s direction and feedback had to be paired down and managed to keep the main goal of quiz creation and understanding our potential customers in the forefront.
With the agile-ish approach, but still documentation-heavy approach needed for communication, each user path was mapped out for sign off by stakeholders. This allowed each team to see the vision in a format they felt comfortable with. There was a cycle of brainstorming sessions, requirements gathering and creation, approvals, specification creation and handoff.
To mitigate the revision process, the design team worked with the stakeholders on weekly brainstorming sessions. The process involved sketching and white boarding sessions that concluded in requirements creation.
After requirements were built out based upon the white boarding sessions they were make into official documentation and JIRA epics, which were approved by the stakeholders.
The old method of design at The Proactiv Company was to create each layout and instance in Photoshop and have sign off on PDFs created from the PSD files. We changed all that. Wireframes allowed the team to move quickly and get approval on the functionality and give the leadership team a visual representation of what the various states of the design will resemble.
We found that for approval from senior leadership, prototypes were the most effective way to gain buy-in and feedback. Our prototypes were built using a combination of Photoshop, Adobe Experience Design, and InVision. Videos of users navigating through the quiz were easily shareable through JIRA tickets and were portable for usability testing.
Guides and Specifications
As wires and designs were approved we delivered guides to the development team. Specs were not created per page because the design was built out as a template. There are two main sections per viewport size. Per the specs the desktop easily scales to tablet sizes and the mobile size is specific to smart phones.
What Does Everyone Say?
Using Usertesting.com for the mobile & desktop experiences for the Get Clear Quiz allowed us to discover how real world users will react to our initial design and development assumptions.
- Testers appreciated that Proactiv is attempting to personalize the purchase process with the quiz. They like that the quiz responses lead to product recommendations.
- The quiz has a clear, simple layout and is fast and easy to take.
- Testers liked that they had a choice of the recommended kit or the less expensive kit and most said: “It’s only $10 more”.
I like the free offer – is there a catch? What makes you experts? I expect to see evidence of expertise. Do I answer for my child or myself – my son is who has the acne. Wants more detailed questions.
user name: eyetechart / 52 / F.
I’ve never used Proactiv before – I always gone to Dr. because it’s been brought on my hormonal imbalance, does use over the counter face wash, watches a lot of youtube and finds recommendations there. I use sensitive skin wash which is recommended by a Dr. the quiz says my skin is super oily which doesn’t make sense. I look for benzoyl peroxide in over the counter products because it often isn’t strong enough. 3G doesn’t show benzoyl peroxide, while PA+ page did, so I don’t like the ‘oil control’ recommendations.
user name: aeweygandt / F / 29.
On the mobile site I am not sure which skin type to choose because I have all-over body acne and wrinkle concerns but the recommendation is only for an anti-aging kit.
user name: netmari30 / M / 30.
- The key issue is this: Many testers did not feel that the quiz is detailed enough to give them a truly personalized experience or an accurate recommendation.
- Several testers expressed disbelief in the validity of the recommendations: They asked if the recommended product were just based on one of their answers rather than all of their answers.
- All testers chose face for this question since it was single select.
We revised this question to be multiple select. - We are positioning Proactiv+ as having skincare benefits that Proactiv 3G does not have and age factors into that.
This question was revised to have an age range. - Originally the first question to the quiz was: What is your gender? Parents answered this question about themselves, rather than their child.
We added in gender, language to ask who the quiz is for specifically, and if the user was shopping for themselves or someone else. - The first recommendations page had the initial product, the user’s recommended kit and continual usage of the language “we recommend”.
The recommendation page was paired down to a single kit recommendation and a single choice of clearly explained gifts as well as language that clearly explained the continuity program and money-back guarantee. - Some testers wanted a list of ingredients and benefits for each product clearly visible on this page.
More robust information was added in per kit and for each product per kit.
Overview of the Skincare Quiz traffic sample, key areas to note:
- Positive – High amount of focus time, and engagement for the quiz.
- Positive – Low bounce rate and dropoff during the quiz experience.
- Percentage of quiz completion is great.
- Low bounce rate throughout the experience.
After a little over three months of solid work and testing we launched and with our data gathered we built an experience to get potential Proactiv customers a personalized acne treatment kit.
- We increased traffic and engagement onto the site by 30%.
- We added to the overall monthly sales cycle by 12%.
- A sharp drop in negative reviews, coupled with positive reviews of Proactiv products has appeared on social media as well as Amazon that we believe is due to a clear explanation of the continuity program and the ability for customers to return products with no questions asked.
- Overall what we took away from the process is that having too many viewpoints can blur the vision of a project.
- We found that rapid iteration and test, test, test is one of the most important aspects.
- The whole is a sum of its parts. A good user experience is not just the visual and navigation aspects in the digital world. We found our users have a lot to say regarding everything from the photography used, the size of the bottles, the customer service line’s tone, to the packaging the products come in. That is why we were so adamant about pushing for modern design techniques and being transparent with consumers regarding the delivery system and continuity program. Language is one of the most important design tools.
