Benefit had developed a line of revolutionary new products that filled a clear need in the cosmetics marketplace—brow products that were easy to use and delivered great results. But, as good as the products were, they faced a challenge: most women don’t style their own eyebrows, and many don’t trust themselves to do a good job. Benefit needed to convince them that self-styling their brows wasn’t just possible, it could be easy and fun.
Empathizing with our target users is always the first step to designing a great experience, and even though our lead designer for this project was a makeup expert (and a big Benefit fan), we all had a lot to learn about brows. So we started by working with the marketing strategy team at Benefit to begin segmenting the target audience into personas. We combined existing research insights, hands-on experience with the product, and a host of interviews to ultimately arrive at four segments that contextualized our brow customers.
Mapping the Customer Decision Journey
We decided the starting point was to predict the likely needs and pain-points for each of our personas as they shopped for the new brow products. Knowing that many customers might start their journey online—but then complete a purchase in-store, or vice versa—we hypothesized both. And, while generating trial was a critical first step, we knew retention was equally vital. So, we mapped out the post-purchase and repeat-purchase journeys, as well.
This exercise provided good insight in two ways. First, it helped to identify which user needs were universal to all of our personas (the "low hanging fruit") as well as those needs unique to a specific segment—the potential landmines that might have been otherwise overlooked. Secondly, it gave us a holistic list of needs that we could then easily prioritize and filter out anything that wasn't well suited to being solved in a digital space. The result was a concise, prioritized list of "jobs to be done," ready to ideate against.
For a lot of our potential customers, brow styling was brand new, which suggested we start with the basics. But if we built an experience around a single marketing journey, starting at the beginning would risk alienating more experienced beauty enthusiasts, who were important social media influencers.
The range of needs in our audience led us to propose something: what if, instead of making a single digital experience, we built four or five small ones? We would develop a number of concepts to span our diverse target, and provide a central starting point where users could simply navigate into the experience that best fit their need or piqued their curiosity.
Ultimately, we landed on five interconnected modules that we all felt met the “sweet spot”— a combination of technical feasibility, likely user acceptance and achieving the goals of the brand and the campaign.
We utilized an iterative, mobile-first, responsive design approach for this project, as we do with all web work. Design was conducted in four, two-week long sprints: the first two focusing on the macrointeractions of the experience—navigation, key engagement points, primary functionality, etc.—and the last two were used to refine the microinteractions—integrations, behaviors, motion and physics.
This rapid design process meant quicker rounds of review, disciplined focus and faster, more frequent feedback. On average, we were back at Benefit’s offices, sharing new work and revisions, every three business days.
We also are firm believers that testing always makes interactive work better, and creative marketing experiences are not exempt from this rule. We did multiple rounds of moderated, in-person usability testing throughout the design process to validate our decisions, find the rough spots, and polish them off. By the end of our design phase we were absolutely confident that our target audiences not only understood the intended experience, they were finding value.
Of the five modules, here are a couple of our favorites:
The most engaging and creative microexperience we designed was the “Play” module. Following our strategic need for an experience that would drive product discovery through before-and-after photos of styled brows, this module used a slot machine-style interaction to let users swipe between different models, and then various eyebrow styles on each model.
Testing and iterative design revisions were critical to nailing this experience. Across multiple rounds of usability research, we were able to refine the experience to the point where virtually everyone understood how to use it intuitively within seconds, with almost no instruction. The end result was something fun, effective, and great fit for the Benefit brand—so much so, that they patented it.
For users who wanted a more direct route to product recommendations, we designed a simple three-step quiz that resulted in the two or three best products for them. Key to this experience was balancing the number of questions with the meaningfulness of the results—too many questions and visitors would abandon the experience; too few (or the wrong questions) and the results wouldn’t be unique enough to the user.
User testing, again, was key to striking this balance. By exposing prototypes of the recommendation module to test subjects, we were able to tune interactions and test questions to arrive at something we had confidence would yield successful engagements.
When Benefit's interactive team approached us for this project, they told us they were looking for a different approach than what has been the norm for creating this type of tentpole digital experience—and we like to think we provided the process and perspective they were looking for. It delivered results, too: visitors who engage with the brows experience spend 84% more time on-site. By embracing client/agency collaboration, rapid prototyping and multiple rounds of testing, we arrived at solutions that hit all the marks.
See More Work: