Vicki: Smart Checkout

The Vicki app is an all inclusive management and retail system that help customers keep track of their personal information and interaction with Vicki machines.


Research & Analytics, User Testing, Visual Design


Sketch, Adobe Illustrator

While working as a UX intern at Via Touch Media, my largest scale project was the Vicki App. Vicki is an IOT self checkout solution for retail, an upgrade to the traditional vending experience. Shoppers are able to approach a Vicki machine, reach in to grab the product they want, and use digital payment options, their thumb print, or IRIS scan to complete their purchase. 

The goal of the app is to broaden the Vicki ecosystem for new and existing Vicki users. The app will be an all inclusive management and retail system that help customers keep track of their personal information and interaction with Vicki machines.

I was the sole designer for the project and spent 3 months researching and creating the visual mockups for the web application. 

The Challenge

The Vicki experience is extremely broad, it can function in both commercial and public spaces. Since Vicki exists within buildings or mapped locations, it's necessary to provide a way to track the machines as well as the products available. 

The primary objective is to create a minimum viable product that completes and eases the Vicki interaction. To achieve that, I must narrow down the necessary features and figure out the best way to optimize each step of a user's journey with the app. 

The Process

The first step was for me to understand the Vicki machines in detail. A series of user tests were done where I was able to observe first time users interacting with the machine and trying to complete designated tasks. This first experience was particularly valuable as there are lots of things I brushed over as being "intuitive" that many users (especially if they are not technology inclined) was confused about. This made me realize the importance of clarity that I hope to carry into the app and to include an informative but non-disruptive onboarding process for new users.

The next step is to try and validate my initial assumptions with market research. Since there isn't anything like Vicki on the market, I divided the comparative competitor analysis into categories of potential features (i.e. wayfinding, banking and digital payments, etc.) and found competitors within the specific groups to compare.

The primary users of Vicki can be divided into two categories since Vicki exists in two sphere: business and public. This means that there are users who typically go to the same Vicki machine (business), but also users that need to either find the Vicki closest to them, or the one closest that has the exact product they need. From that I've created user personas that outline goals and frustrations to better help me prioritize features and design decisions.

Sitemap and Paper Prototype

In the sitemap review with the creative director at Via Touch, while most issues were small bumps, there was the issue of public vs. private Vickis that we overlooked. Since some Vickis are located in corporate buildings, we needed to find a way to distinguish it on the map or implement code that would adjust the setting for different users.

The solution we decided on was for Vickis in private buildings to not automatically exist in the map, but once you've made a purchase at a private Vicki, it'll be added to the list of accessible Vickis on the app. I also brought up the possibility to "register" a Vicki machine into the app with an extra option in the settings, but that would require more work on the user side as opposed to automatizing it.

After completing a paper prototype, I conducted usability tests. The process really helped me hone in on visuals and task flows that lacked clarity. The homepage also underwent several wireframe iterations in order to achieve "everything-at-a-glance" without being overwhelming and too busy.

Key design iterations:

  • Don't make the user jump through too many hoops, allow multiple paths to completing a task. I decided to include a Vicki help button on the homepage so users would not have to go to settings and filter through the options there to get help. 
  • Connecting the FAQ, Contact, and VickiChat screens. In earlier iterations the three were separate from one another each in its individual screen. I realized that this was taxing on the user and would be a much more fluid motion if they were able to go into the FAQ and if their question isn't answered, jump immediate to chatting with Vicki or filling out a contact form.
  • Expanded map option so that a user is able to select Vickis on a map rather than having to gage by address alone. This'll also make it easier for users to see and use the map in general.

The Solution

Once the paper prototypes were approved, I adapted them into digital wireframes and eventually added in Vicki branding and designed the complete app. The most important functionality of the Vicki app is to provide users with a quick overview to their Vicki activity as well as a way to reach out and troubleshoot if necessary. With the favorite Vicki function, I was able to appeal to my user personas, allowing them to use (or not use) that feature as they see fit! 

Using Format