Research and Redesign for an AI-based self checkout system

Users

The target user group was restaurant staff working in a dynamic and sometimes high-pressure environment. These users had varying levels of technical proficiency and were often resistant to changes in their established routines. The challenge was to introduce an improved version of the system without increasing their perceived workload or interrupting their existing workflows.

Restaurant environment

Each restaurant's unique operational needs added even more complexity. The system needed to be flexible enough to accommodate different menu structures and operational styles, without compromising efficiency.

For this project in a startup environment, I was part of a small, dynamic team, as the sole UX/UI designer. My responsibilities involved an iterative design process, from setting requirements to testing and refining the interface, with close collaboration and regular reviews and adjustments with the product manager.

Gathering Requirements

The data collection process mainly involved qualitative methods. Firstly, interviews and open-ended, exploratory discussions were conducted with both the operations and business teams in the company, gaining insights into daily functionalities, strategic goals and technical constraints.

This was followed by detailed interviews with the customer support team, which provided firsthand insights of user-induced errors, such as menu setup inaccuracies by restaurant staff, which often resulted in rescans and checkout delays. I also reviewed service reports and customer feedback, getting a deeper understanding on the types of errors encountered.

Observational Studies and Heuristic Evaluation

The process involved empathizing with the users. By visiting customer locations, I performed direct observation and semi-structured interviews with restaurant staff, identifying key pain points and challenges.

Additionally, I conducted a heuristic evaluation of the current system's design. This involved a systematic assessment against established usability principles, identifying potential design flaws and areas for improvement.

In the data analysis phase, insights from internal team discussions and customer interactions were categorized into distinct requirements, such as user, business, technical, and usability requirements.

Then, a thematic analysis, which involved identifying patterns and grouping data into themes using an affinity diagram, helped identify the most significant issues, such as 'Menu not activated' errors.

These themes were then ranked based on their importance, which guided the prioritization of the issues to be addressed first.

Some of the most important themes that emerged were:

• Interface issues
• Missing images
• Many similar items
• Unclear when to add new
• New features

This phase involved brainstorming sessions, where I collaborated with other team members to generate a range of solutions for the identified issues. Then, these solutions were prioritized using an effort/impact matrix, focusing on those with high impact and low effort to maximize efficiency. This approach helped us quickly identify and target the most important improvements, focusing our efforts towards the solutions that would most effectively enhance the system's usability in the first design iteration.

The prototyping phase followed an iterative approach. It began with initial rough sketches, evolving into low-fidelity and then high-fidelity prototypes in Figma. Each stage of the design was developed in close collaboration with the product manager, ensuring the incorporation of feedback at every step. For example, initial sketches indicated a need for clearer menu navigation, which evolved substantially in the high-fidelity stage.

The first design iteration addressed specific challenges and requirements identified earlier. Key improvements included adjusting the article card layout to simplify variant selection, carefully considering the touch target sizes for ease of use. The design retained certain elements from the existing system for user familiarity, while introducing new features like a centralized search bar and an intuitive sidebar menu for categories. Enhancements were also made in feedback mechanisms, introducing real-time acknowledgments and error messages to aid users in navigating the system more efficiently.

The second iteration of the design incorporated feedback from the first round of internal user testing. Changes included reworking the menu activation flow for clarity, and adding a new dialog to show system errors and warnings. The processes for searching and adding menu items were simplified. The category assignment dialog was streamlined to reduce error rates.

Some of the new screens incorporating the new functionalities, are presented below.

User Testing Procedure

User testing was carried out in two phases, first with internal team members and then with external restaurant staff, to evaluate the prototypes' usability and user experience. The initial phase included a pilot test, followed by structured tasks and the "think-aloud" method for in-depth insights.

The second phase involved targeted remote sessions with restaurant staff, focusing on specific functionalities of the Figma prototype. Key metrics such as task completion time and user satisfaction were assessed. Feedback from post-task interviews across both phases was critical for refining the prototype to better meet user needs.

Data Analysis after User Testing

Post-user testing, collected data was analyzed for actionable insights. Interview transcriptions and thematic analysis helped categorize key usability issues and user feedback. An affinity diagram was used for organizing this qualitative data into clear themes. Quantitative data, although collected, were not included in the final analysis due to limited sample size, serving instead as a basis for future research directions.

This case study presents the journey of redesigning an AI-based self-checkout system for restaurants.

Impact

While the full impact of these changes on the system’s usability and efficiency wasn't measured due to their post-internship implementation, the redesign received overall positive feedback in user testing, especially for its intuitive layout and clearer navigation. Users appreciated the immediate and informative feedback mechanisms, which boosted their confidence in using the system.

Reflection

Reflecting on this experience, I've gained a deeper understanding of the complexities of user-centered design, especially in the context of AI technology. The project highlighted the value of iterative design and the importance of integrating user feedback into each stage of development.

First Usability Evaluation - Internal Team Members

The initial usability testing with internal team members revealed a positive response to the redesigned interface's clean and lean aesthetics, particularly appreciating features like the centralized "Add" functionality and intuitive sidebar. However, feedback indicated a need for larger UI elements and clearer feedback mechanisms. Key concerns involved the user-friendliness of scrolling variants and the clarity of the menu activation process, suggesting a need for more intuitive navigation and confirmation cues.

Second Usability Evaluation - Restaurant Staff

The second round of testing with restaurant staff showed a general preference for the redesigned layout, especially the fixed-width article cards and the efficient navigation enabled by side menus and prominent 'add' buttons. The integrated notification system for issues was well-received. Concerns were raised about the practicality of horizontal scrolling for variants and mixed reactions were noted regarding the placement of the 'add' feature, indicating areas for future refinement.