NaturCycle
UX/UI Design
2023
Methods:
User Research, Wireframe, UI Design,Usability Testing
Toolkit:
Figma, Photoshop
NaturCycle
UX/UI Design
2023
Methods:
User Research, Wireframe, UI Design,Usability Testing
Toolkit:
Figma, Photoshop
NaturCycle
UX/UI Design
2023
Methods:
User Research, Wireframe, UI Design,Usability Testing
Toolkit:
Figma, Photoshop
Project Overview
Project Overview
Creating a user-friendly app for NaturCycle, a new cosmetic company known for it's sustainable and recycled products, the focus was on crafting an intuitive app. This involved steps from conceptualization to execution, aiming to offer insights and solutions for an effective digital presence in the beauty industry.
Creating a user-friendly app for NaturCycle, a new cosmetic company known for it's sustainable and recycled products, the focus was on crafting an intuitive app. This involved steps from conceptualization to execution, aiming to offer insights and solutions for an effective digital presence in the beauty industry.
Client Problem
Client Problem
NaturCycle would like to create an app to create a strong brand presence while communicating its core values, unique selling points, and commitment to sustainability.
NaturCycle would like to create an app to create a strong brand presence while communicating its core values, unique selling points, and commitment to sustainability.
Goals
Goals
The current cosmetic market is extremely saturated. I aim to create a sleek and modern user-friendly app based on thorough research on consumers' wants and needs and the clients' requested features.
The current cosmetic market is extremely saturated. I aim to create a sleek and modern user-friendly app based on thorough research on consumers' wants and needs and the clients' requested features.
USER RESEARCH
USER RESEARCH
NaturCycle
NaturCycle
NaturCycle is a cosmetic brand that recycles and harnesses human waste to create eco-conscious and sustainable beauty/skincare products.
NaturCycle is a cosmetic brand that recycles and harnesses human waste to create eco-conscious and sustainable beauty/skincare products.
Comparative Matrix
Comparative Matrix
NaturCycle's biggest stand-out factors compared to its competitors are its virtual try-on feature, donation impact tracking, and skin analysis tool.stand-out
NaturCycle's biggest stand-out factors compared to its competitors are its virtual try-on feature, donation impact tracking, and skin analysis tool.stand-out
Qualitative Persona and Empathy Map
Qualitative Persona and Empathy Map
I created two different personas and empathy maps for this project. One is qualitative, based on a user interview, and the other is quantitative based on secondary research.,
I created two different personas and empathy maps for this project. One is qualitative, based on a user interview, and the other is quantitative based on secondary research.,
Quantitative Persona and Empathy Map
Quantitative Persona and Empathy Map
IDEATE
IDEATE
User flow
User flow
After completing the research, I mapped out an assumptive user flow, highlighting NaturCycle's most significant stand-out factors.Then, I completed a usability test with a peer to arrive at the final validated user.
After completing the research, I mapped out an assumptive user flow, highlighting NaturCycle's most significant stand-out factors.Then, I completed a usability test with a peer to arrive at the final validated user.
Assumptive Flow
Assumptive Flow
Validated Flow
Validated Flow
Journey Map
After Validating my flow, I journey mapped Sophia Yeon, my qualitative personas, trip through the flow all the way from joining the app to making her first purchase
TESTING
TESTING
Low-Fidelity Wireframe
Low-Fidelity Wireframe
I sketched out some possible homepage wireframes, then narrowed down two of my favourites to refine and A/B test among 5 peers.
I sketched out some possible homepage wireframes, then narrowed down two of my favourites to refine and A/B test among 5 peers.
A/B Testing
A/B Testing
Feedback was collected from 5 peers in the Interactive Media Design program. Some key findings from the A/B test: 4/5 peers preferred A; peers felt that Sketch B felt old and too professional and that the carousel in Sketch A was very modern and a great attention grabber.
Feedback was collected from 5 peers in the Interactive Media Design program. Some key findings from the A/B test: 4/5 peers preferred A; peers felt that Sketch B felt old and too professional and that the carousel in Sketch A was very modern and a great attention grabber.
PROTOTYPE
PROTOTYPE
Low-Fidelity Wireframe
Low-Fidelity Wireframe
Refined sketches of user flow
Refined sketches of user flow
Mid-Fidelity Wireframe
Mid-Fidelity Wireframe
Hi-Fidelity Prototype
Hi-Fidelity Prototype
Final prototype of the flow
Final prototype of the flow
REFLECTION
REFLECTION
Learning Outcomes
Learning Outcomes
This is my first time completing a UX/UI case study from start to finish, and I have learned a lot.
One key takeaway I learned was the importance of research in the process. Digging deep into pain points, empathy maps, and personas has helped me understand the significance of empathy in design.
Prototyping was another process in which I grew. Before this case study, I would design UI on Figma without the rationale behind the designs, but after going through stages of Wireframing, A/B Testing, Low-Fi, Mid-Fi, and Hi-fi prototyping, I have learned a lot. Wireframing and Low-fidelity prototyping taught me the importance of ideation and rapid iteration, mid-fi taught me how to produce a more detailed yet flexible approach, and hi-fi taught me to strive for pixel-perfect precision.
This is my first time completing a UX/UI case study from start to finish, and I have learned a lot.
One key takeaway I learned was the importance of research in the process. Digging deep into pain points, empathy maps, and personas has helped me understand the significance of empathy in design.
Prototyping was another process in which I grew. Before this case study, I would design UI on Figma without the rationale behind the designs, but after going through stages of Wireframing, A/B Testing, Low-Fi, Mid-Fi, and Hi-fi prototyping, I have learned a lot. Wireframing and Low-fidelity prototyping taught me the importance of ideation and rapid iteration, mid-fi taught me how to produce a more detailed yet flexible approach, and hi-fi taught me to strive for pixel-perfect precision.
This is the end of the project, but you can also check out:
This is the end of the project, but you can also check out:
