GOAL

ROLE & SKILLS

Design a self-service shampoo refill kiosk that addresses the convenience of automation and also helps solve the problem of plastic pollution.

Timeline: April 2019 - June 2019
Product Designer
Product Design, Research, UI/UX Design, Prototyping, Interaction Design, User Testing

Project Summary

This project aims to design an interactive kiosk that leverages physical interaction with users and objects to create an experience that is intuitive, consistent, and reliable. Our team chooses a context where people currently need to wait in line to see a human service provider and try to improve that experience to be automated. My team decided to delve into the context of the retail setting. More specifically, a self-service shampoo refill kiosk that addresses the convenience of automation and also helps solve the problem of plastic pollution.

Research

First, we researched online to learn more about plastic pollution issues and consumers' related habits. We analyzed a couple of refill kiosks currently available on the market to examine the current limitations and frustrations that customers encounter. From our online research, we found a couple of facts that help us decide on the overall kiosk experience we want to achieve:

Observational Findings

To better understand people's shampoo buying habits, we went to do observations at a couple of grocery stores (i.e., Vons and Ralphs).
  • Some bought products for their family or significant other. We saw that a couple of people were on their phones talking with someone else to get more details on which product they should buy.
  • People spend about a few minutes (around ~5 minutes) while choosing toiletries, even if they already know which product they want.
  • A couple of people walked back and forth along the aisle to get a scope of the choices. After that, they would compare a couple of the available options.
  • Some people have a particular brand they want to buy. Meanwhile, some browse across brands and scents.

Interviews

Since the data we gathered from observations are our interpretation based on what we saw people doing, we wanted to confirm by interviewing a couple of people. So we came up with a list of questions and returned to the grocery stores a week after the observation to find a few shoppers in the shampoo alley for a short interview.
Below are a couple of our findings:
  • Most shoppers consider price when choosing a product.
  • 50% of our interviewees recycle their bottles.
  • Open to trying new brands or scents. However, most of the time would stick with their preferred brands.
  • Most shoppers purchase toiletries for themselves.

Storyboards


Sketches


Moodboard


Kiosk Prototype

The kiosk prototype went through 4 stages of implementation in total. We added minor details along the way to make it look as close to a real-life kiosk.
  • On the right side of the iPad slot, we created a credit card swiper made from cardboards.
  • The bottom nook is where the dispenser is located. It's where the customers are supposed to put the bottle to get their refill.
  • On the right side of the kiosk is the nozzle that serves as an alternative way to fill up the bottles. We think this will be a convenient alternative to refill, especially if the bottle brought by customers doesn't fit the bottom nook.

Style Guide

Referring to the theme we created on our mood board, we used pastel pink, blue, and purple as our color selection. For the font, we chose to use Karla, which fits our theme perfectly — simple and bubbly. On the top is the logo that we created using Adobe Illustrator. The font used on our logo is also Karla, with a soft pink shampoo droplet on the right side.

Wireframes

Below are a couple of the main wireframe screens. You can view the whole flow of the wireframes here.

Usability Test

In general, users found the Shampour kiosk intuitive and easy to use. There were a couple of issues that need to be addressed in our next iteration. We also added a couple of extra steps to make the experience smoother. Below are the feedbacks and problems that we have found during testing.

User testing 1:
  • Some users were unsure when to place a bottle under the dispenser. To solve this problem, we added a pop-up informing users to place their bottles under the nook after making a selection.
  • Users want the ability to set desired refill volumes for a more effortless experience.
User testing 2:
  • Suggest adding grating or something simulating it to show that it wouldn't be an issue if there were to have any spillage.
  • Some users suggested adding a scent option to our filter options. However, considering that different brands might have different formats of scent names — which doesn't always reflect the ingredients — it would be hard to make scent as a category. For this reason, we didn't add a filter based on scents.
  • Some users who chose the nozzle refill method found the 'Fill in your bottle with the nozzle on the right' pop-up confusing. We expected them to click the continue button on the pop-up, but some users only wait for the product to be dispensed after taking the nozzle without clicking the continue button. So we changed the wording to "Pick up the nozzle on the right," removed the continue button, and added a timer so the pop-up would disappear after 3 seconds. Then the customer could start filling their bottle.
  • Some users wish to have a search bar. This functionality will help people that already have a specific product in mind.
  • Some users want a price filter to satisfy their desire to compare product prices. We then added the functionality to filter products by price range on the next iteration.

Mockups

We created the hi-fi mockups on Figma. The final mockup reflects all of the adjustments we made based on the feedback we got from our usability testing. One of the changes worth noting is that we switch the order of steps when users need to swipe their card as a payment method. In our early wireframes, users could dispense their product before swiping their card for payment. We realized this is a flaw from the business perspective as it depends heavily on honesty and trust — users can get away without paying after getting their refill. That is why we adopt the vending machine system where the user needs to swipe their card first — the system will save the payment method — then the user can dispense the shampoo they have selected.

Below are a couple of the final mockup screens. You can access the complete prototype here.

Results and Takeaways

We are so proud of our final implementation of this project. Through this project, I have learned that great design starts with the genuine intention to understand our users. Through user research and effort to truly understand our target users, we can find the market gap that could differentiate our product from the other existing products on the market.

Another thing that I learned while working on this project is the importance of conducting usability testing in between steps. At the very least, do one user testing using a lo-fi prototype and another with a hi-fi prototype before moving forward to development. The goal is to check and recheck if we overlooked anything crucial and if the overall product is intuitive for our users.
View prototype
↑  Back to Top