SoBol Kiosk - Spring 2025
Kiosk
Overview
This is a kiosk concept for SoBol, a chain restaurant in New York that specializes in smoothie bowls and smoothies. They aim to make healthier eating easier for the average person, and make their products fresh every day.
Objective
Research, mockup, design, and document a consumer-oriented, touch-screen experience for use in a retail environment.
Research
Heuristic Evaluation
To begin researching, I performed a heuristic evaluation on other competitor kiosks in the area, including Tai Chi Bubble Tea, to get a sense of what are good and bad conventions for kiosk design. Overall, I learned that good visual heirarchy and natural groupings were key to create an experience that isn't frustrating.
Product Requirements
A full evaluation of the product requirements was run, including hardware considerations, content of the products sold, and global functionality. This was to get a sense of what specs I was working with, language options, and types of information I needed to gather to design each product. For example, knowing the character count, how price would be displayed, and all the different customization options that were necessary to represent SoBol.
I chose to go with an iPad 10th Generation as the screen, for a more handheld experience that users could manipulate at the tables.
Work Flow
The next step was to start breaking down the user flow. Where do they start? What are their options? What kind of system checks does the kiosk need to make? How can we break up the pages? Shown below is the full user flow, broken up into sections.
There's a lot of options provided for the user, due to the customization features of SoBol. I made sure that this was available in my Kiosk, as customization is an important part of the user experience.
Mockups
To get a sense of what the user would actually be using for the experience, and how big I needed to make UI components, I made a physical mockup and simulated a basic virtual mockup. The pixel dimensions of the iPad 10th Generation are 2360 x 1640 @ 264ppi. This makes the screen size 8.94 in x 6.21 in.
Designs and Prototype
Wireframes
Time to start designing some wireframes. I forgo the sketching phase for this project, as I had a very clear picture of what this product would look like. Since I had done the Mockups before, I new what size all my elements and text needed to be, making for a very efficient process. After designing all the necessary screens and popups/overlays, I created an annotated presentation of all the screens, marked up for a potential client or developer. Some of the slides are shown below.
Style guide
Let's add some color! Finally, it was time to get the specifics of the UI down. Color styles were set based off of SoBol's branding, as well as some creative liberties from myself, to create a more vibrant interface. Spacing, typography, button measurements, UI elements, Screens, and animations were all explained in this guide, and much more.
I created a presentation for potential clients and developers, so they could get a better understanding of what kind of product they are receiving or making. Although this stage was tedious, with the reporting of every single minute detail, it was an important step. Some of the slides are shown below.
Comps
At the same time as I made the Style guide presentation, I was working on visual compositions for the main screens used in the user flow. These were fairy simple to make, as I didn't really change that much from my wireframes besides a few extra labels and embellishments.
I also decided to start prototyping while designing the comps, because I knew the next step in this process was creating an animated prototype. A few of the main screens are shown below.
Wrapping Up
What I Learned
With more experience under my belt as a UX Designer, this project was a lot more fun to do compared to my first UX Project. With many of my classes focusing on just designing interfaces, and not the research portion of design, it was refreshing to go back to it, but under the guidance of a new professor.
I think the most important part of this whole process would be the Product Requirements. Understanding SoBol's brand, what assets they use and what the necessary information would be to produce a quality user experience were all very important aspects to understand, and I had never really dove into these specifics. A lot of my decisions in this stage dictated what my final designs looked like, so it was important to spend the effort determining specifics early, so I wasn't changing my designs a lot last minute.
This was also one of my first time designing for a screen other than mobile, and it was definitely needed. I have a better understanding of spacing, grids, and layouts, as well as a new found appreciation for multi-disciplined designers. Larger screens do not necessarily mean more content, but it leads to bigger questions of how to lay out information in an orderly fashion, while keeping to basic UI laws.
A lot of my more in-depth decisions are in the process document at the top of this page, so please check that out if you're interested in my design process and more calculated decisions.