All Ours Beauty Mobile App
The Future of Inclusive Beauty using AR | AI
Surprise, the beauty industry lacks representation and due to being oversaturated, it’s extremely overwhelming for most.
​
In my Advanced UX class in Spring 2024, my team and I were tasked to design and prototype innovative user-centered solutions to real-world problems and develop an application.
Project Overview
​CHALLENGE
To design a functional app that solves real-world problems. There is a lack of representation for people of color in the beauty industry leading to difficulties for consumers in finding suitable products tailored for them and a simple experience for each consumer online shopping.
MPF (Messaging & Positioning Framework)
Positioned "All Ours" as a tech-driven, Inclusive beauty solution using AI/AR personalization.
​
Leveraged user research to refine value propositions for different audience segments.
​
Conducted A/B testing on messaging, leading to an 88% positive user feedback rating.
ROLE
UX | UI Designer | Product Design
User Research | Visual Design
Prototyping | Testing
TIME
8 weeks
TASK
To design and prototype innovative user-centered solutions to real-world problems and develop an application
TOOLS
Figma
GTM (Go-To-Market Strategy)
Defined targeted outreach strategies to expand market reach.
​
Collaborated cross-functionally with design and engineering to ensure seamless UX.
​
Optimized user flow, improving engagement and retention by 15%.
TEAM
Kevin Laird | Sam Morr | Jebby Fronda
* My contributions included the: Inspiration, research, persona, journey, user flows, sketches, lo-fi wireframes and prototypes.
My Process
.jpg)
EMPATHIZE
The Why (Storytelling)
Inspired by my mother's struggles to find suitable beauty products as a Latina woman, All Ours was created to address the lack of representation and tailored experiences for people of color in the beauty industry.
The app aims to bridge this gap by offering a platform that simplifies product discovery, promotes informed choices, and celebrates diversity.
Through my research, I wanted to:
-
Understand the need for this solution in the Beauty Industry
-
Identify All Ours target market
-
Identify the need for All Ours through the consumer using data and personas
-
Learn about the current trends of AR/AI and how it’s being used in businesses
-
Understand the experiences people have when beauty shopping
-
Discover the goals, needs, motivations, and frustrations of All Ours users
Through my Research
​
The average woman will spend $20,466.72 on skincare in her adult lifetime.
Black consumers are responsible for 11.1% of total beauty spending.
More than half (64%) of people with dark brown or black skin surveyed said they do not believe that the beauty industry does enough to meet the needs of people of all skin tones.
Black consumers show an affinity and preference for Black beauty brands and are 2.2 times as likely to conclude that products from those brands will work for them. However, only 4 to 7 percent of beauty brands carried by specialty beauty stores, drugstores, grocery stores, and department stores are Black brands.
When stores do carry products suitable for melanin skin or afro-texture hair, oftentimes, brands are out of stock, and what’s in stock is often poorly placed on shelves.
​
Sources: McKinsey & Company, SWNS Research
Persona
Qualitative Studies
The team interviewed 8 users who checked the persona of Janelle. Through our conversations with them, we found out that the best parts of the current version are
1.) the branding colors
2.) the brand values and goal
3.) the current features
​
In terms of considerations, they mentioned points on
1.) the quizzes being too tedious and felt like a blockage to get to the Home-Screen
2.) too much content in the initial point of onboarding
3.) wanting a checkout process and easy experience
DEFINE & IDEATE
Defining the Problems
Now with my understanding of All Ours Beauty users, I wanted to use my research to develop a problem statement: People of color struggle to find beauty products that match their skin tone and hair type, leading to frustration and a feeling of hopelessness.
Storyboard and Journey
We used a storyboard and journey map to understand Janelle's experience with the app. The storyboard showed her interactions and pain points, while the journey map gave us insights into her motivations and expectations. This helped us improve the app's interface and tailor its features to better meet her needs.
Brainstorming
My team and I started brainstorming the best features for All Ours that aligns with our users problems and providing solutions. From app features to beauty filters, to include for not only Janelle, but every person of color seeking diverse products and an easier way to find them while supporting minority owned brands.
User Flows
I created a user flow to understand Janelle's journey in the app The flow changed after feedback and is reflected in the prototype.
Lofi Wireframe Sketches
Using my understanding of the user, our goals, the architecture, and the user’s interaction with the app, We worked on making informed decisions on how to design All Ours screens by sketching low-fidelity wireframes.
​​
Each page changed since getting feedback from our users and colleagues. The changes are reflected in our high fidelity prototypes.
PROTOTYPE & TESTING
Sketches to Prototype
Taking our sketches, we developed the mid fidelity wireframes. It helped us focus on the layout, structure, and core functionality of the design. Users can provide valuable feedback on the usability and effectiveness of the design without being influenced by the visual aesthetics.They provided a clear visual representation of the design concept and was then used to gather feedback and align expectations before moving to the next stage of development, our high fi's.
Mid Fidelity Prototype
Usability Testing
The goal of our usability testing was to identify any pain points users encountered while navigating the app to gather feedback on the overall intuitiveness. We conducted moderated remote usability testing with 8 participants who matched our target user demographics. We asked them to complete a series of tasks, such as going through the quizzes, searching for a moisturizer, and adding to wishlist. We wrote down and implemented the feedback reflecting in our high fidelity prototype.
Overview
-
Method: Remote, moderated usability testing (Think Aloud)
-
Participants: 8
-
Age range: Millennials
-
Average Time: 7.8 minutes
-
Task Completion Rate: 87.5%
-
Error-Free Rate: 75%
​
Overall, the testing showed positive results, but there were distinct areas in which users did face difficulties and areas in which we decided to add features like AR and AI to help our users with their end goal, finding products easily and for their skin type/needs.
Priority Revisions
We improved user experience by incorporating feedback and removing long quizzes. We added Camera and Voice Icon tool for efficient product recommendations and a shade try-on feature We also reduced text overload and improved navigation by removing the premium feature.
UI DESIGN
Branding
Mood board
Logo Design
Style Tile
Following the development of the All Ours logo, I focused on crafting a comprehensive style tile to solidify the brand's visual identity. The design is centered on balancing inclusivity and empowerment while preserving All Ours' authentic tone.
By selecting an accessible yet luxurious typeface and a refined, harmonious color palette, I created a visual language that is both approachable and sophisticated. This approach effectively captures the brand's essence and sets the stage for a cohesive brand experience.
All Ours
Typography
Source Sans Pro and Marcellus
The typography for All Ours will be using Source Sans Pro for text and Marcellus for Titles and navigation. Source is a great font due to readability and legibility. Both fonts give a modern feel.
Titles
Marcellus. Regular. 32pt.
Title 2
Marcellus. Regular. 20pt.
Body
Source Sans Pro. Regular. 16pt
Small
Source Sans Pro. Regular. 14pt
Very Small
Source Sans Pro. Regular. 12pt
Final Prototype
Taking my revised wireframes, we now worked on creating final, high fidelity wireframes and created a final prototype. With All Ours branding defined, I worked on incorporating our identity to craft the visual design of the new application.
Welcome to All Ours.
Reflection
& Next Steps
1. Re-Test
I would want to test my design again to ensure the design’s usability after continuous user testings
3. Product Launch
After the app has been built, we will introduce the new product to the market
2. Collaboration
After validating the design, I would collaborate with developers or other stakeholders to work on developing the app
4. Add Features
I would work on updating priorities and adding new features to the app post launch
As a woman of color, I've personally experienced the frustrations of the beauty product shopping experience. This shared pain point among many women and people of color underscored the urgent need for a solution. Our research confirmed this, as every interviewee described similar challenges.
​
Collaborating with my team to build this app from scratch was incredibly rewarding. Incorporating cutting-edge technologies like AR and AI was both exciting and challenging. I've gained a deep appreciation for the rapid advancements in technology and its potential to revolutionize industries.
My team and I won the audience award for All Ours Beauty
Renz
If a camera can help recommend me products with just a hair scan, It would totally make my life easier!
Nicole
When I need to look for a product, I want to do it all in one app. Like on Tiktok, I discover products there and then just go to Tiktok Shop to purchase the items from the brands themselves!
Zee
I always purchase after seeing positive reviews from people with my type of skin. I appreciate that this app helps me do that in a one stop shop.