CelestiaSkin
clean skincare
what is celestiaSkin?
CelestiaSkin is a ​responsive website prototype- an Indian skincare brand introducing a line of clean, sustainable skincare products gentle on the skin, minimalist in design, and accessible to all.
​
One quote from peer feedback:
“The website was easy and simple to use with only necessary information”
My Roles & Responsibilities
•Conduct user research, define the problem and provide insights
•Define personas, user journeys, empathy maps, and user flows
•Visual design of low-fi and high-fi wireframes, prototypes, and user testing
Context
CelestiaSkin needs to be accessed from any device at customers convince. It focuses on minimal sensory stimulation.
Duration
October 2023 - November 2023
Tools
Figma, Google Docs,
Unsplash, Excel, google scholar
the problem
The consumers are overwhelmed by choices that are either unaffordability or lack accessibility. There is a need for a accessible platform with minimalism and consumer education at its core.
​
People going through skincare websites often times feel they are bombarded with a lot of information leaving them more confused and indecisive than they already where.​
​
target audience
A specific group of consumers identified as the intended recipients of this product they are defined by shared characteristics such as age, gender, income, interests, behaviors, or other demographics. The website is tailored to meet their unique needs, preferences, and expectations of the specific group.
​
Demographics​
Age: 13 and above
Location: India
Gender: all
the goal
A responsive website with minimalism and consumer education at it's core
One, to let customers access our website from their choice of device, letting them have accessibility and location freedom.
Two, to provide customers with a transparency in product formulation.
qualitative interviews
Understanding user needs and requirements
​
Conduct interviews with stakeholders and spoke to 5 different end users to better understand the user problem.​
A snippet of user interview questions
interview analysis
Grouped together similar findings to identify patterns and trends in the data.
​
This process enabled me to develop key findings for the improvement of user experience of the app.​
A snippet of inference derived
interview insights
These are some of the key pain points
1. lack of detailed descriptions, ingredient lists, and usage instructions can leave customers confused about the effectiveness and suitability of the products
2. users feel overwhelmed and frustrated when faced with complicated terminology without clear explanations
4. many users browse and shop on their mobile devices, a lack of mobile responsiveness in the website design can be frustrating.
3. website with a confusing or cluttered layout can frustrate users trying to find specific products or information.
competitor analysis
Analyzed 3 of the Indian competitors
​
To understand the competitors and the Indian market it was crucial to analyze their product, what they offer and their unique selling point. This helped me understand what I could do differently that can help elevate the experience.
A snippet of competitor analysis
_edited.jpg)
use cases
Forming user stories to help simplify and understand the requirements
​
Next, I worked on my use cases and user stories. It helped me understand what goals the user needs to achieve. It also helped me design primarily of my target audience keeping the user front and center.
User stories used to capture user requirements (affordability, flexibility of device, ingredients used detail) and this guided the development process that aligns with user needs and expectations as it is user centered approach.
USER STORIES
User persona is a semi-fictional character that helped me empathize with the end users. Here arjun a high schooler wants a affordable skincare product without compromising on the quality.
USER PERSONA
USER STORYBOARD
It narrates the user's journey, including actions, thoughts, and emotions, in a story-like format. This tool helped me visualize and better understand the user's perspective and context, leading to more empathetic and effective design solutions.
Helped me optimize the user experience by identifying areas for improvement and ensuring a smooth and satisfying journey.
USER JOURNEY MAP
_edited.jpg)
DESIGN PROCESS
MOBILE FIRST- SKETCHING
SKETCHING
Sketching is the easiest and fastest way to visualize my ideas.
I do applied mobile first philosophy by drawing the mobile version on paper and later adapting it to fit larger screens like tablet and computer.
It’s very useful for brainstorming and as it helps me to visualize a broad range of design solutions before deciding which one to go with.
PROGRESSIVE ENHANCEMENT-WIREFRAMING
After dozens of iterations, these are the wireframes that best represented user flow and met user needs.
I practiced progressive enhancement (mobile first) for wireframing by designing for the smallest and most basic version of the product later creating for tablet and PC.
Next Billion Users who are starting to use the internet for the first time, often access through mobile devices.
CREATING COMPONENTS FOR- DESIGN LIBRARY
I started creating components needed based on the wireframes i have drawn. This helps me have consistency and hierarchy across all screens and saved time. I start documenting their usage: do's and don'ts, different states of their instances. This helps me build my design system for the mobile app parallelly and makes my High fidelity mockup process more organized and time saving.
LOW FIDELITY PROTOTYPING
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was buying a skincare product, so the prototype could be used in a usability study.
USABILITY STUDY FINDINGS
One more detail about the skincare products and usage guidance. Two option to increase or decrease the quantity of the product
_edited_edited.jpg)
ACCESSIBILITY CONSIDERATIONS
1. The website design and layout are kept minimal with only two primary colors black background and white text.
2. primary colors met WCAG AA Compliance and provide positive emotional experience enhancing user satisfaction and loyalty.
#FFFFFF (white), #00FF00 (green), #FFC0CB (pink) and #CCCCCC (grey) meet or exceed the 4.5:1 contrast ratio on a #000000 (black) background
3. I am using only one typefaces: Inter establishing a clear visual hierarchy to guide users through the interface.
Along with visual cues like size, color, and contrast create a natural flow of information.
HIGH FIDELITY PROTOTYPEING
I conducted two usability study based on the High fidelity prototype. Based on the insights, I applied the design changes, including a clear navigation system, a more straightforward flow, quantity increase/ decrease button and 'my favorite's' button on top left.
View prototype
Walkthrough of main UX changes
finding 1
Minimalistic Homepage
​
The website provides a simple and minimalistic layout.
​
Starting with a hero image- a video of the new product that has been launched.
​
The next layout is 'Discover' where the customers can navigate through all products available.
​
Following it I provided two section 'Our Favorite's' and 'New products' where customer favorite product and new product launched are displayed.
​
The customer scrolls to the 'About us' section to know about the company.
​
Next is the 'Gift guide' were products are suggested for gifting for different occasions.
​
The last section of the homepage is the 'sign-up' section where customer can provide us with their email for newsletters and latest offers. This was customer data can be collected
finding 2
Individual product display: Grid 1
​
A simple layout with multiple product image carousel for customer's better understanding.
​
It is provided with a description, rating and price along with 'add to cart' or 'buy now' option.
finding 3
Individual product display: Grid 2
There are three parts to the grid. First being key ingredients, here the list of ingredients along with what it does and why it is added are provided for the customers knowledge.
Second being benefits, this section talks about how this product will add benefit to the customer and what results the customer can expect.
Third is 'How to use it?' section where the customers are provided with a list of crisp instructions on how to use a particular product for the best results.
finding 4
Sign-Up Page​
​
This section will help customers get the latest updates on exclusive offers, new product launch and articles relating to skincare will be provided.
IMPACT
In this study, I aimed to address common issues faced by users and evaluate the impact of UX design on their mood and decision-making process.
Through conducting this research and design, I gained a deeper understanding of how user experience can significantly influence a user’s emotions and choices.
WHAT I LEARNT
I have gained valuable insights and knowledge through the design process. Some of the key things I have learned include:
•Understanding user needs
•Importance of simplicity
•Accessibility considerations
•Understanding and implementing user feedback
•Manage information to not overwhelm the user