Reducing the time taken to search for suitable products through a personalised product recommendations dashboard.

A targeted recommendations system empowers users, particularly people of colour, to find suitable products without needing to undertake additional time and effort, prioritising individualised recommendations over generic content, considering the user's complexion, skin type, ingredient preferences, and more.

Offering users relevant cross-platform product reviews to aid decision-making.

Instead of users spending time finding reviews from others with similar needs as them, WeGlow offers a centralised platform to find suitable reviews more efficiently Users can view reviews from in-app buyers or product reviews from different sources.

Breaking down and assessing product ingredients to prioritise user trust & safety.

A comprehensive & transparent ingredient breakdown that communicates the level of risk associated with each ingredient, allowing users to be recommended products that are safe and match their preferences, ensuring trust and transparency is kept at the forefront.

Helping users find products with an accurate complexion match.

To offer users further clarity on whether a product caters for their complexion, users can find their shade through 2 simple steps, which will be set as their default “shade” on the app, and they will only be recommended products of this shade.

Prototype Link

📌 The Problem

People of colour face a complex user experience in finding & using skincare and beauty products that work well for their needs.

Discovery

Previous research found that the beauty industry is expected to exceed over $716b in 2025. Catering for an ethnically diverse consumer base is imperative for an inclusive future.

🙁 Current user satisfaction

3x

Black consumers are 3x more likely to be dissatisfied with options for skincare and makeup.
‍(Baboolall et al., 2022).

📱 Projecting beauty standards

3.2b

Projected increase of South Asia's skin whitening industry by 2030.
(Verified Market Research, 2022).

👥 Lack of representation

13%

Out of 70 beauty brands included reference images featuring darker-skinned models, according to Harvard study.

(Mallick, 2021).

💰 Unequal revenue

2.5%

Black-owned beauty brands only make 2.5% of the total revenue in the beauty industry in the U.S., despite black women being 11% of total consumers.

(Baboolall et al., 2022).

💡 Learnings: A mix of research articles, blogs and news articles were referenced for initial desktop research. It was difficult to find relevant sources with research focused beyond the U.S., so I would be intrigued to explore libraries from JSTOR or other credible platforms for more in-depth background research in the future.

Research Approach

However, there is minimal research on the experiences of people of colour specifically when using online beauty & skincare e-commerce platforms.

Research objective & research questions mindmap.

Research Methods

It was critical to recognise the diversity of consumers when researching further into the online cosmetic shopping experience.

💻 Explorative Questionnaire

43 responses | 24 complexions | 19 ethnicities

Exploring widely to identify common & unique experiences of target consumers.

Snippet of survey responses. (click image!)

💬 Semi-structured user interviews

5 participants | 4 ethnicities

Exploring deeply to understand & validate core reasons for problems or issues faced when using cosmetic e-commerce platforms.

Snippet of interview transcripts. (click image!)

🔍 Online ethnography

23 sources | 3 platforms

Exploring unique experiences of the consumers not reflected in survey or interview participants to gain a holistic understanding.

Snippet of online ethnography analysis (click image!)

💡 Learnings: Although I was able to triangulate research methods to facilitate the potential for significant insights, I would have wanted to complete more user interviews if time permitted, with consumers of different backgrounds or circumstances (such as of African or East Asian descent, or consumers with Vitiligo) to help drive richer insights.

Data Synthesis

To identify the most significant issues, research findings were synthesised & analysed using an affinity diagram.

92

Problem notes

12

Affinity notes/problem groups

3

Key insights

💡 Learnings: As the sole researcher and designer, it was initially difficult to fairly assess the experiences of people of colour considering the diversity of the target audience and how different factors may contribute to different experiences. However, cross analysing and comparing experiences helped identify connections in core issues when reporting findins.

Bottom-up affinity diagram to synthesise & categorise key research findings,

Key Insights

After synthesising and analysing our key findings through a bottom-up affinity diagram, we identified 3 key insights related to international students' experiences, helping define our problem.

Time & effort-intensive

POC find it difficult to find products that target their individual needs, hence go out of their way & undertake extra research across different platforms for reviews & suitable products.

“You might find products that match your skin tone, but what if the ingredients aren't right for your skin? Or it’s too pricey or not available. This just lengthens the process of research...”
‍- Saloni, Indian, 22

- 73% of consumers take close over an hour to find suitable products, and 62% are rarely to never recommended suitable products.

Lack of transparency & minimal product information

People of colour have issues with trusting products online due to the lack or quality of product information and reviews, steering them from purchase.

“Don't shop online, colours don't match by a mile.” - Online ethnographic source

“I bought over $200 worth of moisturising products and had an allergic reaction.” - Su, Thai, 19

- 80% of consumers find it difficult to assess whether a product matches their complexion, and 67% find it difficult to find reviews from people with similar needs as them.

