top of page

Alice Skin Care

Mobile eCommerce app that helps find a perfect match skin product

"Filters are great, but good skin is better." Alice Skin Care application, which sets out with its policy, meets its customers with brands that are selected "suitable for skin type" and whose content they trust. While shopping according to your skin type; You can get information by reading the articles about skin care.

Tools

Figma,Miro,InVision

Time

4 weeks

Overview

The Problem

Production of skin care can quickly happen with easy access to online shopping. However, finding and deciding what to use for skin can be overwhelming for the average person. Finding a perfect product and using it in order and patient together with ease can be frustrating.

The Solution

Alice Skin Care application is a brand that can be reached from all over the world, contains informative articles suitable for different skin types, and takes itself one step forward every day so that every user's skin has a perfect appearance.
It was established so that everyone from young to old can reach products suitable for their skin type from one end of the world. The app gives the user a chance to learn how to style themselves through social media and brand suggestions to help explore what works best for them.

User Research

Proto Persona

User Research

From here we interviewed five different people about their skincare routines. This was all very new to me. I learned a lot by asking people about their routines and what products they prefer. A lot of my initial ideas were thrown out after this process. It was a really valuable lesson in making assumptions before making a project

User Interviews

From here we interviewed five different people about their skincare routines. This was all very new to me. I learned a lot by asking people about their routines and what products they prefer. A lot of my initial ideas were thrown out after this process. It was a really valuable lesson in making assumptions before making a project

Research Question

How could a mobile app assist in helping users learn more about skincare products and maintain a healthy skincare routine?

Research Objectives:

  • Discover more about what users know about skin types and how to take care of their specific skin type.

  • Learn more about people's skincare routines and see if there are any patterns.

Sample Questions:

  • “How do you research products? - How many minutes/hours do you put into research before purchase?”

  • "Which brands do you prefer?"

  • "Does looking good on your skin improve your mood?"

Interview Transcript Selection:

"To explain with articles that inform users that skincare products differ according to skin type, to divide the products I trust into categories according to their "skin types" and to meet them with customers.

User Data Analysis

Once I finished five interviews I assorted our data as stick notes in Miro. Once I had all our insights in one place I sorted those findings into an affinity diagram that gave me a better idea of what our user’s concerns were. The categories I created included budget, insights on users’ views of ingredients, thoughts on a theoretical skincare app, and skincare concerns.

Empathy Map

Now that I had an overview of what our users looked like I was able to create an empathy map.
This would give me a clearer idea of the user I was designing for and let me better understand how to meet their needs when designing my app.
Through the interview process, I learned how important "skin type awareness” is and should not be neglected. Reading articles about the skin will give us awareness.

What does Jane need and how can we help?

Definition

Defintio

User Insight

Jane is a young lawyer. She has acne and blemishes on her skin since she has tried every product on her skin since she was little. Not using the right product and not being regular creates inconsistent and bad results on the skin.

Problem Statement

Jane is a lawyer who follows social media closely, likes to try different products for her skincare routines in her spare time, and follows blogs to get rid of the spots on her skin. Jane, who can't visit many stores anymore due to her busy work schedule, where her favorite brands are together, " needs an application that includes the category of "skin type awareness" because when choosing the right product for the skin, "which product" is used for "which skin type" should be easily accessible.

Ideation

Ideation

“I Like, I Wish, What If” Method

Examples of things we Like:
 

  • Knowing what products work best for me

  • Learning the order in which products should be used

  • Getting recommendations based on ingredient category

Example of things we Wish:
 

  • I wish I used sunscreen not only in summer but in all seasons.

  • I wish I didn't have to spend so much time researching the best products for my skin

  • I wish I used the right products to heal my pimples instead of popping them.

Examples of ideas we had when we asked What if? :

  • What if an app could help me build confidence

  • What if this app cures my sunspots?

  • What if I never have to use a "filter" with this app again?

