The Project
SkinLine is a global skincare community mobile application that I created as a part of my UI/UX specialization course by CalArts through Coursera. As the sole UX designer, I designed this project from inception to final design through research, ideation and UX design principles.
Methods: Surveys, Card Sort, Site Mapping, Wireframing, Prototyping
Tools: Adobe Photoshop, Figma
Context
With the rapid growth of the skincare industry over the years, innumerable brands offering a plethora of products have popped up. With the increase in awareness of skincare, consumers get confused about which product is best for them.
I was tasked with providing a mobile application that would build a global skincare community where people can review products and interact to share their experiences.
The Process
Research
Competitor Analysis
To get a better understanding of the competitor landscape, I conducted analyses on the currently available apps, and found that while some provided a community feature, it had limited interaction between users. There was no categorization of posts which could confuse beginners and people looking at a specific skin concern.
Surveys
To understand how people currently choose their products, I surveyed family and friends of a wide age range. The goal was to gauge their awareness about such applications and how they made their decisions regarding skincare products. This gave me an insight into how a person beginning skincare to someone who is fond of it would use and perceive the application.
Key Findings & Insights
The surveys and interviews helped me understand more about the perception of the user, their needs and requirements.
1. While the primary function of the app is to build a global community, it also requires a vast product library to allow users to browse products freely. Affiliate purchase links would also be included to help the user buy authentic products.
2. Reviews without categorization and filters can overwhelm a person beginning to understand skincare. To aid this problem, the posts and reviews can be filtered as per the user's skin type and concern, to discover products suitable for them.
User Stories
Finally, I created user stories that I could use to better understand the potential needs of people, to help decide functional requirements for SkinLine, and that I could refer back to throughout the project to keep focused.
Define
Problem Statement
People interested in skincare from beginners to enthusiasts, need a global community where they can review and browse products and share personal experiences.
User Personas
Since the app focuses on the needs of users of varying knowledge and experience of skincare, I created user personas- for someone wanting to know more about skincare to an enthusiast. I revisited these user personas often in order to remind myself of the needs and frustrations of my users, and to maintain a user-centric focus for the duration of the project.
Minimum Viable Product (MVP)
I gathered requirements to define what features I needed to design for my app. I developed key user stories (from my personas) and minimum viable products(MVPs).
The MVPs would allow me to quickly test to my initial designs on users, giving me valuable feedback early in the design process and to address any concerns right from the beginning.
MVP Needs:
MVP Need #1: I want to see posts and reviews according to my skin type and concerns
Feature Requirements: Filter function for skin type, skin concern, product type
MVP Need #2: When using this app, I want to be able to make my own profile where I can input my skin type and concerns to see related products
Feature Requirements: Personal profile, Recommended posts and products
MVP Need #3: When using the app, I want to explore famous skincare influencers and their product recommendations
Feature Requirements: Skincare influencers profiles, product recommendations, skincare routines
MVP Need #4: I want to purchase a specific product but I don’t know authentic sites to buy it from
Feature Requirements: Purchase links to reliable sites
Sitemap
I created a sitemap and flow diagram keeping in mind the functional requirements and conducted a card sort to gain insight as to how the users might expect the content to be organised and displayed, and used the results to create a sitemap.
Ideate
Low Fidelity Wireframes
Using my user persona, sitemap and MVPs as a guide, I created wireframes for my main screens. I created them using Figma and then converted them to prototypes.
Prototype
I created high fidelity mock-ups using Figma.
Design System
The first step was to lay the foundation of SkinLine’s design system by establishing the grid that the screens will live on.
With a mobile app focused approach, I designed using a 4-column grid system. This helped me define the spacing system. Incorporating this essential step helped me create an exceptional user experience as I defined and adhered to the design standards.
UI Pattern Library
Lastly, I created a pattern library of UI components that could be followed in the future to ensure consistency throughout the app.
Colour Palette: I chose this specific colour palette to give the app a playful and fun setting, which allows the user to interact more openly in the community. The green sets a contrast against the pink and grabs the attention of the user. This gives the app a balanced look.
Typography: The SkinLine logo uses the font Sacramento (36 px height) and Montserrat (10-18 px height) as the body font. These help accentuate the casual and fun look of the app.
Final Showcase
Click here for the link to the prototype.
