Establishing the online presence and branding for a small beauty brand dependent on word-of-mouth
Oilyble started when a manicurist with over 10 years of experience packaged cuticle oil in a portable pen to maintain her customer’s nails until the next visit. When her customers returned asking for more to gift to friends, a side business was born.
Growing beyond word-of-mouth, the client reached out to me to design and build an e-commerce website for her brand.
As a new business only operating in the brick-and-mortar space, I was privileged to develop the branding and design an e-commerce website for Oilyble’s current and potential customer base to purchase from.
Additionally, it needed to be hosted on a platform with a low-learning curve for the owner to easily transition into selling her products online.
Establish a clear identity for the brand through cohesive branding
Incorporate reviews, extensive product descriptions and photos to compensate for the inability to try the product in-person
Optimize the check-out process through minimal steps and allow flexibility
For the client’s transition into e-commerce, we decided to stick with Squarespace as it has the lowest learning curve for the client who self-proclaims to be not tech savvy
Without the luxury of trying out a product on the spot, shopping online for a beauty product is a lot trickier, especially for a new beauty product.
In order to fill this gap and allow customers the confidence to purchase from Oilyble's website, I did a competitor analysis of beauty brands and user interviews to better understand what customers value and want when purchasing beauty products online.
Reviews for products were the most important factor before purchasing a beauty product online
Quick and easy checkout process with as few clicks as possible
Vague product descriptions and inaccurate photos deter repeat purchases
No option to check out as a guest led to participants often abandoning their cart
“Where did all the items in my shopping cart go? I just want the checkout process to be as painless as possible.”
“I can’t buy anything until I’ve seen how it feels on my skin and being able to compare it in-store with other similar products.”
“I hope it looks as good and does what it says it will. Otherwise, it’ll be with all the other stash of products in the corner.”
“What is the difference between an essence and a serum? I need visuals and clear descriptions to help me!”
Although Oilyble’s current customer base is pre-dominantly women, the client wanted to take this opportunity to establish the brand for all genders with yellow as the brand color.
To reflect the fluidity of the brand, a drop in the Y of the logo was incorporated to express the motion of oil.
A pale yellow was chosen to visually represent oil, the star ingredient of the product.
To complement, a neutral and muted palette of green and khaki to appeal to all customers and inspired by the natural ingredients.
To make up for the inability to try products online and retain new customers, key design decisions were incorporated.
4 participants who purchase beauty products online regularly and 3 participants with no online beauty experience were recruited to see how they would interact with the design and receive branding.
All 7 participants successfully checked out as guests to purchase the cuticle oil pens with no glaring errors but there were issues with the first impressions of the website.
Close up images of the product and universal icons chosen to reinforce the genderless branding on the homepage garnered vastly different interpretations depending on the participant’s level of familiarity with beauty products. Participants with little to no beauty knowledge all thought the images of the cuticle oil pens were vape pens instead.
To solve this, I chose a lifestyle-focused hero image followed by beauty-centric iconography and concise language to establish the website as a nail beauty brand.
Choosing to host the website on Squarespace for the client's convenience when transitioning meant there were going to be constraints to the final design.
Instead of designing directly on Squarespace, I chose to design on Figma first to fully explore different flows and layouts to test out the review section and checkout process as those were two major pain points identified from user interviews.
Although Squarespace does allow a great deal of flexibility in their design, their checkout form and review section's components are fixed. These are the two sections that will look differently compared to my final design below and follow Squarespace's structure instead.
However, a benefit of hosting on Squarespace is their built-in responsive design.
My first time designing for a client and communicating my design decisions proved to be daunting at first but the real-time feedback while progressing through the project helped me discover new solutions I may have otherwise overlooked.
As the target user for Oilyble, it was difficult at times to remain objective with my design decisions. This was evident during the user testing of the prototype when users with no beauty background thought Oilyble was a brand for CBD or vape-related products. In retrospect, including users with no beauty background earlier during user interviews could have prevented this.
The next step now is to implement the design onto Squarespace. The homepage and product page will be similar to the prototype design above but the reviews section and checkout pages will be tweaked to fit Squarespace's template design for their checkout process and reviews section.
I will continue to guide the client as she acclimates to the platform and iterate accordingly as the first online sales trickle in.
KawaruIncorporating AR to immerse Japanese language learners struggling with reading Japanese
StationheadBuilding a poll feature to enhance engagement between hosts and their growing number of listeners