The Ordinary.
Built an app for The Ordinary, generating 1.2K+ user views to strengthen online presence
Built an app for The Ordinary, generating 1.2K+ user views to strengthen online presence
Built an app for The Ordinary, generating 1.2K+ user views to strengthen online presence
Built an app for The Ordinary, generating 1.2K+ user views to strengthen online presence
Project
Project
Academic Project
Academic Project
Duration
Duration
February - April 2023, 3 months
February - April 2023, 3 months
My Role
My Role
Solo Designer
UX Research, Wireframing, UI Desgin, Prototyping
Solo Designer
UX Research, Wireframing, UI Desgin, Prototyping
About the Project
About the Project
The objective of this user experience case study is to evaluate the feasibility of developing a mobile application for The Ordinary skincare brand. The Ordinary currently only has a website, so developing a mobile application might offer customers more convenience and potentially increase purchases.
The objective of this user experience case study is to evaluate the feasibility of developing a mobile application for The Ordinary skincare brand. The Ordinary currently only has a website, so developing a mobile application might offer customers more convenience and potentially increase purchases.
The objective of this user experience case study is to evaluate the feasibility of developing a mobile application for The Ordinary skincare brand. The Ordinary currently only has a website, so developing a mobile application might offer customers more convenience and potentially increase purchases.
Our
Goal
Our
Goal
Our
Goal
Our Goal
The case study aims to develop a user experience that matches The Ordinary's brand identity and satisfies the expectations of its target audience. Developing a user-friendly and efficient mobile application that ultimately improves consumer satisfaction, brand awareness, and loyalty.
The case study aims to develop a user experience that matches The Ordinary's brand identity and satisfies the expectations of its target audience. Developing a user-friendly and efficient mobile application that ultimately improves consumer satisfaction, brand awareness, and loyalty.
The case study aims to develop a user experience that matches The Ordinary's brand identity and satisfies the expectations of its target audience. Developing a user-friendly and efficient mobile application that ultimately improves consumer satisfaction, brand awareness, and loyalty.
The case study aims to develop a user experience that matches The Ordinary's brand identity and satisfies the expectations of its target audience. Developing a user-friendly and efficient mobile application that ultimately improves consumer satisfaction, brand awareness, and loyalty.
Client
Problem
Client
Problem
Client
Problem
Client Problem
As more people rely on their mobile devices for online shopping, hence The Ordinary's current lack of a mobile application is a significant issue that hinders its ability to reach and serve its customers efficiently.
As more people rely on their mobile devices for online shopping, hence The Ordinary's current lack of a mobile application is a significant issue that hinders its ability to reach and serve its customers efficiently.
As more people rely on their mobile devices for online shopping, hence The Ordinary's current lack of a mobile application is a significant issue that hinders its ability to reach and serve its customers efficiently.
As more people rely on their mobile devices for online shopping, hence The Ordinary's current lack of a mobile application is a significant issue that hinders its ability to reach and serve its customers efficiently.
Project
Vision
Project
Vision
Project
Vision
Project Vision
My goal is to design a mobile app that caters to the needs and preferences of The Ordinary's target audience. Users should be able to access skincare information, product details, and purchase options easily through the app.
My goal is to design a mobile app that caters to the needs and preferences of The Ordinary's target audience. Users should be able to access skincare information, product details, and purchase options easily through the app.
My goal is to design a mobile app that caters to the needs and preferences of The Ordinary's target audience. Users should be able to access skincare information, product details, and purchase options easily through the app.
My goal is to design a mobile app that caters to the needs and preferences of The Ordinary's target audience. Users should be able to access skincare information, product details, and purchase options easily through the app.
Anticipated Aims/
Goals/Ideas
Anticipated Aims/
Goals/Ideas
Anticipated Aims/
Goals/Ideas
Anticipated Aims/Goals/Ideas
• Develop a mobile app that reflects The Ordinary's brand identity and values
• Provide an easy-to-use interface that educates customers about skincare routines and product ingredients
• Ensure that the app offers a seamless shopping experience for customers
• Develop a mobile app that reflects The Ordinary's brand identity and values
• Provide an easy-to-use interface that educates customers about skincare routines and product ingredients
• Ensure that the app offers a seamless shopping experience for customers
Grey Areas/
Uncertainties
Grey Areas/
Uncertainties
Grey Areas/
Uncertainties
Grey Areas/Uncertainties
• Determining the right balance between informative content and simplified user flow
• Identifying the most effective features to include in the app
• Ensuring the app remains up-to-date with the latest skincare trends and scientific research
• Determining the right balance between informative content and simplified user flow
• Identifying the most effective features to include in the app
• Ensuring the app remains up-to-date with the latest skincare trends and scientific research
Measurements
of Success
Measurements
of Success
Measurements
of Success
Measurements of Success
• Customer retention and engagement rates
• Number of downloads and active users
• Feedback from customers through ratings and reviews
• Sales conversion rates and revenue generated through the app
• Customer retention and engagement rates
• Number of downloads and active users
• Feedback from customers through ratings and reviews
• Sales conversion rates and revenue generated through the app
The
Client
The
Client
The
Client
Project Vision
The Ordinary is a skincare brand that offers clinically proven and affordable products with a focus on transparency and honesty.
The Ordinary is a skincare brand that offers clinically proven and affordable products with a focus on transparency and honesty.
The Ordinary is a skincare brand that offers clinically proven and affordable products with a focus on transparency and honesty.
The Ordinary is a skincare brand that offers clinically proven and affordable products with a focus on transparency and honesty.
Research
Research
Research
Understand the user
User
Research
Summary
User
Research
Summary
User
Research
Summary
User Research Summary
To obtain insight into their consumers' behaviors, needs, and preferences by better understanding users. I had conducted user research and compared them with the competition to comprehend competitors' strengths and weaknesses and develop strategies to improve user experiences,
To obtain insight into their consumers' behaviors, needs, and preferences by better understanding users. I had conducted user research and compared them with the competition to comprehend competitors' strengths and weaknesses and develop strategies to improve user experiences,
Competitive
Analysis
Competitive
Analysis
Competitive
Analysis
Competitive Analysis
I gathered a Competitive Analysis with my peers on Miro to consolidate our findings and identify key points of agreement. Then, narrow down the scope by identifying the top 4 competitors through respondent feedback for effective follow-up analysis.
I gathered a Competitive Analysis with my peers on Miro to consolidate our findings and identify key points of agreement. Then, narrow down the scope by identifying the top 4 competitors through respondent feedback for effective follow-up analysis.
Analyzing the similarities and differences between The Ordinary and its competitors could provide valuable insights, and identify areas for improvement and opportunities to stand out from the competition.
Analyzing the similarities and differences between The Ordinary and its competitors could provide valuable insights, and identify areas for improvement and opportunities to stand out from the competition.
Competitive
Matrix
Competitive
Matrix
Competitive
Matrix
Competitive Analysis
Based on the top 4 competitors, the features of each element are evaluated against set standards, which simplifies the identification of pros and cons and speeds up the decision-making process.
Based on the top 4 competitors, the features of each element are evaluated against set standards, which simplifies the identification of pros and cons and speeds up the decision-making process.
User
Persona
User
Persona
User
Persona
User Persona
This persona is created based on demographic and behavioral data and represents a typical member of the target audience.
This persona is created based on demographic and behavioral data and represents a typical member of the target audience.
Empathy
Map
Empathy
Map
Empathy
Map
Empathy Map
In order to further understand the users on a deeper level, I created an empathy map to design a more user-centric and effective product.
In order to further understand the users on a deeper level, I created an empathy map to design a more user-centric and effective product.
Initial
User Flow
Initial
User Flow
Initial
User Flow
Initial User Flow
Based on the persona, I created a user flow to map out the user journeys starting from the Home Page. And get feedback from the potential user.
Based on the persona, I created a user flow to map out the user journeys starting from the Home Page. And get feedback from the potential user.
Task ( First Version ) :
Learn about skincare routines and seek affordable solutions
Task ( First Version ) :
Learn about skincare routines and seek affordable solutions
Updated
User Flow
Updated
User Flow
Updated
User Flow
Updated User Flow
By combining the suggestions and the empathy map, I improved the user flow before moving on to the wireframes.
By combining the suggestions and the empathy map, I improved the user flow before moving on to the wireframes.
Task ( Updated Version) :
Learn about skincare routines and seek affordable solutions
Task ( Updated Version) :
Learn about skincare routines and seek affordable solutions
User
Journey
User
Journey
User
Journey
User Journey
By combining the suggestions and the empathy map, I improved the user flow before moving on to the wireframes.
By combining the suggestions and the empathy map, I improved the user flow before moving on to the wireframes.
Visual
Visual
Visual
Design and Prototype
Design
Process
Summary
Design
Process
Summary
Design
Process
Summary
Design Process Summary
After conducting user research I started the design phase of the process.
After conducting user research I started the design phase of the process.
Sketches
Sketches
Sketches
Sketches
I quickly sketched multiple versions of the home screen to explore different options to generate different ideas for wireframes.
I quickly sketched multiple versions of the home screen to explore different options to generate different ideas for wireframes.
A/B
Testing
A/B
Testing
A/B
Testing
A/B Testing
I chose two sketches for A/B testing to gather user feedback and quantitative data to inform the final design decision. I conducted A/B testing with three testers.
I chose two sketches for A/B testing to gather user feedback and quantitative data to inform the final design decision. I conducted A/B testing with three testers.
Solution
Solution
Solution
Solution
I incorporated the needs and preferences of potential users into the app I created by conducting research on them.
I incorporated the needs and preferences of potential users into the app I created by conducting research on them.
What I can do?
What I can do?
What I can do?
What I can do?
• Design a clean and minimalist app that reflects the brand's focus on simplicity and transparency.
• Providing an easy-to-use interface that educates customers about skincare routines and product ingredients.
• Design a user-friendly interface that makes it easy for customers to browse products, read reviews, and make purchases.
• Offer a streamlined user flow that guides customers through the shopping process, while also providing educational content that explains the science behind skincare and product ingredients.
• Design a clean and minimalist app that reflects the brand's focus on simplicity and transparency.
• Providing an easy-to-use interface that educates customers about skincare routines and product ingredients.
• Design a user-friendly interface that makes it easy for customers to browse products, read reviews, and make purchases.
• Offer a streamlined user flow that guides customers through the shopping process, while also providing educational content that explains the science behind skincare and product ingredients.
Low-fidelity
Wireframes
Low-fidelity
Wireframes
Low-fidelity
Wireframes
Low-fidelity Wireframes
I utilized the results of the A/B testing to develop wireframes based on the B version.
I utilized the results of the A/B testing to develop wireframes based on the B version.
Style
Guide
Style
Guide
Style
Guide
Style Guide
I rely on The Ordinary's style guide for visual design, ensuring a consistent and cohesive aesthetic.
I rely on The Ordinary's style guide for visual design, ensuring a consistent and cohesive aesthetic.
Color
Color
Color
Color
Typography
Typography
Typography
Typography
Medium-fidelity
Wireframes
Medium-fidelity
Wireframes
Medium-fidelity
Wireframes
Medium-fidelity Wireframes
I created wireframe in Figma to outline the general idea of how the product will look.
I created wireframe in Figma to outline the general idea of how the product will look.
High-fidelity
Wireframes
High-fidelity
Wireframes
High-fidelity
Wireframes
Medium-fidelity Wireframes
I focused on making the visual design neat and clean for a better experience.
Here, I present high-fidelity wireframes based on the user flow identified in the previous research phase.
I focused on making the visual design neat and clean for a better experience.
Here, I present high-fidelity wireframes based on the user flow identified in the previous research phase.