Prioritising trust & inclusivity

People of colour prioritise brand reputation and trust investing in brands that incorporate inclusivity and diversity in both their products and values.

“I do know many products are advertised as brightening, but there are some... micro-aggressions or colourist tendencies, especially if it’s targeted towards people with dark skin.” - Pranatsama, Thai, 20

- 57% of consumers are concerned with the availability of products online that are suitable for their skin type and tone.

💡 The Opportunity

People of colour face barriers in accessing trustworthy cosmetics tailored to their individual needs when using online e-commerce platforms. This necessitates extensive, lengthy research to find suitable and inclusive products and brands.

How might we streamline and personalise the online shopping experience to enhance user trust whilst promoting an inclusive & transparent environment?

Concept Sketch & Site Map

Through ideating solutions using Crazy 8's, WeGlow posed as a realistic approach in innovating existing e-commerce platforms in the lens of inclusivity & personalisation.

A site map of the selected concept was created: a personalised beauty and skincare e-commerce platform that utilises tags as unique identifiers for factors that meet the user's needs. The site map would facilitate in organising the information architecture and how specific UI patterns could be used to optimise the user's experiences and interactions when online shopping.

App Site Map & UI Pattern Tags

💡 Learnings: Not as much time could be dedicated to ideation as I would have preferred, but using a quick & efficient method such as Crazy 8's helped explore multiple ideas within a limited time. In the future, a challenging assumptions exercise would aid in further empathising with the experiences of people of colour and how this can translate into inclusive design.

Lo-fi Sketches

I explored different layouts & UI patterns to visualise how to enhance current cosmetic e-commerce platforms with the user's needs at the forefront.

After creating an information architecture, I generated rough, lo-fi sketches of potential screens. The purpose was to focus on the overall shopping experience by considering the steps or decisions a user may take to better understand a product in accordance to their needs before proceeding to purchase, and what screens may be required to accomodate this.

WeGlow Lo-fi Sketches

💡 Process Reflection: As sketching is not my forte, I prefer translating ideas quickly into rough, un-polished sketches to help me organise my thoughts and further develop concepts. However, I would be more cautious of communicating initial ideas clearly if I was expected to showcase ideas to a client for early feedback.

Wireflow

Considering the consumer's thoughts & actions to create a streamlined user flow for online shopping.

Using the software Balsamiq, wireframes of the concept were iterated to experiment with the information and visual hierarchy efficiently, and how UI patterns could best be utilised depending on the purpose of each screen or feature. Wireframing was used for the purpose of developing one main conceptual user flow to highlight how pain points of consumers, people of colour, may be addressed in the process of being recommended a product, exploring the product, and purchasing the product.

1.

User is efficiently recommended products that best align to their needs (informed by responses in onboarding form).

Pain Point Addressed:

POC are rarely recommended suitable products or inclusive brands

2.

User selects a product & explores product details: cross-platform reviews, tests shade match, and checks the ingredient rating.

Pain Point Addressed:

Minimal, unclear or unsuitable product information

3.

User is able to get a clear picture of product's effectiveness to their needs, proceeds to cart for purchase

Pain Point Addressed:

Lack of transparency & trust in products or brands

WeGlow Wireflow

Additional Wireframes

Breaking down the process of offering users personalised product recommendations.

As well as creating wireframes for the main screens, the process behind one of the app's main features, offering target recommendations, and how this may differ from only utilising filtering & sorting systems was iterated to demonstrate how users can tailor a recommendations dashboard once they have onboarded the app. Iterating such screens helped clarify the type of product preferences individual users may have, and designed questions accordingly. Realistically, the personalised product feed is informed by machine learning algorithms to respond to the user's needs and preferences

WeGlow Wireframes: Onboarding form for personalised recommendations

💡 Learnings: Initially the onboarding form was iterated to highlight the aspect of personalisation offered by the app, but these screens were not prototyped further in order to prioritise more unique or complex user flows to make the most out of user testing & feedback.

Wireframe Testing & Key Iterations

After testing WeGlow against the heuristics to identify usability issues, I found that consumers would need extra help & documentation.

As an efficient and quick testing method, I conducted 7 expert tests using a heuristic evaluation template to identify any violations to industry design standards for the personalised e-commerce app. Changes were applied according to expert feedback, specifically for the following heuristics:

Top Violated Heuristics

🤝

Help & documentation

👀

Visibility of system status

🚨

Help users recognise, diagnose & recover from errors

Notable Iterations

Reducing users' cognitive load when analysing product recommendations

Help & Documentation, Recognition Rather than Recall

On the main product recommendations dashboard, users were not able to associate some icons to its meaning, such as the circle related to shade match. To offer help & documentation to new users, a key to highlight product tags was added to the main screen.

"I couldn't really tell what the different icons meant."

Highlighting critical product information

Visibility of System Status

On the ingredient breakdown dashboard, testers recognised that it would be beneficial to also have overarching product claims highlighted as this is more efficient & accessible than simply analysing each ingredient which the user may not know of.

"I think the tags to highlight the risk ingredients are good, but I think I'd make more sense if I could see if it was fragrance-free."

Enhancing user feedback & visibility of important actions

Help & documentation

A few users were confused when following the steps to find their shade for an accurate product match, such as not knowing how or why they should know their undertone. Help & documentation was utilised through informative pop-ups to guide users.

"I don't really know what I was doing when trying to find my shade..."

Helping users recover from errors

Help users recognise, diagnose & recover from errors, visibility of system status

Users noticed the lack of visual feedback or confirmation after they finish finding their shade match, resulting in not knowing if the result was accurate, and they could retrace steps if they changed their mind, thus an additional confirmation screen was included.

"I was expecting some kind of confirmation of my shade"
"I noticed that I'd have to go back to the main page if I wanted to find my shade again."

💡 Learnings: Deciding to complete heuristic evaluations to test the first iteration of the hi-fidelity prototype was a positive decision to improve standard design practice. This would ensure user testing with real users later on could focus more on the effectiveness of the solution in solving the problem, rather than small, quick-fix design issues.

Hi-Fidelity Prototyping

Focussing on user interactions & informed visual design decisions to promote an inclusive & personalised shopping experience.

After testing, I assessed and carefully applied feedback after considering the most simplest way to address usability issues. The initial user flow was translated into an interactive, hi-fi prototype focussing more on user interactions of specific UI elements, and visual design choices to enhance the user's experience rather than distract from the app's main purpose.

WeGlow Hi-Fidelity Prototype Screens

Design System

Incorporating inclusivity & accessibility in WeGlow's visual design.

When approaching visual design decision-making, it was important to restrain from following the crowd of traditional beauty e-commerce platforms & their oftentimes, monochromatic designs. After experimenting with typography and branding choices, decisions were made according to what represented the app's purpose best. The accent colour ‘Indian Red’ represents courage and warmth, helping portray an inclusive message for a culturally diverse audience. The use of standardised icons, colour contrast, an easily legible typeface ensures accessibility and visibility to optimise users’ experience when interacting with the interface.

WeGlow Design System

💡 Learnings: Creating a design system helped me learn the different atoms & elements that contribute to a cohesive & consistent UI system, from focussing on individual elements such as typography and colours, to bringing atoms together to form component states. Although in hindsight I can recognise slight visual design nits, in the future I would like further practice my abilities in creating & following a design system to ensure visual consistency.

User Testing & Key Findings

Through user testing, I learned that consumers needed a more simpler & efficient way to understand product information.

To test the 2nd iteration of the hi-fidelity prototype, 8 users (people of colour who shop online for cosmetics often) were recruited and requested to complete 5 scenario-based tasks relevant to app features to assess the user's decision-making, assumptions instinctive thoughts in attempting to achieve the required goal.

Significant Iterations

Guiding users to

Learnability & efficiency issue

When tasked to scan ingredients for risks (such as allergies), many overlooked the button and went straight to analysing ingredients. To streamline this process, the UI was simplified and the button was replaced with an accessible 'detective' button with a pop-up to describe its purpose in finding harmful ingredients.

"I did not see the scan at all. It didn't look like a button."

"I like the ratings key, but I think it's distracting from the rest of the screen. I would maybe tuck it away."

Avg. 0 clicks on scan button

Navigating between cross-platform reviews in one place

Memorability Issue

When users were asked to look at Youtube reviews for a specific concealer shade, they missed the top navigation bar & also could not distinguish the meaning behind "in-app" vs. "other" reviews. The review options was changed to match the user's line of sight.

"I couldn't find where to find the other reviews... having it all in one navigation bar may make it easier."

Avg. >50sec to find YouTube reviews.

💡 Learnings: Although I was able to recruit diverse testers to provide insightful feedback, in the future I would like to experiment with other recruitment methods such as digital tests (like using Loop11) to test the prototype globally with a more diverse group of users to maximise the feedback gained.

Success Metrics

WeGlow received an 84.4% (Excellent) SUS score from users, and I would look at the conversion rate & diversity of users as key success metrics.

The overall positive response from target users indicated that HappiLink would not only be an app students would try out, but want to use frequently to slowly get out of their shell and optimise their experience abroad in a culturally diverse environment. If HappiLink was to get developers on-board, we'd look at the following key success metrics:

Success Metrics

Conversion Rate & Add to Cart Rate

