Introduction
At the beginning of 2019, my Information Design/Prototyping Professor asked students to form into teams and design an interactive kiosk in less than 5 weeks as our final project.
My team first analyzed that consumers need kiosks because they provided a way to quickly and easily acquire a product that allowed for personalization and customization of some sort. We decided that beauty and makeup was a relevant problem space. Personalization is absolutely crucial because products need to match each person’s style and skin shade.
Our mission was to create a product that leverages evolving beauty trends while preserving features that satisfy customer needs. And our solution to all of this became the BAD GAL Makeup Kiosk. This kiosk bridges digital convenience and material practicality. We created a personalized experience that recommends products tailored to each customer. Utilizing augmented reality, we allow users to effortlessly preview products on their face. Lastly, physical testers are provided so customers can still physically sample products to determine how they feel on their skin.
Online Research
We wanted to first explore the general landscape and context behind beauty shopping habits. We learned that beauty has shifted to heavily favor personalization. “Consumers have always wanted their beauty products to reflect their individuality… a search for ‘best foundation’ becomes ‘best foundation for me’ over time” (Nielsen). It’s crucial that the experience we design with our kiosk emphasizes the ability to tailor the interaction based on each individual user.
Additionally, there seems to be less interaction with a traditional salesperson. Consumers are more likely to research beforehand, look online for opinions and reviews, or test out products for themselves (Racked). It’s important that we recreate solutions to the needs of the user that do not directly relate to the process of purchasing something, such as the decision making in choosing a product.
Lastly, we asked ourselves: Why would someone want to shop in person when ordering online is so much easier? The main appeal seems to be receiving products instantly and being able to test those products in store (in-cosmetics). The key elements that are missing are the ability to see product reviews and compare products easily. For our kiosk design, as we blend the digital interaction with a physical machine, we have to provide the benefits of shopping online while still being able to test out products.
Competitive Analysis
There are already makeup kiosks that have the same “virtual try-on” element that we want to incorporate, such as Sephora virtual artist, L’oreal makeup genius, Borjois blended reality magic mirror, and Charlotte-Tilbury magic mirror. All of these competitors allow users to virtually test different shades of makeup products without having to actually put on multiple products. However, there are areas where these devices fall short. Sephora’s and L’oreal’s devices are purely a visual experience. You can only view different shades, but “an app isn’t going to tell you how a product feels on your face or how it interacts with your skin” (Lifehacker). Based on our previous research, this is a crucial element to beauty shopping. The biggest appeal of shopping in person is to physically try on products to feel the consistency.
Alternatively, the Borjois and Charlotte-Tilbury magic mirrors do allow users to physically try on a lipstick. This fulfills the need of physical testing products. However, this neglects the other appeal of shopping in stores: receiving the products instantly. They lack the ability to purchase items and receive it right there at the device. Additionally, testers are not accessible at the Charlotte-Tilbury device. These shortcomings force the user to leave the device and go to a different area to interact with a worker. Again, this goes against the trend of not wanting to interact with workers.
To wrap up, our online research provided valuable insights into what needs our kiosk needs to fulfill. We need a device that focuses on personalization, eliminates the need for interaction with a worker, and allows users to physically test products. Our kiosk will allow users to physically try on a product that mimics the consistency and feel of the product they are buying. Additionally, it will act as a self-service system where they can also buy those products on demand and receive them instantly. The goal is to create a seamless experience where the user can try on products, browse through different shades, and purchase and receive their products all without leaving the kiosk.
Personas and Storyboards
Next up, I created two personas, Tiffany and Madison, and their corresponding storyboards.
Initial Kiosk & Wireframe Sketches
During the iteration phase, we started sketching ideas for the physical kiosk itself individually.
After thorough discussions between group members, we decided to use one of Ken’s sketches as our physical kiosk design and we made a mid-fidelity version of the drawing.
For the wireframes, we started by writing out a list of the key functions/tasks that our kiosk needs to support based on our user research, then we individually created low-fidelity wireframe sketches of the overall information flow.
Prototyping
Building on our wireframes, we created a low-fidelity physical mockup out of paper to explore the form factor and functions of our kiosk’s user interfaces. Below is the demonstration of the “Personalize My Look” user flow:
Based on this initial prototype, we structured two flows for user testings:
“Know What You Want” flow: You want to purchase lipstick for a birthday present. Use the Bad Gal Makeup Kiosk to complete a transaction for a lipstick.
View the different lip products
Add to cart and browse other products
Search for a certain product in the lips section
Add that product to cart and proceed to checkout
Edit your cart by removing one of the products and adding 1 more quantity of the other
Change the color shade of that product
Go through with checkout process
“Shop Products for Me” flow: You want to try out Bad Gal products for the first time but aren’t sure how they look on you. Use the kiosk to figure out what products to buy based on your skin shade.
Browse through recommended products
Pick a product and try it on
Change the color of the product
Add another product to try on
Remove one of the products in your shopping cart and checkout
For our “Know What You Want” flow, our user chose to follow through the survey, the recommendation page and the virtual try-on page instead of skipping to the category page directly, which was very unexpected. But he did understand other functions very well and performed the required tasks. After the test, our user admitted that he was simply very confused, especially about the recommendation page. Because we temporarily put boxes and numbers as place holders, he wasn’t sure about the purpose of those options and guessed that clicking a box on the page would reflect some change on the model’s face.
For our “Shop Products for Me” flow, our second user was also very confused about the recommendation page and not too sure what each section is about. On the virtual try-on page, she didn’t realize the side panel has a drop-down menu where she could modify her makeup, so she went back to the product detail page to make adjustions. She also kept clicking the “Add To Cart” and “Checkout” buttons during the test because she was getting impatient with the checkout process and the amount of screens she had to go through in order to receive her product.
After these user testings, we added more content on the recommendation page, simplified the two separate flows, and removed the drop-down menu bar on the virtual try-on page for our mid-fidelity digital prototype.
For these user testings, we focused on finer details to perfect the user flow and experience. We found out that the wording of the home page buttons were confusing, specifically “Shop Products for Me”, because it didn’t tell the user that it would personalize their shopping experience. But some did like words such as “me” or “my” because they felt personal. The survey page with the “Undertone” category, was not clear enough, because not all users know what their skin’s undertone is or how to find it. And some users thought that the products in the recommended page were the ones in the inspiration photos rather than personalized products. For the virtual try-on page, pop-up’s close button was placed in a position that was unnatural for user to click, and some users didn’t understand the purpose of the arrows pointing to the face. Overall, the flow was simple and smooth and there weren’t major difficulties adding items to cart/ editing items in cart and completing a purchase.
After these tests, we changed the wording on the homepage to “Personalize My Look” and “Browse All Products”, added information on how to find undertone, adjusted placements of some buttons, and removed the arrows on virtual try-on page.
Moodboard and Style Guide
Before moving on to high-fidelity prototypes, we created a list of adjectives that captures the essence of the emotional experience we wanted to create with our design ideas. Since all four of us love Rihanna, we used her makeup brand Fenty Beauty as our main inspiration. We decided to make our brand Fenty Beauty’s sub-brand and named it Bad Gal based on Rihanna’s instagram username badgalriri. We also used her iconic profile picture the “meh face” as our brand’s logo to target younger users.
Then, using this list of words, we created a moodboard as a collage of images that have a consistent mood and feeling with a relatively small set of colors.
Based on our moodboard, we created a style guide specification that shows our team's choices for colors, typefaces, and design elements.
Final Interactive Kiosk
High-Fidelity Clickable Screens:
Since the user testings we did on our mid-fidelity screens, we changed home screen buttons from “Shop Products for Me” and “View All Products” to “Personalize My Look” and “Browse All Products” to better convey where those buttons can take the users to. We also provided an informational pop-up that explains what an undertone is and how to find it. We updated some screens to have the same “header”, and we changed some buttons from “<-” to an “x” to help differentiate between closing a window or pop-up and moving backwards in the task flow. However, for our pop-up on the virtual reality screen, we changed the position of “X” button to a “Got it” button and added a button to bring back the information pop-up in case they need it.
In addition, after thorough discussion, we decided to limit the amount of products users are allowed to virtually try-on. One reason is to let a user focus on a single product at a time and not get flustered, and another reason is to avoid users from standing in front of the kiosk for a long amount of time: the kiosk is meant to be quick and easy.
High-Fidelity Physical Kiosk Prototype:
High-Fidelity Kiosk Rendering:
Final Presentation:
Comments from Professor Taylor Scott:
Conclusion:
Throughout this project, I have learned the importance of planning ahead while being flexible and open to new ideas at the same time. We pinned down the concept and rough model for our makeup kiosk during the first stage, but since then we have changed the branding from Fenty Beauty to BAD GAL and adjusted our design language multiple times.
What was especially difficult was to create a physical prototype that was an accurate reflection of the kiosk that we imagined. It was easy for us to digitally render a representation of the kiosk but we spent a lot of time considering the materials, and even more specifically the types of material we were going to use to create the kiosk.
I have also realized how helpful user testing and feedback are. Even in our final stage of finishing up the kiosk, we were still conducting mini user testing to refine the user flow and perfect the finer details. We wanted the kiosk to accurately represent decisions that were backed by our user research so that we knew we created a product that catered specifically to our target users.
And finally I have learned that in order to function as a productive team, everyone needs to be able to work well both collectively and individually. Specifically, my teammates and I worked together on decision making and putting large physical parts together, while other times we worked on smaller components individually according to our specialty.
Great things are not done by impulse, but by a series of small things brought together. — Vincent Van Gogh
Huge shoutout to my amazing teammates Ken Ta, Jaclyn Chao, and Lucy Xu. Also thank you to Professor Taylor Scott and all our TAs and IAs!