Feature Prioritization Matrix

After I had a good assortment of ideas, I asked ourselves which of these Jane would view as the most useful and which we think would be the most achievable. Some of the focus features I wanted to create were:

  • The ability to read articles.

  • The ability to recommend products based on skin type.

  • The ability to build your personal skincare routine.

  • Ability to recommend products based on season conditions.

Storyboard

Now that I had an idea of the features I was going to try to implement I could start to consider how these would work for our users. I created a Storyboard to visualize exactly what value Alice could bring to a user.

Prototype

Prototype

Competitor Analysis

I first looked at apps called SkinCare Routine and Think Dirty.
Some of the features of the SkinCare Routine application are; It has features such as adding products to your routine and creating a regular routine, recommendations on when and how to use each product, and adding skin photos to the daily viewer.
When I research the Think Dirty application; It has features such as saving products & accessing the product easily later, rating feature, sorting according to selected categories, and personalized content.
The Think Dirty app had probably the most popular feature; users can scan barcodes on items and get information about the ingredients as well as reviews from other users. In addition to these, Think Dirty had an impressive and cool interface.
After this research; I am very excited to think to design a very impressive & understandable & minimal and original interface for Alice.

On a page from the "Think Dirty" app; under the clear science at glance page; The rating indicates which products show "how long" a health effect.

On a page from the "Skin Care Routine" app; A page where the daily skin care routine can be edited.

Strengths are competitor apps :

Think Dirty :
 

  • Cool UI, great features, fun animations, and lots of information to explore.

Skin Care Routine :

 

  • Attracts users to the application with a great policy "follow the daily routine to avoid conflict"

TroveSkin :

  • Provides information and products to its users; get skincare routine recommendations, track your entire skincare product & beauty stash

User Flow Diagram (First Version)

I was now capable of creating the user’s roadmap for this app. This would become the foundation on which we would build the Alice app. At this point, I had a pretty good idea of what we wanted to build for our users. I used specific colors to indicate the main areas of the app: blog, about us, profile, etc.

Paper Wireframes

I sketched out my ideas for the pages of the design of the app. I ended up using my sketches to build the paper prototype in InVision.

Wireframes

Then I moved on to transforming my sketches into low-fidelity wireframes. This enabled me to visualize the content without the distraction of UI concerns and focus on what the app needed–-the most vital content, solid information architecture, and usability.

Mid-Fidelity Prototype

I worked on the blog page, the articles, and the main page. As I worked I would through ideas at each and take my note ideas on how to build out this prototype.

You can check out summarize Figma prototype here:

Created with Figma

Mood Board

Once I had gone through several rounds of Mid-fidelity wireframing, I created a mood board for my app. The board reflected the brand platform I had created skincare productions & give me inspired designs & color tones & smileys happy because their skin glows & skincare tip boards.

High Fidelity Screens

User Testing + Outcomes

User Goals for Testing

Here are some tasks we had users complete in the app.
 

  • Using skin care products in the correct order.

  • Reading articles and buying products according to skin type.

User testing

Results

Some findings from our tests.

  • Some buttons seem too small

  • The user prefers to update the articles up-to-date (with live support).

Conclusion

It was interesting to go through the design process as an individual. For the most part, it was an amazing experience to think by myself all processes and figure out best how I can improve my design. I’m fairly happy with the prototype I created.

Conc.

Changes and Future Opportunites

If I can find time, I'd like to make some changes to this app. Here's a list of things I think should be updated.
 

  • I want the articles to be updated weekly, some bloggers to share their articles on a contractual basis, and the user to connect more closely with the application as a "monthly subscription".

  • I want to make improvements so that there is a "live support" section in the communication section of the application and that users can get paid consultancy from players thanks to this live support.

  • I want categories to be developed, brand collaborations to be increased and the number of products to be increased.

  • In addition to skincare products, the opening of the category of skincare "tools".

Thank You for Reading!

bottom of page