- Percentage (%) of users who purchase a recommended product
or add a product to cart
- Would indicate levels of user trust in product details & offerings to find a suitable match.

Click through rate of recommended products

- Measure effectiveness of recommendation engine and relevance of product suggestions
- High conversion rate = app is successfully matching users with products they are likely to purchase.

Customer Diversity & Satisfaction Score

- CPS & Net Promotor Score (NPS) to indicate satisfaction with product offerings and information.
- Assess user diversity & percentage (%) of different ethnic user groups to ensure diverse needs are met.

Accuracy

- Accuracy of shade match finder: Percentage (%) of users who only use shade finder once in one usage.
- Accuracy of ingredient breakdown feature: Monitor how often users utilise the ingredient breakdown & if ingredients are rated correctly

Final Prototype

Expert feedback was applied when designing a hi-fidelity interactive prototype of WeGlow.

WeGlow Final Hi-Fidelity User Flow

Pain Points vs Solution

How WeGlow addresses the core problem:

Instead of consumers, specifically people of colour, having to engage in extra time & research to find products that meet their needs (ethnic features, complexion, ingredient preferences & more), WeGlow streamlines this process by offering transparent details & cross-platform integration, prioritising inclusivity & user trust.

Retrospection

Key learnings I made along the way

There is a reason behind every design decision

Through this project, I learned that design not backed by research is simply guessing. It was imperative that each step of the design process, whether that be research to ideation to prototyping, that previous insights gained informed the next action. This helped me be more conscious of my process to ensure I was engaging in practices to enhance the effectiveness of the solution, rather than follow a template which may not be relevant to the deliverables.

Follow the rules for good visual design

In attempts to be innovative with visual design choices during the stage of hi-fidelity prototyping, it is more likely to make poor or unsuitable visual design choices that may hinder a user's interaction and experience using the product. Starting with the basics of design principles can help build a foundation rather than starting with complex ideas first.

OVERVIEW

ROLE

TEAM MEMBERS

DURATION

ACHIEVEMENTS

💡 Solution

Reducing the time taken to search for suitable products through a personalised product recommendations dashboard.

Offering users relevant cross-platform product reviews to aid decision-making.

Breaking down and assessing product ingredients to prioritise user trust & safety.

Helping users find products with an accurate complexion match.

📌 The Problem

Discovery

🙁 Current user satisfaction

3x

📱 Projecting beauty standards

3.2b

👥 Lack of representation

13%

💰 Unequal revenue

2.5%

Research Approach

Research Methods

💻 Explorative Questionnaire

💬 Semi-structured user interviews

🔍 Online ethnography

Data Synthesis

92

Problem notes

12

Affinity notes/problem groups

3

Key insights

Key Insights

Time & effort-intensive

“You might find products that match your skin tone, but what if the ingredients aren't right for your skin? Or it’s too pricey or not available. This just lengthens the process of research...” ‍- Saloni, Indian, 22

- 73% of consumers take close over an hour to find suitable products, and 62% are rarely to never recommended suitable products.

Lack of transparency & minimal product information

“Don't shop online, colours don't match by a mile.” - Online ethnographic source

“I bought over $200 worth of moisturising products and had an allergic reaction.” - Su, Thai, 19

- 80% of consumers find it difficult to assess whether a product matches their complexion, and 67% find it difficult to find reviews from people with similar needs as them.

Prioritising trust & inclusivity

“I do know many products are advertised as brightening, but there are some... micro-aggressions or colourist tendencies, especially if it’s targeted towards people with dark skin.” - Pranatsama, Thai, 20

- 57% of consumers are concerned with the availability of products online that are suitable for their skin type and tone.

💡 The Opportunity

Concept Sketch & Site Map

Lo-fi Sketches

Wireflow

1.

Pain Point Addressed:

2.

Pain Point Addressed:

3.

Pain Point Addressed:

Additional Wireframes

Wireframe Testing & Key Iterations

🤝

Help & documentation

👀

Visibility of system status

🚨

Help users recognise, diagnose & recover from errors

Reducing users' cognitive load when analysing product recommendations

Help & Documentation, Recognition Rather than Recall

Highlighting critical product information

Visibility of System Status

Enhancing user feedback & visibility of important actions

Help & documentation

Helping users recover from errors

Help users recognise, diagnose & recover from errors, visibility of system status

Hi-Fidelity Prototyping

Design System

User Testing & Key Findings

Guiding users to

Learnability & efficiency issue

Navigating between cross-platform reviews in one place

Memorability Issue

Success Metrics

Conversion Rate & Add to Cart Rate

Click through rate of recommended products

Customer Diversity & Satisfaction Score

“You might find products that match your skin tone, but what if the ingredients aren't right for your skin? Or it’s too pricey or not available. This just lengthens the process of research...”
‍- Saloni, Indian, 22