AI Checkout

for VisioLab

UI/UX Design

Making AI-powered food checkout familiar and functional for regular people

Problem

Non-tech-savvy cafeteria guests and staff have never used computer vision AI for checkout, putting the checkout and food onboarding processes at risk when using our AI-powered self-checkout system.

Solution

I led the design of a lightweight, familiar interface for the checkout and onboarding app, leveraging users' existing knowledge of similar applications to minimize the learning curve and maximize functionality.

Impact

Successful MVP delivery

We met our target date for the pilot program, securing valuable user feedback and demonstrating our product's worth to clients and investors.

Reduced wait times

"The speed and simply the number of guests we can checkout in a short space of time have made it easier to cover peak times." —Phillip Heckmann, Deputy Head of Studentenwerk Osnabrück Catering

Business expansion and growth

As a result of our pilot program's success, we rapidly expanded to three other cafeterias, validating our technology and paving the way for further growth in the industry.

AI Checkout

for VisioLab

Making AI-powered food checkout familiar and functional for regular people

Company

Company

VisioLab

VisioLab

Platform

Platform

iPad Native

iPad Native

Role

Role

UX Designer

Product Designer

Timeline

Timeline

5.2021 - 8.2021

5.2021 - 8.2021

Tools

Figma

Concepts

Pilot program approaching, MVP needed fast

Pilot program approaching, MVP needed fast

When I joined VisioLab, the small team was struggling with an underdeveloped product that wasn't client-ready. With a looming pilot program deadline for one of the largest student cafeterias in Germany, we needed to rapidly develop a professional-grade product capable of handling high-volume cafeteria environments.

Cafeteria audience didn't have experience with AI

Cafeteria audience didn't have experience with AI

Cafeteria guests and staff were short on time, varied greatly in demographics, and had likely never used computer vision to pay for food or as part of their workflow. The success of our pilot program—and ultimately, our product's viability—hinged on creating a seamless experience with a short learning curve that could be effortlessly integrated into the high-paced cafeteria workflow.

Goal

Goal

Understanding cultural expectations with checkout

Understanding cultural expectations with checkout

To check out a meal, cafeteria guests would slide their meal under an iPad running our software, which would then scan the meal, summarize the price, and allow guests to pay. Considering our goal of making AI familiar, I conducted field research at local retail stores to understand the cultural expectations around automated checkout systems.

Field research of automated checkout systems

Applying research insights to improve familiarity

Applying research insights to improve familiarity

From the research, I observed that most automated checkout systems followed a three-step process: scan your items, view a live summary of your cart, and pay for the items. The previous designs that were handed off to me included these important components but had separated them into more steps, unaware of the industry standards. Using the findings from the research I was able to advocate for and execute the reorganization of our checkout process, creating a simpler and more familiar checkout flow.

Ideation of new checkout design

Designing a simple food onboarding experience

Designing a simple food onboarding experience

Cafeteria staff are a crucial part of the product as they had to train the AI model every morning to account for variations in food appearance. When designing the onboarding experience, I prioritized simplicity for non-tech-savvy employees. I minimized navigating through multiple screens, provided help dialogues, and reduced the number of interactions needed for successful AI training.

Photodock: Allowing cafeteria staff to edit photos

Photodock: Allowing cafeteria staff to edit photos

One challenge that emerged during early iterations was that employees needed a way to correct poor-quality photos. In the spirit of familiarity, I looked at modern image management components on iOS and Android—as these were familiar to our user base—and developed a photo dock. On top of allowing users to retake photos, the dock also served as an image counter to inform the users of their progress in the training.

Ideation of Photodock feature

Final Designs

Final Designs

Impact

Impact

Successful MVP delivery

We met our target date for the pilot program, securing valuable user feedback and demonstrating our product's worth to clients and investors.

Successful MVP delivery

We met our target date for the pilot program, securing valuable user feedback and demonstrating our product's worth to clients and investors.

Reduced wait times

"The speed and simply the number of guests we can checkout in a short space of time have made it easier to cover peak times." —Phillip Heckmann, Deputy Head of University Catering for Studentenwerk Osnabrück

Reduced wait times

"The speed and simply the number of guests we can checkout in a short space of time have made it easier to cover peak times." —Phillip Heckmann, Deputy Head of University Catering for Studentenwerk Osnabrück

Business expansion and growth

As a result of our pilot program's success, we rapidly expanded to three other cafeterias, validating our technology and paving the way for further growth in the industry.

Business expansion and growth

As a result of our pilot program's success, we rapidly expanded to three other cafeterias, validating our technology and paving the way for further growth in the industry.

Copyright © 2024 Sebastian Viasus