Page 1


DES191B - Interactions Prototype February 16, 2017 Corri Maloney

Original Project Context When people go to buy skincare the options may be overwhelming and confusing; moreover, majority of the time when people buy a product they are just guessing and buying what they think will be the best option for them. Unfortunately, this can lead to allergic reactions, chemical burns and wasted money. My original idea for my phone app was to help people get recommendations for their skin care based on their skin type. It also allowed the user to go deeper and learn about the product they were buying including their ingredients. I designed SKiN. to address this issue and to help all level users know what would be their best options based on their skin type, concerns and age.

Iteration 1: Questions

After coming up with the idea and before any testing, I questioned how the user would answer some questions within the app: Would people be honest with themselves? The original concept allowed for users to enter what they have used in order to get a better recommendation and not be given products that they have already tried and had a bad reaction. With this, I realized a lot of people base their opinions off what their friends have tried. I asked a potential user if they were more likely to not try a product because their peer did not like it and they said yes. Would people know their skin or preferences well enough to answer the questions accurately? My original idea for this app was assuming that the user may be new to skincare, but what I did not realize that this may also mean that they are completely inexperienced and may not even know their own skin. For example, whether it is sensitive, dry, oily, etc. After asking myself these questions, I decided to nix the option of entering the products that the user may have tried. If people put things that they had not tried, but based on what they heard, I would not have a product. To keep my audience of new users, I decided to make a link within the app where you could go to article that supplied various ways for the user to test their skin type.

“Will people be honest with themselves?�

Iteration 1: The Product From the questions I asked myself, my first iteration had a basic flow of enter information, enter preferences, product recommendation, search and product page. My audience was broad as I wanted to please people who were new to skincare and people who have been using products but just wanted something more. I wanted to keep it basic and just have the structure of how the app would flow and if it was usable for a large audience. I order to test this structure, I just made a paper prototype that was the size of an Iphone. I wanted the tester to have as a real of an experience as possible even the early stages of prototyping and know what kind of app they are interacting with.

Paper Prototype with the questions the app would ask and what the user flow would potentially look like.

Iteration 1: Sharing with Users First Round

For all my testing I handed them the prototype and told them they are free to ask any questions they like and that my product is still in it’s early stages, so any feedback both positive and negative would be helpful. Tester 1: Female, 22 In my first round of testing with the paper prototype I got both positive and negative feedback. My first tester was someone who is allergic to a large amount of ingredients and food. When she tested the app she “loved it.” She said that she would definitely use something like this since she is allergic to everything. She felt that she was cared for when selecting products and that it would be a personal phone app. She did

“I love this”

“I feel overwhelmed” Tester 2: Female, 21

recommend that it would be cool to have an option buy it or at least know where she can buy it from. My second user was a woman who used a small amount of skin product and makeup. When she held the app and went through it her first reaction to the survey page was that there were a to of questions and she was feeling overwhelmed. She thought the app was asking a lot out of her to remember what her preferences were and what her skin type was. She did

Iteration 1: Learning/Reflection After testing my first iteration I decided to break a part the screen that the tester felt the most overwhelmed which was the skin type/preferences screen . I wanted to keep most of the information as I felt they were important for the app and for the user to get a good recommendation because there was very little information to go off of. In order to address these issues, my next iteration would be shorter than my first and would only have the necessary questions.

With iteration 2 and 3 I wanted to test how users felt about having some screens missing from the original app and if they still felt they were being cared for. How much information would still make recommendations accurate? I wanted to test and see how little information the app would need to still give the user a good recommendation and still feel that they were being cared for based on the app’s feedback. Do users prefer just a quick solution and being able to search rather than make a profile and get recommendations? I realized during my last testing that some people just want a quick search option because they feel overwhelmed by the information and want to make a decision for themselves. From these questions, I made the following iterations with different options and flows to see what kind of feedback I would get from the variances.

“Do people just a want a quick search tool?” “How much is enough information?”

Iteration 2 & 3: The Product and Feedback

For iteration 2 I decided to have the log-in screen, information page, skin type page, preference page, recommendation page and product information page. Done through POP.

Iteration 2 Feedback: Tester 1- Female, 21 The tester liked the option to make an account. She said it feels more personalized if she was able to make one. They also asked “how would the skin tester work?” I told her there were some articles on how to test it at home and that it was in it’s early stages of development. Tester 2 - Female 19 The tester liked this iteration, but wanted minor descriptions on the product recommendation page. She went through the app fast. “It would be good if you had customer reviews from other people who tried it.”

For iteration 3 I decided to cut somethings out for the user that wants a quicker answer. I had a “what are you looking for?” Page, skin type page, recommendation page, product page and ingredient information page. Done through POP.

Iteration 3 Feedback: Tester 1 - Male 23 The tester went through the app very fast. He preferred this styling as it more to the point and he was able to just enter what he was looking for rather than get products recommended to him that he did not need. Tester 2 - Female, 19 (I chose this tester because they use makeup and skin care products regularly.) She liked being able to see the ingredients. “Ingredients are something that I care about especially when it comes to my skin.”

Iteration 2&3: Learning/Reflection I realized from feedback that some users want all the information they can get from a product and others just want the basics. Majority of the testers, however, wanted something that was quick and simple to use. This was when I realized I was somehow getting away from my original concept of not only being a recommendation tool, but also a search tool for the experienced cosmetic user. In my next iterations, I got rid of the majority of the information screens. I decided to focus on the user that wanted a quick search tool for when they are in the store and have a product in hand.

