What if shoppers were able to save money on makeup and skincare as a team?
ROLE
TIMELINE
UX Designer
7 weeks
CLIENT
Circler
TOOLS
Figma
Zoom
Beauty is only skin wallet deep.
Ask the person next to you if they’re currently wearing any type of skincare or beauty product. High chances, they are. The concept of beauty has always seemed timeless, tracing the use of beauty products and cosmetics as far as 4,000 B.C. Today, the worldwide beauty industry is worth $425 billion, and desired products aren’t the most affordable, especially when compared to their manufacturing costs.
Does beauty have to come at a cost?
This is a question I was asked when first meeting with my client, the CEO of Circler. A startup tech company, Circler aims to launch an intuitive platform that connects buyers to manufacturers and sellers offering beauty and skincare products at a discounted price. For the next 7 weeks, I journeyed to design a mobile application that prioritizes users’ concerns of purchasing skincare and makeup products whilst addressing Circler’s business goal.
PROBLEM
The cost of producing cosmetic goods are a fraction of the retail price, making it difficult for consumers, especially in their late teens- 30’s to afford purchasing desired beauty products.
GOAL
Design a mobile app that connects users to manufacturers/ sellers offering cosmetic goods at a discounted price.
SOLUTION
An app that gives users a fun and cost-effective shopping experience through team purchasing.
Step 1 of our journey…
“I chose ‘Circler’ because I wanted our name to stand behind our company’s purpose: to have people join together as a community, as a circle.”
I found “Circler” to be a very interesting name for a retailer company, so I had to ask my client the inspiration behind it.
-Stacey Jo, CEO of Circler
Circler’s vision is to launch a platform that offers group purchasing options for beauty products at a discounted price by following a team purchasing model. Before diving in, I needed some background on what team purchasing was, since the concept was unfamiliar to me.
“Team purchasing is a process that allows several individuals or businesses to come together for the purpose of purchasing various types of goods and services at discounted rates.”
-Malcolm Tatum, SmartCapitalMind
Who are we up against?
Turns out, team purchasing is a popular term— just not in the United States. My client was inspired by China’s company “Pingduoduo”, and Korea’s “Alwayz”, stating that these businesses successfully run off of a team purchasing model. In addition to those two companies, I involved Sephora and Flip, two major players in the makeup and skincare industry, into my competitive analysis.
-
Pingduoduo
Chinese app that is the leading social commerce platform serving over 900 million users
STRENGTHS
• Online marketplace for North American consumers
• Strong reputation (handled 61 billion orders from 11+ million suppliers in 2021)
• Users can get some products for free if team formed is big enough
WEAKNESSES
• Can promote addictive behaviors
• Potential counterfeit goods
• Users found that the discount events held are a scam
• Poor customer service
-
Alwayz
Korean team purchasing app that promotes lower prices through direct sales from producers
STRENGTHS
• Lower prices with lower platform fees
• If everyone joins forces, a multi-deal that can be purchased at an unprecedented price
• Offers free shipping on all products 365 days a year.
WEAKNESSES
• Users felt it wasn’t convenient, different, or special
• Users found it difficult to share links with other friends (friend function error)
• Poor user experience and UI; glitches
-
Sephora
French multinational retailer of personal care and beauty products with nearly 340 brands
STRENGTHS
• Volume of prestige and new brands
• Evolves with times, cultures, and trends
• App shows new products before they’re launched in store
• Can buy online and pick up in store
WEAKNESSES
• Glitches and can lose all of user info
• Incentivized reviews posted all the time, won’t allow negative reviews
• Won’t tell consumer a product is out of stuck until they click on it
• Can’t search past orders
-
Flip
App allows users to purchase beauty products and post reviews via video reels for commission
STRENGTHS
• Ethically sourced, inclusive brands
• Free next-day delivery shipping and returns; one-click checkout
• Good beauty rewards program (30$ cash rewards for every $100 spent)
WEAKNESSES
• Glitches
• Poor representation (POC)
• Poor customer service; No response or DM
• Shipping takes a long time (over promises)
• Codes don’t work
Key takeaways
After conducting my competitive analysis, I found the following key insights to be the significant areas to consider before creating a solution:
Inclusivity matters: Users didn’t like that Flip had a limited range of shades, making it not the most POC (people of color) friendly. How would we ensure that users feel inclusivity with our app by providing shades / products that vary in wide ranges for POC?
All about community: Pingduoduo and Alwayz seemed to have flaws in the “social” aspect of their app, so how can we brainstorm what the functionality of having “friends” would be. (Would they be able to share their purchases, posts, reviews? etc.)
Is it worth to try before you buy?: Interested in the idea of a “product try on”, where the user would be able to see what shades/ products work with their skin type. Potential “skin type/ makeup” quiz at sign up so users can have curated recommendations
What’s a good product if it doesn’t work well? If there’s a single room for improvement that all apps share, it is their basic UI and navigability that discouraged users to continue using the app. I would focus on building a seamless and effective UI for users for the Circler platform.
Our Audience
I wanted to hear from other users firsthand with the goal of learning their makeup and skincare shopping preferences, challenges that come with shopping online, and what they enjoy about online shopping. I interviewed a total of six participants (5 female, 1 male), all in their 20’s who all use some form of skincare and makeup.
200+ data points to 5 themes…
The following insights were found when creating my affinity map following the user interviews:
5/6 participants have expressed that they’ve decided not to purchase an item due to its price.
PRICE OF A PRODUCT
5/6 users appreciate being able to gauge how good a product is based off of reviews.
RELIANCE ON REVIEWS
4/6 users want a platform that gives recommendations on products.
PRODUCT RECOMMENDATIONS
EASE OF SITE NAVIGATION
6/6 participants want the ease of navigating and filtering the app simply.
4/6 participants expressed that they find it challenging to shop online because it’s difficult finding the correct shade or color to match their skin tone.
CHOOSING THE RIGHT SHADE
Below is a snapshot of some clusters formed from the Affinity Map:
Meet Kimika
Kimika, a skincare and makeup fanatic is a persona created to humanize the user’s makeup and skincare shopping experience. I’ve gathered the goals, pain points, and motivations to help guide my design making process.
What features to prioritize?
After developing my key research insights from the interviews and creating my user persona, I shared my findings with my client. Together, we decided the primary features we wanted for Circler, features that would best cater to Kimika’s needs.
FEATURE SET
-
Team Purchasing was definitely the top feature my client wanted for the app. This concept would ensure lower costs for users to purchase desired beauty products.
-
A user’s profile gives other people access to the user’s product reviews, purchases, and teams (they have the option to private).
A newsfeed brings a social element to the Circler experience, showcasing a timeline of products that friends have purchased, reviewed, and teams joined.
-
During their onboarding, users will be able to fill out a skincare and makeup questionnaire which will curate a list of recommended products based off of their skin concerns, preferences, and lifestyle.
-
The explore page will categorize products in a simple yet effective way with the goal of not overwhelming the user with choices. Categories include popular products, new, recommended, brands.
Go with the user flow
My client and I knew we were running on limited timeline, so which user flow was most important to prioritize? Because my client wanted Circler’s primary focus to be ran on a team purchasing model, we decided to create the following flow:
“Kimika wants to purchase a new item at a discounted price by participating in an existing team.”
At the drawing board
Sketching the low-fidelity wireframes allowed me to envision the overall structure of the Circler app and placements of components. This step also helped me determine the potential number of screens to design.
Let’s turn it up notch
Digitalizing my wireframes to mid-fidelity screens allowed me to provide more detail such as text and layers. The user would be able to access a specific product either via the search engine on the top of the explore page or through the filter icon inside the engine, which will take them to the filter page.
Who is Circler?
Creating the brand’s identity is probably the step I had the most fun with. To start off, I took a look at the Circler’s core values:
Affordable, Trendy, Community, Friendly
My client gave me the following as a reference or “skeleton” for the potential logo and color palette:
Trailing back to the first meeting I had with Stacey, I became aware of the importance of “circles” and “community” for this brand. The colors yellow and pink were a good foundation, since yellow depicted a friendly and cheerful vibe, with pink being the standout color for femininity.
Upon seeing my sketches, my client suggested a simpler look for the logo. Something modern that doesn’t have an image that depicts skincare and makeup in the case their company expands to retailing products outside of beauty.
OFFICIAL COMPANY LOGO
OFFICIAL MOBILE APP LOGO
STYLE TILE
Let’s kick it into high gear
When it came to designing the high-fidelity screens incorporating the color palette and style tile, I kept the users’ needs in mind when it came to designing the primary features of the app. Though one user flow was created for testing, I wanted the user to get introduced to the overall idea of what Circler had to offer.
A product that is easily navigable
It’s a given that a product should be intuitive to use, but I kept in mind the overwhelmingly number of participants who wanted a platform where they could navigate seamlessly.
The home/explore page separates products into the following categories: Popular, Recommended, New, Brands, Skincare, and Makeup.
The user has the option to find their desired product through the available tabs, search bar, or filter icon.
No-nonsense Filter and Sort
Though the filter and sort option was not a part of the testing flow, I designed the screens to show how this feature would work.
The user will be able to filter out options under the following:
Department
Categories
Subcategories
Brands
Skin Concerns
Skin Type
Formulation
Introduction to team purchasing
The goal is to have the user participate in some type of team purchasing, whether it is to join an existing team, or start their own. This action lowers the product’s retail price, though the user has the option to buy alone at original value.
The user has the option to “join a team”, “start a new team”, or “buy alone”, all of which will take them to the checkout page on the screen the left. Once they get a minimum number of people to complete the team, shipping for that product begins.
Easy access to reviews and friends’ activities through newsfeed
One feature my client and I decided on that would set Circler aside from any other e-commerce platform was the social part of it. Though the “Feed” was not a part of the testing flow, we wanted to design this screen to visualize a potential look of this feature.
The user has a newsfeed that features a timeline of their friends’ activities, from the products they’ve purchased, reviews made, teams joined and started, so on.
The user will be able to interact with the posts, share, comment, or click the product link.
Clean and sleek profile with organized account access
Of course, we knew that user’s profile inevitably comes with a social platform, so we designed this screen as a potential layout.
The user’s “Profile” section is visible to those who view it and showcases images of the teams they are on, items purchased, and items reviewed.
The “Account” section is only accessible by the user, and include information such as form of payment, teams, current shipments, and reviews.
How well does our product work?
I conducted usability tests on seven participants to gauge how easily they were able to successfully complete three separate tasks.
Testing was moderated in 30-45 minute time frames, both person and through Zoom screen share with Figma Prototype Mode.
⮕
Task 1
Going through the walkthrough screens and logging into their existing account
Task 2
Searching for a specific beauty product
⮕
Task 3
Purchasing the product by joining an existing team.
⮕
Measuring Success
The following metrics were used to measure success in testing my prototoype:
Asked users to rate each task on an scale of 1 (easy) to 3 (difficult)
Asked users to think aloud while completing tasks to identify thought process
Whether the user successfully completed the task
Number of errors that occurred while users were completing the task.
100%
of participants completed all three tasks successfully
6 of 7
participants made a total of 0 errors.
5 of 7
of participants rated all three tasks a 1 (easy)
To gauge next steps, I created a feedback grid that allowed me to visually take note of key insights from the usability testing and separated them into categories: What worked, what needs to change, any questions asked, and ideas.
I then sorted common feedback notes into a chart that that ranged on severity and frequency.
Key Insights
Most participants were unfamiliar with the term “Team Purchasing”, and even after reading through the walkthroughs, few understood its concept.
Redesigning the walkthrough to better explain team purchasing was of high priority, since this would be the first screens they’d see when first opening the app.
All users found the overall look and flow to be intuitive
Users felt that the confirmation page could user more details, including what item was purchased.
Users wanted a clearer distinction between the buttons in the product page.
Design Iterations
BEFORE
The original walkthrough screens lacked an understandable definition of team purchasing, making it confusing for participants to understand how the app works. Imagery was also confusing, with text not descriptive enough.
AFTER
Revised walkthrough provides a concise description of team purchasing, with graphics that give the user a clearer idea of how team purchasing works.
BEFORE
The original product page contained 3 buttons, but did not present a clear primary action. Users were confused with which button they should click. Buttons were also of different heights, not the most ideal in a UI standpoint.
AFTER
Revised product page with the primary CTA button being to “start a new team” instead of “join” in the scenario that an existing team isn’t present. Despite explaining to my client the importance of keeping the all buttons the same height, she was adamant about the design close to the original, so I changed the height as much as I could without compromising the first design.
BEFORE
Original order confirmation page lacked a description on the item the user purchased, with confusing text.
AFTER
Revised order confirmation page has an added description of the product purchased and clearer text summary.
And Now, for the Grand Finale
Introducing Circler
With our designs are finalized, we are ready to take our users on a journey to a more affordable and fun way to shop for beauty products
Next Steps
What’s in store for Circler?
With the designs handed off to the developers of Circler, the start-up company is now in production of launching their app. My client is in the works of creating a website to gather email signups to gauge how interested people would be in Circler.
This project’s primary focus was to create minimum viable product. If given the opportunity to improve the user experience, I would do so by adding the following features:
LIVE CHAT WITH CUSTOMER SERVICE
Users would be able to interact with experts with the live chat feature to have any questions related to skincare, makeup, team purchasing, and overall use of Circler.
VIRTUAL TRY-ON
Users would be able to either upload a photo or manually use the camera to try on specific makeup and skincare products to see if it matches their skintone.
COMPREHENSIVE MAKEUP/SKINCARE QUIZ
User would take a thorough skincare and makeup quiz during onboarding to get a curated list of recommended products to purchase.