WEBSITE REDESIGN

Redesign of skincare brand The Ordinary's existing website which refines the copywriting, categorization, and display of products to appeal to skincare beginners and experts alike.

THE ORDINARY

 

Senior UX Design Course Project

PROJECT

February - March 2019

(6 weeks)

TIMELINE

Estela Xu

Lucy Huang

Kenneth Bruskiewicz

TEAM

Figma

Illustrator

Premiere Pro

After Effects

Keynote

Photoshop

TOOLS

UI Designer

UX Designer

Researcher

Copywriter

Video Editor

Interaction Designer

Facilitator

ROLES

PLEASE UNMUTE THE VIDEO FOR THE BEST EXPERIENCE

SPECIAL THANKS TO ASHLYN CURRIE FOR THE VOICE-OVER

CONTEXT

For a senior user experience design course (IAT 438), we had to propose a hypothetical solution for a client in order to solve their business problem. We chose the skincare company Deciem, and decided to focus our design solution on its child company -

The Ordinary. This project is not affiliated with Deciem or The Ordinary in any way.

THE ORDINARY

CLINICAL FORMULATIONS WITH INTEGRITY.

The Ordinary is a skincare brand from parent company Deciem, known for its transparent, self-manufactured, and inexpensive products consisting of active ingredients. Being one of the first brands to have low prices for skincare, it developed a "cult-following" comprised of customers knowledgeable about skincare and customers looking for good value.

01   HONESTY

Their products are always stripped down to the basics, only providing what is needed and no more. The Ordinary doesn't advertise either, electing to avoid expenses in order to deliver affordable skincare products. Their packaging is simple, white, and clean, and their products are named after the primary ingredient they contain.

02   TRANSPARENCY

The Ordinary is one of the first and only brands to deliver quality ingredients at low costs. While the beauty industry was marking up prices for supposedly rare and luxurious ingredients, The Ordinary came with honesty and integrity, providing sole ingredients in formulations worth their real cost.

“Deciem has broken away from the traditional product line up of skincare products offered by big beauty: day creams, night creams, cleanser and serums to instead offer many single ingredient concentrated products that can be layered upon each other and tailored to your specific skin concerns, i.e. acids, oils, pure retinols and vitamins.

DECIEM CASE STUDY - TRANSPARENCY DIGITAL

THREE TYPES OF CUSTOMERS

We categorized The Ordinary's existing customers into three categories based on their pre-purchase and post-purchase habits and skincare knowledge.

01   SKINCARE NEWBIE

Usually introduced to The Ordinary due to their low prices. This type of customer wants to try out the basics of skincare at an affordable price before choosing to splurge. 

02   BRAND NEWBIE

They are moderate skincare user looking to refine their existing regimen. Discovering Deciem or The Ordinary through word-of-mouth about quality or low prices, they would be hoping to find the quick fix to their skin concern.

03   SKINTELLECTUAL

Wants to maximize available skincare products by finding the best offering of quality active ingredients, which The Ordinary provides. They know what they are looking for and what works for them.

BUSINESS PROBLEM

The Ordinary's naming of products after active ingredients panders to the "Skintellectuals", but neglects to include the "Skincare Newbie" and "Brand Newbie". While experts are easily able to navigate the website to find the ingredient they are looking to add to their regimen, new customers are often left lost, trying to understand the difference between retinoids and direct acids.

This is a screen recording of The Ordinary's current website. From my team's perspective, the amount of categories to browse and information to read seemed very intimidating for first-time users who would not have knowledge of skincare terms. Of course, we needed to validate our assumption with user testing.

DESIGN OPPORTUNITY

As other skincare companies, such as Beautylish and Sephora, start to copy The Ordinary's branding and product strategy, The Ordinary must go above and beyond to deliver more than just simple, affordable, and clean skincare.

Beautylish and Sephora have their advertising and communication strategy working in their favour. If The Ordinary improves their website's communication strategy, they can move ahead of any competition.

COMMUNICATION EFFICIENCY

Revisit how they communicate to reposition

THE ORDINARY

LOW PRICES

BEAUTYLISH'S GOOD MOLECULES

