The landing pages of Glossier and Hims.
Osme
Building a premium skincare eCommerce site from the ground up.
TLDR: I wanted customers to experience the values of Osme from start to end of their purchasing journey. Through user research I uncovered valuable insight resulting in a luxurious human-centered website, selling 20+ units in our first week.
My amazing Osme team includes Rachel Choi, Founder; Hannah Park, Brand Designer; Jennifer Kim, Copywriter, and Christie Jeong, Marketing Lead.
First off, what are Osme's values?
Before I started creating layouts and mocking up screens, I needed to get a clear understanding of Osme’s vision statement and values. After a discussion with our Founder, I was able to narrow the values to three points.
We value transparency.
Honesty, transparency and accountability were key traits to be presented to the customer.
Our products are natural.
We wanted to show customers that we only used natural, vegan and cruelty-free ingredients.
We are environmentally friendly.
All of our products were packaged in eco-friendly materials.
Measuring Success
After determining our brand’s values, I wanted to identify the criteria for a high-performing website. By defining key metrics I was able to clearly measure the success of our site. The KPIs included:
Consistent sales.
At the end of the day, the most important goal of this site was to sell products.
Efficient user journeys.
Customers should be able to purchase products quickly and easily.
Happy customers.
Although this was more of a qualitative goal, I wanted customers to leave positive reviews and to be proud of being part of the Osme family.
Who's killing it in the skincare industry?
I now deeply understood our values and goals. My next step was to make Osme stand out amongst all the other skincare competitors.
Naturally, I did research on the top DTC (direct to consumer) brands in the skincare industry. I saw Hims and Glossier as the gold standard in this space. The practices I saw and adopted from them were aesthetically pleasing colour palettes, consistent branding, strong product imagery and impactful storytelling.
Working on a vision with our Brand Designer.
I quickly want to give a huge shoutout to our talented Lead Brand Designer, Hannah Park.
She was such a pleasure to collaborate with, as she helped me to translate our brand values into a website for Osme. Using Shopify’s design system and components, I holistically presented all our brand’s colours, logos, minimalist aesthetic, and packaging.
Creating a layout consistent with our brand guidelines and product packaging.
Connecting with Senior User Researchers.
With my first iteration of the website finished, I immediately wanted user feedback.
Therefore, I connected with Senior User Researchers from IBM and other digital agencies on how to conduct high quality user testing. These were their main pieces of advice:
5 is the magic number.
The recommended # of user testers is 5. The cost-benefit of conducting additional tests diminishes after 5 people due to repeated and diluted information.
Write a script.
For consistent and detailed results, write a script. Analyze user flows on typical customer journeys and encourage thinking out-loud for qualitative findings.
Create a System Usability Scale (SUS).
Your website needs to be easy to use. This will help you document accessibility concerns, gaps in the design system and other inconsistencies.
Creating a user research game plan.
Time to start testing!
Hannah and I finalized the script, found 5 users from our target demographic, conducted 30 minute tests on Zoom, and created a System Usability Scale survey.
Testing the correct demographic.
Our target demographic were women in their 20-30s that had an interest in skincare.
To make sure our users were in our target audience, we asked screening questions. This also helped us to understand their current shopping habits and assumptions.
1. How often would you say you browse for skincare products?
2. What are your top two expectations when shopping online for a skincare product?
3. On a skincare website, what is your typical journey of purchasing an item?
Yoon one of our user testers.
5 main tasks.
Conducting the user tests, I encouraged users to share their screen and to think-out-loud as they completed 5 main tasks.
These tasks tested typical user flows of our customers. I also made sure the starting points of each task were varied (i.e. not all tasks started from the homepage) to test the entire site.
1. Please have a quick look through our homepage without clicking anything. Feel free to comment about the layout of the page, photography, and anything else that comes to mind.
2. You may now explore the website - starting from the homepage, please find the ingredients for the Jojoba Oil Aroma Serum.
3. Using the navigation menu, add a Rose Osme Soap Bar into your cart and try to purchase these items.
4. Starting from the products page, please find our most recent blog.
5. For your final task, can you please visit osme.ca on your phone and browse around? Any comments or observations?
Uncovering valuable user insight.
After all the user tests were completed, I started to code all the results and synthesize feedback. I highlighted repeated terms from our transcripts and documented repeated behaviours from our user’s screen share recordings in an Excel sheet.
The feedback from users was implemented on our site and helped to make an overall better and more seamless shopping experience.
Customers always love a story.
"How do I know if the product is actually natural?"
Understanding that Osme was still a widely-unknown company, we had to fight for our customers’ trust and interest. Therefore, curating a narrative was even more important compared to our big-name competitors. I iterated by adding more prompts and blogs where the customer could learn more about Osme.
Customers want transparency. Blogs and articles allow users to get the "behind-the-scenes" look.
Customers want to see an in-depth view of cosmetic products.
"What is the texture like? What is the consistency?"
Users liked the professional product shots however wanted to see the product in use. They wanted to see the texture and colour of the product.
Hearing this, I was able to act on this demand by leveraging product videos on the page. The videos gave customers an in-depth view of the product and how to use our serums, hand soaps, etc.
Leveraging videos in the product pages.
Don't create unecessary steps.
"I want to see the ingredients and other details right away."
As seen in the video, our first layout had a drop-down/quick view animation. Although this technically shortened the purchasing user journey, customers wanted to see all the details before buying.
Therefore, I removed this interaction and immediately directed customers to the full product page.
All users found the "Quick view" drop-down animation useless, they wanted to immediately directed to the product page.
Work within the design system.
"This pop-up looks out of place."
One negative result from our System Usability Scale was that 50% of our users noticed inconsistencies within the site.
An example was the inconsistent branding of our initial pop-up newsletter. The different font and dark colours did not match with the aesthetic of the rest of our site.
The revised pop-up (bottom) was consistent with our other design components.
A successful launch.
After actioning on all the user feedback, we finally launched osme.ca! In our first week we sold out of our hand soaps and sold over 20+ units. Another pleasant surprise, was that we had several customers reach out to compliment the website.
Something I learned.
Conducting user testing is a lot of work but so worth it. Finding users in our target demographic, writing a script, creating a SUS, conducting the tests, coding results, and acting on feedback is a tiring but rewarding journey.
I was so used to my designs and layout, that I was blind to improvements and gaps within the site. Each user testing session always introduced a new perspective and ultimately led to a premium all-encompassing eCommerce site.