Motivation
MySkin is a skin care application for the everyday consumer. Entering the market of skin care can be intimidating for many, with a large variety of products and brands to choose from. Consumers often buy products based on popularity and word of mouth recommendations when these choices may not always be catered to their skin type and needs. The mission of MySkin is to provide a simple user experience in entering the world of skin care by catering the experience to the individual user's needs. We wanted to create a product that is easy to approach and can give clear insight on what is best for users' skin.
Currently, there are a few other competitors like ThinkDirty and CosmEthics that have similar products as what we had envisioned for MySkin. However, the competitive threat can be mitigated by improving on the existing solutions’ shortcomings both from the perspective of content and UIUX. While the barcode scanning aspect appears to be well-covered by rival apps, we can build a robust application with a sophisticated search algorithm, a straightforward yet comprehensive ingredient analysis. Detailed user-submitted reviews as well as customizable routine functionality are all avenues for extending our app’s feature set to encapsulate a unique value proposition.
As such, our app will allow the user to scan product ingredient lists and create their skin profile (skin type, proneness to acne, etc). Based on these inputs, the app will generate safety/harm reports as well as personalized product recommendations. Finally, the app will support user-submitted product reviews that will include rankings and skin type-specific suggestions.
Process
To kick off this project, we came up with 50 different application ideas, no matter how feasible or silly. We were able to reduce the number of ideas in our lists to things that we'd actually want to implement. After some discussion, we decided on a skin care application that could be used by a wide variety of consumers. Below is a low fidelity sketch of what we imagined some tasks with our app would look like!
After coming up with the idea of our application, we jumped into user research through interviews and observations. Early on, we wanted to see what users were looking for when shopping for skin care products. We went to a few drug stores in our area and asked a few customers for their thoughts when browsing the skin care aisle. The feedback we received was very important to the immediate direction of our application. The volunteers that we spoke to had a range of experience when it came to taking care of their skin, which was useful for insight in reaching a wide variety of users. Some walked into the drug store knowing exactly what they wanted. Others were looking for products that were recommended to them for their needs. We came out of this process with some key answers and insights. Many skin care users look for products that they have heard about or have been recommended to them, regardless of their skin type. Most average consumers don't have a lot of knowledge of active ingredients in skin care products and mostly pay attention to major brands, buzzwords, and other user reviews to find what they need. This information gave us a direction on how to create a user-friendly application, and educate user about the benefits of products in relation to their skin type.
With this information, we jumped into our low fidelity prototype. We came up with some user tasks of varying difficulty that we knew would be essential in the functionality of our application. Some of the tasks included taking a photo of a product's information, changing user preferences and skin type information, and comparing multiple products to one another. Due to the changes in CS 160 requirements, we jumped to Figma early on for prototyping. Below are some screenshots of our first iteration of the prototype application.
After completing our first iteration of a prototype, we needed to receive feedback. We were assigned to another group in the class to exchange feedback through heuristic evaluation. Most of the feedback given to us was purely cosmetic, such as making sure our colors were consistently used throughout the application or buttons were easily clickable. Other points of feedback were useful in making our application provide a smoother user experience, such as ensuring users had ways to cancel unintended actions, such as taking a photo or navigating to a new screen. After our first prototype, we were familiar with what functionality we wanted our application to be able to do. From there, we made an effort to make sure that each page was designed cleanly, to clearly indicate to a user what can be done through an intuitive interface. Our redesign process included enlarging images, reducing the wording, making all buttons uniform, and focusing on the spacing of each page. We were able to use the feedback from our partner group and GSI to move into our final prototype. For this release, we adjusted the problems mentioned in feedback and implemented a few more tasks for a more complete experience.
Below is the progression of how our home screen changed from each iteration, all the way from our rough sketches to our high-fidelity prototype.
Final Prototype
Below are some examples from our final prototype. In the following GIFs, you can see some example tasks that can be completed using MySkin.
Users can scan information about a product they're interested in to add it to their Recently Viewed Products. This is an easy task that users can complete in order to get more information about a product they may be looking at in stores.
Here, we see a user checking out a product they have recently scanned. They're able to look at the list of active ingredients that have important effects on their skin. Users are also able to click on an ingredient for more information on its Safety Index and find out if an ingredient is safe to use for their skin type.
Users are able to pull up multiple Recently Scanned products and compare them to one another. Here, we see the user selecting two products and seeing them side by side, comparing their Amazon ratings, price, and Safety Index. This will be helpful when users are stuck in deciding between various products that may share similar qualities.
You can find a link to a video demonstration of our final prototype below. Thank you for viewing our project!
YouTube link: https://youtu.be/1EUEkXEQHxQ