THE ORDINARY

SEPHORA

HIGH PRICES

COMMUNICATION INEFFICIENCY

MAKING MEANING: HOW SUCCESSFUL BUSINESSES DELIVER MEANINGFUL CUSTOMER EXPERIENCES

BY NATHAN SHEDROFF

“A company must realize it already offers its customers a meaningful experience but is not delivering it as completely and cohesively as it could.

USER JOURNEY MAP

To better understand the customer experience of The Ordinary's services and products, we conducted online research, looking at skincare subreddits, YouTube reviews and comments. We also asked our friends who use The Ordinary's products for their personal experience. Since most of my team was comprised of newcomers to the brand, we also relied on our own experience and understanding of The Ordinary's product offerings to create a user journey map.

1/2

We noticed the majority of pain points originated from the consideration phase. Congruent with our evaluation of The Ordinary's existing website, the website's layout of information and text-heavy descriptions for their products were key factors behind customer frustration. There was too much cognitive overhead where the user was expected to conduct additional research into products and seek reviews from previous customers in order to understand what the product does and whether it's the right fit for them. Therefore, to help customers make decisions easily, we chose to intervene at the consideration phase.

GOOGLE DESIGN SPRINT

We employed Google's Design Sprint method, illustrated by Jake Knapp in his book Sprint, in our second and third week of process and research. It was a 5-day process which helped us understand the business' values, set a long-term goal and target, brainstorm ideas with low-fidelity prototypes, and validate our assumptions with user testing and screener surveys.

ROLES + RESPONSIBILITIES

My designated roles for the sprint were facilitator and customer expert. In order to keep the team and our process on track as facilitator, formed and strategy and schedule which outlined the steps we would need to take each day to get to our end goal. I led the design sprint by selecting, explaining, and coordinating between various design exercises to get our brain juices flowing. As customer expert, I was in charge of understanding in-store and online customer behaviour, as well as their goals and pain points. I primarily conducted research online to identify patterns. Additionally, I asked seven of my friends who had no experience using products from The Ordinary to visit the store and relay their experience.

AVOIDING DESIGN TRAPS

Despite there being a wide range of information and skincare knowledge needed when considering purchase, we wanted to avoid going down the "education route". You can always design for an experience, but you cannot force a customer to undergo an experience.

FOCUS: AUDIENCE

From the three main types of skincare customers, we narrowed our focus to target two - the "Skincare Newbie" and the "Brand Newbie". The "Skintellectuals" were already satisfied with The Ordinary's website and product information and were only looking to maximize on active ingredients using previously acquired skincare knowledge. We wanted to switch our focus to the Skincare Newbie and Brand Newbie because they are the ones facing confusion on The Ordinary's website.

SCREENER SURVEY

In order to recruit participants for in-person user testing of our working prototype, I created a screener survey using Google Forms. You can access the survey below.

This survey was later distributed amongst our friends and family on these skincare subreddits:

We received a lot of feedback from our screener survey that validated our assumptions. From a total of 132 responses, we found the following results:

USERS' DISLIKES 

"Explain not only in scientific but translatable terms to non chemistry experts"

Female, 25-29

"Information about what a product is for can be communicated in a better way."

Female, 18-24

"The benefits of their products aren't very clear, you kind of have to click around to find it or research it yourself. Website will say things like "good for hair or skin" but like how?"

Female, 18-24

Female, 18-24

"Their website is a mess."

PERSONA

From the feedback and data I acquired from in-person user testing and the screener survey, I worked with another teammate to create a user persona.

Something that always kept us on track was going back to the customer we were designing for. Having a persona to keep checking to validate our design decisions was very useful in the weeks of process and prototyping.

USER RESEARCH

Before we could proceed to design the final product, we had to ensure we were aligning the redesign's goals with those of our audience's. I created another survey via Google Forms and posted on the same Reddit communities. This survey was conducted to get an understanding of our user demographic, what sort of preferences they had in terms of product layout, filters, arrangement, and information. Link is provided below.

SURVEY FINDINGS

