![MYMLOGO.png](https://static.wixstatic.com/media/448982_c0136ce137614937a274e0d4dd4fea5a~mv2.png/v1/fill/w_263,h_244,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYMLOGO.png)
![MakeYourMatch word logo.png](https://static.wixstatic.com/media/448982_ddcb5790750e45debf7b315af2dcd4f2~mv2.png/v1/fill/w_212,h_266,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MakeYourMatch%20word%20logo.png)
Overview
MakeYourMatch is an interactive virtual makeup application kiosk meant to alleviate the issues encountered with in-store assistance and product testers
Its main functionalities include virtual makeup testing and personalized recommendations
Duration
5 weeks
My roles
UX Designer
UI Designer
Visual Designer
The team
Brandon Ung
Kim Luong
Manwinder Uppal
Context
Our team discovered a problem space related to the act of purchasing makeup in-store. Issues such as employee subjectivity and unavailability, poor hygiene of testers, and the overall hassle can all contribute to making the experience of testing products less than ideal.
Research
After deciding that we would design our kiosk to be integrated into Sephora stores, we did research on it's userbase discovering that Sephora caters to women with high disposable income between the ages of 16-55, 62% of which were in their 20s or 30s.
Sketches &
Wireframes
To visualize the appearance of our kiosk and the types of interactions it would facilitate, I brainstormed some sketches of a makeup testing booth.
![MYm booth1.png](https://static.wixstatic.com/media/448982_0f3daae3c7704f709fa954c52742bcc0~mv2.png/v1/crop/x_866,y_556,w_875,h_348/fill/w_586,h_233,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYm%20booth1.png)
![MYM booth2.png](https://static.wixstatic.com/media/448982_39197b2755474317be4532cad0264239~mv2.png/v1/crop/x_348,y_236,w_1179,h_546/fill/w_581,h_269,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20booth2.png)
![MYm booth1.png](https://static.wixstatic.com/media/448982_0f3daae3c7704f709fa954c52742bcc0~mv2.png/v1/crop/x_89,y_224,w_764,h_668/fill/w_255,h_223,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYm%20booth1.png)
![MYm booth1.png](https://static.wixstatic.com/media/448982_0f3daae3c7704f709fa954c52742bcc0~mv2.png/v1/crop/x_869,y_220,w_875,h_355/fill/w_587,h_238,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYm%20booth1.png)
I also sketched out some lo-fidelity wireframes to explore the potential workflow for our 'recommendation' functionality.
![IMG_20190518_001942_348.jpg](https://static.wixstatic.com/media/448982_4951684822474a91bae108e3036e01e3~mv2_d_1600_1200_s_2.jpg/v1/crop/x_245,y_0,w_1013,h_509/fill/w_468,h_235,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_20190518_001942_348.jpg)
![IMG_20190518_001958_77.jpg](https://static.wixstatic.com/media/448982_94644bdc9bef4e57b422976783909ce3~mv2_d_1200_1600_s_2.jpg/v1/crop/x_12,y_26,w_1168,h_1528/fill/w_587,h_768,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_20190518_001958_77.jpg)
Paper Prototype
Next, my team and I put together a paper prototype to conduct user testing on 2 potential functionalities: skin tone matching and virtual testing.
Design Language
Given that our kiosk is meant to be integrated into Sephora, I created the following style guide to adhere as closely as possible to Sephora's design language.
![MYM styleguide1.png](https://static.wixstatic.com/media/448982_1b3649f30fab44438a97f3def6a279a7~mv2.png/v1/crop/x_246,y_118,w_1166,h_195/fill/w_562,h_94,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20styleguide1.png)
![MYM styleguide2.png](https://static.wixstatic.com/media/448982_40aedf53012e4576bd0ef56dfb01628a~mv2.png/v1/crop/x_262,y_118,w_1115,h_796/fill/w_559,h_399,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20styleguide2.png)
![MYm styleguide3.png](https://static.wixstatic.com/media/448982_78b59b16689a473ba6db1948c3826bb4~mv2.png/v1/crop/x_262,y_481,w_343,h_337/fill/w_161,h_158,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYm%20styleguide3.png)
![MYm styleguide3.png](https://static.wixstatic.com/media/448982_78b59b16689a473ba6db1948c3826bb4~mv2.png/v1/crop/x_917,y_479,w_438,h_342/fill/w_202,h_158,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYm%20styleguide3.png)
Storyboard
I created the following storyboard demonstrating a typical use case featuring 'Cammi', a persona (made by Kim Luong) of a well-versed makeup user.
![MYM storyboard1.jpg](https://static.wixstatic.com/media/448982_82b217ec64dd464ea28fd4a47e98132e~mv2.jpg/v1/crop/x_342,y_406,w_1144,h_486/fill/w_579,h_246,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20storyboard1.jpg)
![MYM storyboard2.png](https://static.wixstatic.com/media/448982_985c11a026b040dcaa14a7e2c72d9672~mv2.png/v1/crop/x_268,y_256,w_1434,h_626/fill/w_577,h_252,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20storyboard2.png)
![MYM storyboard3.png](https://static.wixstatic.com/media/448982_61268f603e414badb5b60d6dbc472ee6~mv2.png/v1/crop/x_265,y_204,w_1457,h_649/fill/w_566,h_252,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20storyboard3.png)
![MYM storyboard4.png](https://static.wixstatic.com/media/448982_fd4cb0f4e3b549138d684f1217995ba8~mv2.png/v1/crop/x_268,y_237,w_1448,h_636/fill/w_573,h_252,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MYM%20storyboard4.png)
Final Prototype
Following several rounds of discussions and iterations with my team concerning the workflow and content, I created this high fidelity final prototype of our kiosk's digital screens.
Following several rounds of discussions and iterations with my team concerning the workflow and content, I created this high fidelity final prototype of our kiosk's digital screens.
My team worked to put together a mid-fidelity physical kiosk to accompany the digital screens, with my sketch serving as the idealized version.
![received_2032210776874223.jpeg](https://static.wixstatic.com/media/448982_be0024fbb7624939b592dfb33df3ff93~mv2.jpeg/v1/crop/x_13,y_16,w_1051,h_1408/fill/w_326,h_437,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/received_2032210776874223.jpeg)
![Receipt.png](https://static.wixstatic.com/media/448982_be350841b4ef4e1c9b0c1eb0a14c9236~mv2.png/v1/crop/x_0,y_5,w_172,h_403/fill/w_187,h_437,al_c,lg_1,q_85,enc_avif,quality_auto/Receipt.png)