Overview
Salling Group, our large retail customer, replaced their traditional phone system with Zello as their main communication tool for their employees. However, their retail stores still relied on desk phones for customer assistance.
The lack of continuity between their communication tools resulted in shoppers leaving the store without making a purchase. This problem was further amplified by COVID-19, as people were less inclined to have close interactions.
I was the main designer creating prototypes, presenting to leadership, and delivering assets for production. I worked closely with the CPO (chief product officer), design manager, and one engineer.
Key Areas of Focus
When I joined the project, the CPO had already done extensive research on his own by doing customer calls and user interviews to narrow down the user and business goals
User Goal
Empower shoppers to ask for assistance without feeling frustrated or discouraged.
Business Goal
Retain and increase kiosk deployment for our retail customers.
Based on these goals, his proposed solution was a web-based single-page application that could be deployed in kiosk mode on customers’ mobile devices, enabling them to request assistance with just one touch.
User Flow
User requests for help
User waits for help
User is connected to help
First Launch
Exploration
Having the baseline and flow of the solution laid out already, it was then my responsibility to explore the designs.
From speaking to Salling, they planned on using a medium-sized tablet and placing it on their help desk. My primary objective was to optimize the kiosk’s accessibility. I achieved this by using best visual practices and sound design principles.
During the exploration phase, I tried different approaches to make the kiosk more accessible:
Making foreground colors stand out - using colors with high contrast
Using optimal font size for readability
Maximizing the interface’s intuitiveness
Using sound and animation to provide feedback on a user action
User Requests for Help
To determine the best font size, I placed the mockups on a device of similar size and viewed them from a distance, simulating the users' perspective. This allowed me to ensure that the text remains easily readable and accessible to users.
For the button style, I followed a skeuomorphic approach and added a finger icon to enhance its affordance. This design choice was made to make it clear and intuitive to users that the button is interactive and can be tapped. By incorporating these visual cues, users can quickly understand and engage with the button's functionality.
Button unpressed
Button pressed
User Waits for Help
I incorporated a standard spinner accompanied by a text that displays "Finding available associate..." This combination of animation and feedback text provides users with reassurance that the kiosk is actively searching for assistance.
The cancel request button also follows the skeuomorphic design to match the request for the help button, ensuring consistency and a sense of familiarity for the users.
Button unpressed
Button pressed
User Is Connected to Help
When an associate is available, the spinner is replaced by their profile photo. Although the user is still in a “waiting” state, the copy change to “[associate’s name] will be with you shortly” and visual feedback provides reassurance that help is on the way.
Button unpressed
Button pressed
Palette Test
To ensure scalability for future deployments of the kiosk for other retail customers, I tested the color palette to assess how well my designs worked with different brand colors.
Design Hand-off
Prototyping & Feedback
To test the effectiveness of animation and the use of sound, I created a prototype with Principle. This was my first time using sound in my designs and prototyping with a new tool. It took a lot of research, trial-and-error to land on a prototype that I was satisfied with.
This would have been a great opportunity for user testing with the prototype I created, but due to time constraints, we made do best with internal testing. After multiple rounds of feedback, we landed on a solution everyone was satisfied with.
Second Launch
Two Way Communication
After the initial launch of the Zello Kiosk, we saw an opportunity to improve efficiency by allowing employees to assist customers without physically attending the kiosk.
After discussion with engineering, we landed on a new flow:
User requests for help -> user waits for help -> user is connected to help -> employee starts speaking (new) ←-> user is cued to speak (new)
User Receives Voice & User Sends Voice
I explored various different options to visualize audio, including audio waves, sound bars, and animated icons. While I would have liked to explore more complex animations based on audio inputs and outputs, I had to simplify the animations due to the project scope.
After an internal feedback session involving both design and engineering teams, we ultimately decided on using an animated microphone icon to prompt users to speak and audio rings that emanate from the associate’s profile photo to indicate that the associate is speaking.
Employee is speaking
Listening for user
Prototyping & Feedback
To animate the microphone icon and the audio rings, I used two new tools that I had not used before - Origami Studios and Codepen.io. As these were new tools, there was a steep learning curve and I received guidance from my design manager. I found that Origami Studios was helpful in demonstrating the flow of the animations to the stakeholders, while Codepen.io allowed for a more accurate representation of how the audio rings will be implemented as it was written in code.
Employee is speaking
Listening for user
Refinement & Hand-off
During the refinement stage, similar to round 01, while it would have been great to test the prototype with our clients, due to time constraints, we did our best with internal testing. After landing on a solution that everyone was satisfied with, I handed off the necessary materials to the engineer.
Final User Flow
Outcomes
Success Metric
Since March 2024, the Zello Retail Kiosk brings in $10K monthly recurring revenue (MRR)
Customer Reviews
“My favorite thing about the Kiosk is probably that when I’m out in the warehouse, I have the opportunity to help even when I’m not in the department.”
“It’s really cool because we can ease the checkout line.”
“When we put this kiosk in production, we can actually see how people are using it. That helps the store improve the NPS score and improve the customer experience.”