I received 78 responses for this survey, of which 91% were female and 5% were male. The majority of responses (50%) came from 18-24 year-olds, with 17.9% being 25-29, 16.7% being 30-35, and 11.5% being 36-41.

I had included a question asking people to rate themselves on their self-perceived skincare experience level. The majority of votes (34.6%) went to a rating of 7/10. 8/10 received the second highest number of votes (23.1%) with 6 and 9 tying for third (10.3%).

When asked to provide their first impressions of The Ordinary's website, a lot of users expressed their dislike of the left navigation, text-heavy product descriptions, and scientific jargon. For a few, these were enough to have them looking at external sites to research on products before purchasing. Some wanted to see more target-specific guides.

According to survey responses, 67.9% of users felt they had to improve their skincare knowledge to be able to use The Ordinary's website. One thing we found surprising was how 48.7% of users didn't know about or had not used the regimen guides and other guides provided by The Ordinary on their website.

I also conducted Multiple Variant testing in order to determine which display of product information users preferred. In included 5 samples collected from various beauty websites which sold or provided descriptions on products from The Ordinary. 

We were not surprised to see Options 2 and 3 with 41% each, leading the favourites vote. Users cited the options' simplicity in terms of content, language, and instructions as leading factors for their vote. It was surprising to see users who did not know about or use The Ordinary's Regimen Guides vote for Option 3. Overall, their response matched with our hypothesis that easy to understand and to the point descriptions would help users make better choices in terms of skincare. We kept this in mind moving forward to redesigning the website.

Options 4 (46.2%) and 5 (32.1%) received the most votes for least favourite option. Users mentioned there was too much text, which was overwhelming and unnecessary, and additional research into terminology required.

Lastly in the survey, I had asked if users would prefer products being organized by their ingredient category (antioxidants, hydrators, Vitamin C), or skin concerns (dullness, aging, uneven skin tone). 67.9% of voters picked skin concerns while 32.1% chose ingredients. We also noticed a correlation between the users' self-scored skincare experience level and their choice of product organization. The "Skintellectuals" who voted 9 and above were often seen voting for the ingredients option while the others voted for skin concerns-based searching.

This was an important factor in helping my team decide which route we wanted to take with the redesign, since we now knew we wanted to organize products using skin concerns.

BRANDING GUIDELINES

Having all pieces of the process puzzle underway, we wanted to start exploring ways to redesign The Ordinary's website such that it delivers a meaningful and joyful experience to new and existing customers. While it would be easy to neglect all technical jargon and ingredient-based terminology in our redesign, we acknowledged that those elements are what helped develop a cult-like following for The Ordinary. We had to be aware of "Skintellectuals'" needs and not disturb them in the process of accommodating less experienced customers.

CONCEPTUAL PHOTOGRAPHY

One of my teammates wanted to utilize the existing conceptual photography present in Deciem's instagram page. They feature the active ingredient with the product bottle, hinting at either the benefits or components of each.

EXISTING STYLE GUIDE

We also didn't want to neglect what was working for The Ordinary already. A lot of the responses from our screener survey mentioned liking the minimalist, clean, and clinical look that The Ordinary was going for. So, we decided to keep those elements, while upgrading some - like adding a splash of yellow. 

ART DIRECTION + KEYWORDS

Our art director, Estela studied the brand in-depth, from its in-store layout and use of type. She also drew inspiration from established designers in the field of typography and colour and generated a list of keywords for us to work with when ideating. Some of these included:

BOLD    BLACK AND WHITE   STATEMENT   ABNORMAL   

CLINICAL   AMBIGUITY   DISCIPLINE (GRID + CONSISTENCY)   

The team diverged with these branding elements, list of keywords, and user goals in mind in order to generate individual ideas on how to tackle the redesign. 

REDESIGN IDEATION

PERIODIC TABLE OF PRODUCTS

I wanted to create a product organization system which would support the survey results, opting for a skin-concerns-based approach. With the keywords "grid", "abnormal", and "clinical" in mind, I decided to come up with a periodic table layout to display the various products. My team and I had chosen to embrace the weird and extraordinary to bring personality and a dash of special to our redesign, which I felt the "periodic table of products" added.

