UI FIX | INDEPENDENT REVIEW
Improving the UI of a product portal for a café
Project overview
Project type
Independant review
My role
UX Researcher
UI Designer
The team
Web designer
Web developer
Communications advisor
Project manager
the Tools
Miro Collaboration tool
Notion
Google docs
the timeline
Feb - Jun 2024
Introduction
Imagine working in a busy café. Clients are placing their orders at the kiosks, you’re trying to stay ahead on coffees, running food to tables, and fielding questions at the counter. Suddenly, the kitchen tells you the most popular item on the menu is out of stock. You need to act quickly: find the item in the stock management app and disable it before more orders come in.
But then you’re faced with a screen like this:
No relevant filters, no logical order, and a search bar that is unusable because there is no keyboard. It's unintuitive, cluttered, and nearly impossible to navigate under pressure. In this case study, I’ll walk through how I redesigned this specific screen to be faster, clearer, and more accessible, especially for employees with dyslexia.
Project goal
-
Findability of products
-
Clarity of stock status
-
Accessibility for all user types
-
Efficiency in disabling/enabling products
01. Meet the crew
Lisa
Lisa thrives in fast-paced hospitality environments. She’s responsible for overseeing the day-to-day operations of the café, managing staff, keeping the workflow smooth, and ensuring customers have a great experience. She’s tech-savvy but doesn’t have time to fiddle with slow or clunky systems—efficiency is everything during the lunch rush.
Fadi
Fadi came to the Netherlands from Syria two years ago as an asylum seeker. He has worked hard to build a new life, and now studies part-time while also working shifts as a barista. With a B2 level of Dutch, he communicates confidently but still occasionally looks up complex terms. Fadi is diligent and eager to prove himself, balancing learning Dutch culture, studying, and working. He appreciates tools that are visually intuitive and easy to understand—especially during busy times when he’s expected to act quickly and multitask.
Emma
Emma is completing her MBO and learning on the job. She’s still adjusting to the pace of the café and is often nervous about making mistakes. She has dyslexia and finds the current system’s lack of visual structure challenging. Clear labels, symbols, and color cues help her navigate confidently.
02. Current UX Challenges
Poor Findability
-
No search filters by category, status, or name.
-
Search bar is unusable without an on-screen keyboard.
-
Products aren’t grouped or sorted alphabetically, or in any logical way.
-
Duplicate cards per product name make it hard to know if you’ve disabled the full product.
Lack of Visual Hierarchy
-
Little distinction between product cards regardless of importance or availability.
-
Text is center-aligned and difficult to scan quickly.
Accessibility Issues
-
Dyslexic users struggle with scanning text-heavy layouts.
-
Lack of symbols or icons increases cognitive load.
-
The menu scrolls out of view when scrolling down
-
Inconsistent labeling (e.g., different names for the same item).
03. Design solution
Unified Product Representation
To address the usability challenges and make the interface intuitive and efficient, I introduced several key design improvements.
The first major change was to unify how products are represented. Previously, duplicate product cards - like "Brie Sandwich" and "Sandwich Brie" - created confusion and increased the chances of missing a variant when disabling a product. In the redesigned system, each product now appears as a single, consolidated card that shows the primary product name.
Categorization & Filters
To make navigation more intuitive, I added a side menu containing the search bar - which now displays an on-screen keyboard when clicked - and appropriate filters. Users can now filter products by category (e.g., sandwiches, snacks, drinks), stock status (enabled/disabled), and product cards are sorted alphabetically. This simple addition dramatically speeds up the process of locating a specific item, especially during busy periods when time is critical.
Hierarchy
The layout of the product cards was also overhauled to support better visual hierarchy. Instead of centred text, product names are now left-aligned with consistent formatting. Each card clearly displays the category and name, along with a large toggle button to enable or disable the product. This structure allows users to scan content more quickly, with less cognitive effort -especially important for employees with dyslexia.
Accessibility
I also included visual indicators such as color-coded badges and icons to make product status more immediately recognizable. A green badge represents an available product, while a red badge shows that it’s disabled. These cues reduce the need to read every label and offer quicker recognition through visual association.
Visual Recognition
To make products even easier to recognize at a glance, I incorporated existing product images from the order kiosks directly into the product cards. This visual reinforcement helps users - especially those with dyslexia - identify items faster without relying solely on reading. A clear image paired with the product name creates an instant association, reducing confusion when product names are similar or inconsistently formatted.
Before
After
Real-Time Feedback
Real-time feedback in the form of toast notifications ensures that staff receive confirmation of successful updates, helping them work with confidence.
04. Final Product
Expected benefits
-
Faster product management under pressure
-
Reduced human error due to visual grouping and confirmation feedback
-
Improved accessibility for neurodiverse employees
-
More intuitive training for new and temporary staff
Final thoughts
Redesigning this interface wasn’t just about aesthetics. It was about making a chaotic part of café work smoother, fairer, and more intuitive for everyone involved. The new logic and structure of the interface now support fast-paced environments, neurodiverse users, and smoother team operations.