Iteration 4 & 5: The Product and Feedback

For iteration 4 I decided to make it just a search app for the experienced user who may be in the store or for a person who cares about what ingredients are in their products and why. Done through POP.

Iteration 4 Feedback: Tester 1- Male, 22 “I like that I can just search what I want. I don’t really worry about skincare, but this would be a quick way to search for stuff.” Tester 2 - Female 19 “I don’t think I need a list of everything with that ingredient. If it didn’t match with my skin then it’s kind of unnecessary information.”

For iteration 5 I decided to have no log in page, no account information page and no ingredient list. Done through POP.

Iteration 5 Feedback: Tester 1- Female, 21 “This one is cool. Maybe have it search by category like oily skin, dry or whatever. It would be cool if it had the scanner too to search for things. I would still use it though.” Tester 2 - Female 25 “I like this. It’s very straight to the point, but I feel I already know what is good for my skin”. (note: this tester is another experienced cosmetics user)

Iteration 4&5: Learning/Reflection I realized from feedback that some users want all the information they can get from a product and others just want the basics. Majority of the testers, however, wanted something that was quick and simple to use. This was when I realized I was somehow getting away from my original concept of not only being a recommendation tool, but also a search tool for the experienced cosmetic user. In my next iterations, I got rid of the majority of the information screens. I decided to focus on the user that wanted a quick search tool for when they are in the store and have a product in hand.

Next Steps:

After testing the last two iterations, I decided to make more focused, concise iteration. I wanted to address all the issues that I was confronted with. Still attached to my original idea, I wanted to be able to have a product for both experienced and new user. I decided to take ALL the feedback I got from people who wanted more out of the app (i.e. give me an option to buy this, look at other people’s reviews, etc.).

Iteration 6: The Product

In this iteration, I made an attempt to please everyone. I had an account information page, skin information page, product recommendation page with both makeup and skincare, product information page, ingredient page, where to buy, and consumer reviews.

Iteration 6: Feedback Tester 1- Female, 22 I used this tester in the first round as she was the one who is “allergic to everything”. She initially liked my first iterations and thought she could see herself using it. That’s why I decided to have her test my sixth iteration. Her response: “Looks good. I would use this. Very straight forward. Right amount of detail. I would feel better about buying a product.”

“Very straight forward.”

For my next tester, I wanted someone who never really buys cosmetics, to see if they liked the flow and the information they were receiving.

“As a user I don’t care about ingredients.”

Tester 2- Female, 21 The first thing she addressed the was makeup on the product recommendation page - “One thing I don’t know is the different kinds of makeup. Maybe get rid of makeup and focus on skincare” She also struggled with the skin type survey - “How do you define skin type?... I think having it show a visual of what your skin type might be instead.” She then madfe her way to the ingredient and product information page - “This is a lot of heavy text... On what the users want to read maybe?.. As a user I don’t care about ingredients”


After the last few feedbacks, I realized that I was getting too far away from everything that I wanted to focus on in the attempt to please everyone. Instead of skincare I ended up having an app for all cosmetics. My audience was too broad. I decided to stop addressing the issues that a new user would have when picking a skincare product. I decided to just focus on the experienced user and/or “ingredient junkies� who care about what ingredients are in their products and what those ingredients are in there for.

Final Prototype SKiN. allows a user to scan either a barcode or enter the information from the product right into a search bar. After these actions, the searched product information populates allowing the user to view active ingredients with the option to look at consumer reviews, where to buy information and a more information tab. If the user wants to know more about each ingredient, they can select one which will lead them to the ingredient information page. At this page the benefits of the ingredient ar listed and other products that contain the ingredients as well.

Here is a link to my final digital prototype. I took the sketches that I had done in Sketch and transferred them to POP. Https://

Final Prototype Feedback I decided to test my final prototype on people who are experienced in cosmetics, know what they are looking for when they walk into a store, but still want to know exactly what they are putting on their skin. Tester 1: Female, 22 I brought this back to the girl who is allergic to everything to see how she liked the final iteration.

Tester 3: Female, 22 I showed this to a new tester, but instead someone who just wants natural skin care products to avoid harsh chemicals.

Her final thoughts were that the overall app looked really good. “Easy to understand... Very straight to the point.”

Her reaction was very positive - “I usually have to do so much research when it comes to finding new products that fit within my regimen, but this would be better since I can see everything that is it in and whether or not I want to avoid it.”

“The only thing I would change is on the ingredient information page, it is a lot of text and try to shorten the sentences.” I did agree with her for that part and it would be something that I would address in the next iteration. Tester 2: Female, 25 I brought this back to the tester that is a cosmetologist.

Tester 4: Female, 23 I showed this to a new tester who is also no stranger to makeup.

“I love this. I usually sit in Sephora for hours just googling ingredient by ingredient, but this would make it so much easier to just figure out what I am buying and what it is doing for my skin.”

“This is a good idea...As an app this makes sense. I think there could be a few formatting changes, but other than that, I’m totally with it.”

Final Thoughts Based on the feedback I received on my final prototype, there is obviously still some room for improvement. If there was more time, I would adjust the layout and the overal design of the app. Throughout this whole process, I did not have a clear focus on who my audience was and I wanted to please everyone. My product grew even though it was shortened and lost an audience. Once I was final able to forget about people who are new to cosmetics and focus on people like me, who are experienced, curious about their products and are complete ingredient fanatics, I was able to make a decent mockup of the app.

Interactive design  

Creation, testing, prototype

Read more
Read more
Similar to
Popular now
Just for you