Periodic Table Sketch 1
Periodic Table Sketch 2

As seen in the sketches above, the general idea was having filters above the periodic table which would activate the selected products within each category when hovered. Hovering over a product would also display the skin concerns it targets.

DESIGN PRECEDENT: INTERNOITALIANO

One of my previous projects included researching and discovering strategies used by Internoitaliano and their designers. Some inspiration I took from them was their use of subtle hints on the website to allude to the larger hidden meaning behind their products. I wanted to use this detail in my redesign to represent the active ingredient in each product when hovered over.

FINAL INDIVIDUAL PROPOSAL

The products are arranged in alphabetical order, with the first column belonging to those which start with a number, such as "100% Organic Cold-Pressed Rose Hip Seed Oil". I felt this way of searching would be easier for customers if they knew the name of the product beforehand. When a specific skin concern is hovered over, the products which satisfy that concern are highlighted as the remaining products fade out.

Likewise, if a product is hovered over, the particular box is highlighted yellow, and the skin concerns which it helps tackle are also emboldened. Drawing inspiration from Internoitaliano's website, the active ingredient most prominently used in the product appears on the bottom left corner - such as Hamamelis Virginiana in the Salicylic Acid 2% Solution.

I did not want to oversimplify the content on The Ordinary's website and product so much that it deviated from their branding and core message. They named their products after the active ingredients because that is what a "Skintellectual" would be searching for. I wanted to present this information to newcomers to The Ordinary - our target audience - in a way that was both comfortable, quirky, and meaningful for them. So, I chose to embrace the clinical and chemical to produce the "periodic table of products".

Since the product description used by the Regimen Guide on The Ordinary's website was the most popular format during user tests as established in our survey, I wanted to use it to describe products in the redesign as well.

CRITIQUE AND REVISION

My team really liked the periodic approach I took to display products, so we went with it for the final iteration. Some critique I received both from my team and prototype testers was how the skin concerns were positioned in a way that seemed to suggest a correlation with the columns below them. We modified this in our final proposal. Additionally, the ingredient highlight was removed as it seemed to be too busy on the landing page. We instead used the conceptual photographs from The Ordinary's Instagram page to bring more individuality and personality to the products. 

DESIGN SOLUTION

Our redesign of The Ordinary's current website displays their line of products at once in a periodic table setup which lets the customer hover, learn, and find what they are looking for by navigating through skin concerns. By dividing each type of product - such as suncare, oils, and retinoids into their own columns, we allow for easier browsing. "Skincare Newbies", "Brand Newbies", and "Skintellectuals" can confidently find and use products from The Ordinary by receiving only the information that is vital to their purchase and usage in the product page. This minimizes any external research the customer needs to conduct as all information is communicated effectively on The Ordinary's own website.

PLEASE UNMUTE THE VIDEO FOR THE BEST EXPERIENCE

SPECIAL THANKS TO ASHLYN CURRIE FOR THE VOICE-OVER

For the category and product display page, we wanted to inform customers of what each meant in case they were left confused by terms like "Direct Acids" and "Antioxidants". My teammate Lucy had designed a version of the product page using conceptual photographs which provided descriptions for each skin concern category. With some tweaking, we chose to keep this for our final proposal.

REFLECTION + FUTURE DEVELOPMENT

Making sure that the project was on the right track from the first week was something my team struggled with in this project. We had explored many ideas from creating a regimen tracking and editing feature to a whole skincare app. Due to conflicting opinions and a lack of initial strategy, we were finalizing the content and process of our proposal for weeks, leaving only a few days to pull off the designing aspect of the project. I still commend my team to have pulled together in the last week to deliver a quality project. However, given we had more time, I would have liked to explore further into how The Ordinary could provide skin-specific skincare tips and product-specific routines and instructions.

An element of The Ordinary's cult-like hype which we weren't able to translate to our redesign was the existence of discussion groups and skincare forums who collaborate and recommend products constantly. Having a feature which allows this to take place on The Ordinary's own website would be something I would like to include in future iterations.

Product modal of Salicylic Acid 2% Solution