Design an interactive kiosk that leverages physical interaction with users and objects to create an experience that is intuitive, consistent, and reliable.
Product Designer
Product Design, Research, UI/UX Design, Prototyping, Interaction Design, User Testing

Date: April 2019 - June 2019

Project Summary

The goal of this project is to design an interactive kiosk that leverages physical interaction with users and objects to create an experience that is intuitive, consistent, and reliable, as well as thoughtful and delightful in its implementation. The focus is to choose a context where people currently need to wait in line to see a human service provider, or where physical interaction with objects and/or users can enable whole new kinds of user experiences. My team decided to delve into the context of retail setting. To be more specific, a shampoo refill kiosk which would help solve the plastic pollution problem we're facing.


First, we did online research to support and make a stronger case for our kiosk goal. We also explore any existing refill kiosks to examine the current limitations and frustrations that customers encounter.

Observational Findings

We also did some observation at a couple of grocery stores like Vons and Ralphs to know more about people's shampoo buying habits.
  • Some people bought products for their family or significant other. We saw that some people were on their phones to talk with the person they're buying the shampoo for.
  • People tend to spend about a few minutes (around ~5-ish minutes) while choosing toiletries, even if they already have an idea of which one they want to buy.
  • Some people walked back and forth along the aisle to get a scope of the choices they have to compare.
  • Some people have a certain brand they’re looking for, some browse across brands and scents.


We came back to the grocery stores a week after the observation and find people who are shopping for shampoo to do a short interview.
  • Most people consider price when choosing a product.
  • Most people tended to recycle their bottles. However, the people we interviewed may represent a small population, as our online research suggests that such a habit is not as common as it would seem to be.
  • Open to trying new brands or scents but mostly have their preferred brands.
  • Most people purchased toiletries for themselves.





Kiosk Prototype

The kiosk prototype went through 4 stages of implementation in total. We added a few small details along the way to make it look like a real shampoo refill kiosk.
  • On the right side of the iPad slot is the credit card swiper.
  • The bottom alcove is where the dispenser is located and where the customer is supposed to put the bottle for a refill.
  • On the right side of the kiosk is the nozzle that serves as an alternative way to fill bottles up with.

Style Guide

Keeping the theme that we created on our mood board, we used pastel pink, blue, and purple. We also chose the typeface Karla to keep the entire theme simplistic and readable. On the top is our logo which I made using Adobe Illustrator. The font used on our logo is also Karla with a soft pink shampoo droplet on the right side.


Usability Test

In general, users found the Shampour kiosk to be pretty straightforward and easy to use. However, there were some issues with refinement and extra steps that could be added to make for a smoother experience. Below are the feedbacks and problems that we have found during testing.

User testing 1:
  • Some users were confused as to when they should put a bottle under the dispenser, and for that, we added a pop-up that tells users when to put their bottles before they start filling for shampoo.
  • Users wanted to have set volumes commonly used for an easier experience.
User testing 2:
  • Suggestion to add grating or something simulating it to show that if there were to have any spillage, that wouldn’t be an issue.
  • Some of them suggested that we add a scent option for our filters, however, for the sake of time and simplicity, we opted to remove the scent option.
  • Some people don’t realize when the filling process is done -> So we add a confirmation message to tell them that the process is done and they could proceed to checkout.
  • A couple of people that chose the nozzle method to fill in seems to find the “Fill in your bottle with the nozzle on the right” pop up confusing. We expect them to click the continue button on the pop-up but some of them take the nozzle and just wait without clicking the continue button. -> So we change the wording to “Pick up the nozzle on the right” and removed the continue button and use a timer instead so that the pop-up will disappear after 3 seconds. Then the customer could start filling their bottle.
  • Some people wish there's a search bar for people that wanted to look for a specific product quickly, which we then added for the ease of finding a specific product.
  • Some people wish for a price filter for ease of price comparison; the filter was then added on a later iteration.


We created the hi-fi mockups on Adobe XD. The final screens look slightly different than the wireframes as we have refined the UI after confirming that the flow and functionalities are intuitive through the user testing we conducted.

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 thorough user research. Through user research and effort in trying to truly understand our target users/customers and we are able to find the market gap that could differentiate our product from the other existing products on the market. We might feel like we know what users need but our approach to solving the real user problem could only be discovered through user research. Another thing that I've learned while working on this project was the importance of conducting usability testing in between each step. At least, one user testing on the paper/lo-fi prototype and another one on the hi-fi prototype just before releasing the product. The goal is to check and recheck if we missed anything important and if the design is intuitive for our users.
↑  Back to Top