Clerstory

Responsive Design

Project Overview

 

Background

Clērstory’s founder Lydia has struggled with a number of skin conditions throughout her life, from acne to eczema, and first hand knows the importance of finding the right products that don’t aggravate her symptoms. She graduated with her B.S. in Biology from Northwest University and has most recently worked at a renowned cancer research center in Seattle. Currently, her passion is creating safe skincare products and sharing scientific knowledge through Clērstory.

Problems:

Clerstory is a small business operated by one owner. Since there’s no other workers or partners, the owner is left with overwhelming tasks from marketing, administrations, to managing production. Clerstory’s website was created through Squarespace, a website template platform. The owner was rushed by a deadline so the website was quickly put together without thinking through user experience because sales performance was more a priority. Now, the owner has more time and is considering a designer to help her bring some more insights on user experience which in a long run could help with customers loyalty and sales performance.

Scope: Responsive Design

Software: Figma

Role: UX Designer (Research, Visual Design, Interaction Design, User Testing)

Design Process

Research

Research Goal

  • We want to learn users’ frequency of purchasing, considering, and using of skincare products

  • How to improve the user interface of the website on all devices

Research Objectives

  • Determine what motivates the users to buy skincare online

  • Understand the users’ background, skincare types

  • Understand the users’ purposes and goals of visiting and purchasing skincare online

 

Competitive Analysis

 

User Persona

 

Primary Research

The primary research was conducted using phone call interviews method. I interviewed potential users of skincare in the age range that the business is targeting. The users expressed frustrations with skincare brands, their ideal experience purchasing a product online, and what they think of the existing website of Clerstory. The findings were helpful to the client and how they might improve UX/UI, their business goals, and deepen their marketing strategy on specific groups.

User Interview Summary

  • 5 Participants

  • 10 questions

  • 5 females of different races

  • Age: 22-29 years old

Helpful Findings

  • Most ideal skincare purchase experiences are ones that focus on customers (offer free trials, samples, and consultations), minimal shipping cost for an e-commerce, and thoughtful recommendations.

  • Clerstory could offer a consultation/recommendation for different skin types since currently there’s no samples being offered or enough resources about the skincare to convince the users to purchase.

  • The confidence of the brand is important to the users. The participants appreciate the level of confidence a brand challenges them through offering free products to try out or a refund if results were not shown as promised.

Define

Business and Project Goals

Project Goals (1).png
 

Site Map

Ideate

  • Task and User Flow

  • Wireframes

  • Responsive UI

  • UI Kit

 

Task and User Flow

 

Wireframes

 

Responsive Website

 

UI Kit

Since Clerstory has been operating and running, I did not have to create a completely new UI kit. I used the existing UI and branding to create a cleaner and more professional palette of UI kit.

Clerstory - UI kit.png

Test

Usability Testing

Process

We followed up with the participants with prototype of Clerstory’s desktop design. Everyone was given a link to this prototype. They gave me feedback on what they think, feel, and experience while visiting the the website’s prototype.

Objectives

To find out what customers are looking for and what is missing in their purchase experience as well as introducing them to new experience and how that make them feel.

Finding

  • Most participants think the website looks cleaner, simpler, and easier to navigate.

  • Most participants feel their voice and feedback were heard from the research interview stage. A lot of the changes were made according to the participants’ feedback and comments.

  • The website is more align with the branding elements (logo, colors, etc.)

  • Emily

    “I like the contrasting fonts on the site. But maybe try a different color for the font other than lavender since that’s a pretty prominent color already. I like the fruit pics as the headers for the different product pages.”

  • Michel

    “I see a much more consistent narrative and using images of ingredients really sells the “natural” theme. Models are always a plus, I would add more of those images if possible.”

  • Amelia

    “I like how everything is much more clean and easy to read. I didn’t realize how difficult it was to read but now I see the difference.”

  • Hannah

    “I personally like quizzes and hope that the owner will add that feature in one day. Everything looks very nice and seems like the website just got a face-lift!”

The website is live!

We have the privilege of helping this business owner out by simplifying their UX and UI to make certain features more attractive and not competing with one another. By applying our research findings and design solutions, we have improved Clerstory’s website and it is now live!

Conclusion

  • Users appreciate a great UI that helps them navigate fast to their needs whether it is to contact the business or to make a purchase.

  • Users have handful of insights for the business model to keep growing which allows UX/UI to continue to evolve as the business grows.

  • Vocabularies and orders of buttons/CTAs matter as a business. We don’t want to create multiple of the same CTAs to make sure the users will not miss what we wanted them to see. On the other hand, it could be harmful to the business because that could be a passive way to pressure the users and set a different tone for the business overall. 

persona by girl by Xinh Studio from the Noun Project