top of page
Screen Shot 2019-12-22 at 23.45.25.png

Design Glossier. Mobile App

The new app GlossierPlus has been designed to help everyone get their best skin and feel more confident about their inner beauty.

AUG,  22,  2019

​

Ryan Kilmer
Yiran Jiang
Aining Wang

 

Initial Research

Website & Store Interior

Screen Shot 2019-12-22 at 23.55.26.png
Screen Shot 2019-12-22 at 23.58.20.png
Screen Shot 2019-12-22 at 23.58.06.png

Since its inception, Glossier has been a company that strives to show off the beauty inside everybody. A lot of the time people feel self conscious when they have to deal with their skin. We all wish it could be easier to understand our skin and what it needs. The new app GlossierPlus has been designed to help everyone get their best skin and feel more confident about their inner beauty. The app gives daily recommendations personalized to the user based on what will be best for their skin. If the user is interested in any of the recommended products they can by them directly through the app. The UV index, humidity, location, and temperature are taken into consideration when crafting the user’s daily routine. If the user has any concerns about how to apply the products they can click the “help me” button to get a tutorial on how to properly use each product. The user can get in depth into their skincare by scanning their face and getting a customized problem analysis. We hope GlossierPlus can help all of its users feel better about their skin and feel confident in taking care of it.

Style Guide

Screen Shot 2019-12-23 at 00.08.08.png

UI in Progress

Screen Shot 2019-12-23 at 00.09.58.png

Final 3 UI Panels

Screen Shot 2019-12-23 at 00.17.54.png

Landing page

For our landing page, we want to encourage users to keep tracking the daily routine of their skincare process. So we include weather conditions and calendar on the top of the interface. And they also could check for the different steps for skincare through the buttons. And to emphasize the main function of our app, we put the scan face button on the function menu with a higher hierarchy. 

 

Primary interaction

Our primary interaction is to scan the face of the user. Our goal is to make the scanning process effective. So that we empathize with the face in the middle and blur the background that could not be scanned.

 

Secondary interaction

After the scanning, we would show skin problems on the secondary interaction page. We used the score,  digram and text analysis in a different hierarchy to show the result statistically.

Screen Shot 2019-12-23 at 00.23.22.png

©2019 by interact. Proudly created with Wix.com

bottom of page