top of page
SwapUp

Branding | UX Research | UX & UI | App Concept

 

Problem

Due to the lack of regulations and requirements under current U.S. laws that require cosmetic manufacturers to print expiration dates on the labels of cosmetic products. Many people are not aware of the differences between expiration dates and Period After Open (PAO) date. For so long, people believe that cosmetics and personal care products are simple creams and sprays that are benign and are not harmful – but they are not. Once a product is exposed, it can contact bacteria and may start accumulating it. When use products that are filled with bacteria, can cause inflamed skin, rashes, pink eyes, blisters, and even swelling.

 

At the moment, there are only two existing mobile applications on the market that help monitor expiry dates for beauty and personal care products. However, either of them is user-friendly, both require manual input of product information, product code, and product category. The process is time-consuming and cumbersome.

 

My Role

As the product owner of this app, my tasks involved conducting landscape reviews, competitor analysis, map out the user journey, identity design, UX design, and a rapid prototype for the iOS device. 

 

Quantitative Research

In order to identify the persona, a Public Survey was conducted with 41 participants in total. The majority were between the age of 20 and 35, and 85% of the participants were female. Almost 66% of participants only purchase lower-cost cosmetics and skincare products, spending less than $10 to $50 per month. But, there were 12% of participants spending over $200 worth of products each month. 

 

The research findings showed that 46.34% of participants only check the expiry date when they first use/open the product, while the other 34% of the participants don't check the expiry date at all. In addition, only 12% of the participants remember when they first started using the product, and less than 20% of users said that they frequently check the expiry date during the use of the product. 

Opportunity

It is important to highlight how crucial a reminder system can be because not only the participants have shown their tendency to forget about the expiry date – 66% of participants exhibited the behavior that they would use the product until its empty. When asked, 75% of participants were wrong about the PAO date for eyeliner.

Luckily, over 73% of participants are willing to dispose of their overdue product if they know it was expired, and over 56% of the participants agreed that it is unsafe to use expired products. Only 10% of users would continue to use the products neglecting the expiry date, whereas 32% of the users said that they don’t know whether is safe to use expired product. Therefore, promoting subject matter knowledge is also inevitable. 

Project Goal

Building an on-demand mobile application that automatically categorizes and determines the best PAO date for each product when the user scan-in the barcode. Then a reminder will be set to remind the user to replace/discard the expiring product a month before its PAO. Users can keep track of their “expiry list” and make progress on “cleaning” them up. Enabling users to value their health and make informed decisions on their beauty products. After understanding the user's behaviors and needs, we were able to define a list of Common Goals that meet the needs of both end-users. 

Project Goals.png

Provisional Persona

The persona was created based on the data collected from the Public Survey to illustrate the user's motivations, frustrations, and needs. 

SwapUp - Persona Development.png

User Flow  

The User Flow takes the Research into account — User can choose to skip the Sign-in/Sign-up process to quickly access the app. In addition, SwapUp allows users to manually add any product to their 'Reminder List' if the product were not in our database. Not only does this provide flexibility for the users to manage their toiletries, but also allows us to continuously improve our database based on the users' interests.

SwapUp User Flow.png

Branding & UI Kit Design 

I wanted to create a feminine and elegant brand image for this platform in order to make it more appealing to the fashion-forward user market. I use the lavender tone as the primary color to create a calming and clean appearance while having a rich royal blue color palette as a secondary color to bring out the luxurious side of the brand.

I choose Roboto for the brandmark, it's a neo-grotesque sans-serif typeface developed by Google. As Google describes, the font is "modern, yet approachable" and "emotional." It highlights the simplicity personality of the brand.

SwapUp UI Kit_H.png

Low-Fidelity Prototype  

To quickly test the usability of the User Flow and design pattern, I drafted out a low-fidelity prototype and ran a quick test with four users. 

  • 4/4 users successfully completed the task of adding a new product to the reminder list. 

  • 2/4 users suggested the icon is unnecessary when the product image thumbnail is shown on the final confirmation screen (home screen). 

  • 2/4 users preferred smaller product picture to be shown on the product input screen because they know what the product looks like in person. 

  • 1/4 users found the final confirmation screen (home screen) confusing and unclear.

  • 1/4 users suggested adding a "reminder" feature to remind users to use their products (such as the facemask, supplements...etc.) before they expire. 

SwapUp low-fidelity prototype

SwapUp low-fidelity prototype

Play Video

High-Fidelity Prototype  

This high-fidelity prototype mapped out the basic user flow showing how products can be added automatically or manually. Created using preset UI elements while utilizing feedback from the previous user testing. 

SwapUp UI.png

Product Testing

There were a total of 12 participants in the SwapUp product usability testing. The task was to test the overall quality of the design, functionality, navigation, and user flow of the app. The test was done individually on mobile and desktop browsers using the Marvel app. I sat next to some of the participants to observe the progress and asked questions when finished. Below is the feedback summary:

  1. The average rating of the product is 8 out of 10.

  2. The majority of participants haven't seen or used a similar product in the past.

  3. 75% of the participants found the product easy to use.

  4. Most participants are very satisfied (58.33% very satisfied, 16.67% extremely satisfied) with the ability to navigate between screens.

  5. 66.7% of the participants are very satisfied with the look and feel of the app and 8.33% are extremely satisfied.

  6. The Barcode scanning function (83.33%) and Auto-filled product information (66.67%) are rated the most important feature of our product/app. Yet, the Reminder to use the product is rated the least important feature to most users

  7. Over 60% of the participants said they would recommend this product/app to a friend or family member.

SwapUp high-fidelity prototype

SwapUp high-fidelity prototype

Play Video

Lesson learned & moving forward 

Looking back, the most time-consuming parts of this project were conducting research and creating UI elements. If I have more time to polish my design and able to add more icons/products to the category selection, I would organize the product categories alphabetically. I also learned that some people found the value proposition unclear because they don't see the potential risks of using expiry products. Thus, in order to promo the app, we should focus on educating the public on such matters. Another suggestion I'm looking to implement is having a reward point system, where users can earn points by adding new products to their Reminder List or to our database. The points can later be used to redeem coupons and discounts for new/replacement products. This will encourage users to be more active on SwapUp.

bottom of page