SI 582
Unicorn Bubbles
A bubble tea ordering kiosk, made for accessiblity and ease-of-use.
Project type: Four person team | UX/UI Design
Project length: 3 weeks | Fall 2021
Tools: Sticky notes, Miro, Adobe XD, Google Slides
The Problem
Unicorn Bubbles is a fictional bubble tea company in Ann Arbor, looking to expand its company through technological innovation. It needed a design for its new ordering kiosks that are a 16:9 ratio, and that are several feet high and a couple of feet wide. Unicorn Bubbles has many options in its menu, as follows.
Accessibility
It was essential that these kiosks were accessible to a wide range of customers, with varying ranges of abilities and varying heights. Therefore, the kiosks, which were very large, needed to have features that were easy to reach for customers in wheelchairs, customers who are children, tall customers, and so on.
Usability
The kiosks also needed to be easy to use and understand for customers of varying levels of experience. Those who are new customers needed to be able to understand how to use the kiosks as well as repeat customers.
The Solution
Unicorn Bubbles needed a kiosk that was both accessible. So, in short design sprints, we created a click-through prototype that was intuitive and usable while still being physically accessible to those of various heights and abilities. We did this through user testing, story mapping, and rapid ideation. The end result was extremely successful.
Personas
We designed with four primary personas in mind. These are all fictional characters, but more or less accurately represent Unicorn Bubbles’ customer base.
-
Angela, 34
Returning customer who has a loyalty card
-
Hao, 28
New customer, long-time boba fan, orders for his friend and himself
-
Victor, 18
New customer, has never tried boba before
-
Mia, 12
Returning customer
Story Mapping
We first created story maps for each persona to better understand their customer journey and pain points throughout the process of ordering bubble tea. By the end, we knew what features we needed to include in the final product, and where to place them. Here are two of these story maps.
User Flow Diagrams
We developed user flow diagrams for Unicorn Bubbles’ average customer in order to help us with the majority of users’ experiences as well.
Low-Fidelity Prototyping
We created low-fidelity prototypes to quickly brainstorm layout ideas that we could easily test with user tasks, and easily modify through sticky note movement. After testing various tasks from differing heights and distances, we had a better understanding of where users might have trouble using our product.
User Test Findings
Tall users and short or sitting users could not reach the same buttons. We therefore adjusted button placement in order to cater to users of all sizes and abilities.
The buttons on the home screen were too large. Users standing close to them could not easily see their content, and so we adjusted them to make them smaller.
The organization of the bubble tea modification screen was nonsensical to users. We needed to adjust the placement and order of how users customize their boba.
Mid-Fidelity Prototyping
Our mid-fidelity prototypes allowed us to do more intensive user testing as users could better understand the kiosk layout with a more “realistic” prototype.
Results
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.