CLARK'S

BOTANICALS

Case Study

CLIENT:

Clark’s Botanicals

MY ROLE:

Senior Visual Designer

TIMELINE:

Jun 2019 - Sep 2019

AGENCY:

Digital Operative 

OVERVIEW

Clark’s Botanicals is a New York-based skincare company with an energetic personality and avante-garde products.

The goal was a complete website redesign to increase conversion to drive more sales. 

ROLE & RESPONSIBILITIES

I was the sole designer on this project. I collaborated with a product manager, a creative director, a copywriter, and a team of engineers.

I was involved from project concept through execution.

Mask-Group-512

PROBLEM

Problem Statement

The current experience is not intuitive and is outdated, causing a low conversion rate.

Group-2853

DEFINING SUCCESS

Improving the UX of the experience

The current website was not easy to navigate.

Creating a visual identity

Align with the new rebrand.

Building an interactive mobile experience

Over 85% of their audience comes from a mobile device, so an intuitive interactive mobile experience was a must.

UNDERSTANDING THE USER

I needed to understand the user, I took a look at the provided consumer research with data analysis, and conducted stakeholder interviews to define the optimal customer pathways. Then I then conducted a competitive analysis that showed what competitors had accomplished and where they fell short.

EXPLORATION

First, I needed to understand key pain points, second, categorize all insights gathered, and lastly, present them to the internal team and stakeholders.

After that, I mapped user needs to different phases. With a full map of information, I was able to create the site structure and convert it to usable information architecture and wireframes.

Group-2854

FINAL DESIGNS

I designed the experience to be responsive to ensure functionality across a wide variety of screens and devices. My job was to effectively translate this brand message revitalize the visual identity and expose their compelling product stories.

Group-2855

MOBILE FLOWS

These are some of the mobile flows and user interactions I created based on the research and insights done at the beginning of the project.

Group-2823

The design of the website was actually in parallel to the brands’ rebranding. Some of the goals were to make the website flow more intuitively and effective and make it more modern, sophisticated, unique, and fun since they wanted to attract a younger audience.

Group-2856

HIGH FIDELITY MOBILE PROTOTYPE

I wanted to translate the brand’s personality into an engaging shopping experience and effectively translate its message.

I also focused on the interaction of the experience. I reworked the navigation structure to make it more intuitive. I also added a side cart to allow users to access the cart from anywhere without going to the cart page. I made it a priority to have a selection of products at the top of the page to add engagement and increase conversion.

I added filtering on the catalog page to help the user find a product quicker based on their needs.

I also reworked the structure of  the PDP, data showed that users struggled to find the right information about the product so, I made it a priority to fit all the main details in a more organized and accessible way. Creating a better overall layout and better hierarchy.

HIGH FIDELITY

DESKTOP PROTOTYPE

VISUAL DESIGN SYSTEM

I worked closely with the agency responsible for the product rebrand and aligned on colors, fonts, iconography, and the overall look and feel of the new brand.

Group-2857
Group-2858

IMPACT

Feedback from stakeholders and users was very positive.

Here’s a quote from a stakeholder:

“I am amazed by the results of the work. Great understanding of where the brand currently is and where it should be in the future.”

Group-2859

AWARDS

CSS Design Awards
The new experience won Best UI Design, Best Innovation Design, and Best UX Design.

Group-2852

TAKEAWAYS

Adapt to the changing timeline

Adapt to budget constraints

How to accomplish more with less.

WHAT I WOULD TO DIFFERENTLY?

I would have liked to have done more testing on usability and accessibility to accommodate for any issues.

BROWSE OTHER PROJECTS

SYLVIA.PRATS38@GMAIL.COM

Behance  /  Linkedin  /  Dribbble  /  Twitter  /  Instagram

© Sylvia Prats