top of page

Inventory Management for Restaurant Admins.

Redesigning The UI/UX of a SAAS B2B Enterprise Platform


Let’s “eatte” Together!

Project Overview


Lead Product UI/UX Designer


  • President / Stakeholder

  • Head of Dev. / PM

  • 8 Developers

  • Lead Product / UX  Designer (Myself) 

  • Direct Report (UI / UX)

  • Content Strategy

  • User Research

  • Information Architecture

  • User Flows

  • UX / UI Design



  • Figma

  • Figjam

  • Sketch

  • Adobe Photoshop



Background & Intro

I was hired as the only Product UX Designer at HUBB VENTURES to redesign the "" platform. Eventually, I hired someone to report directly to me,  so we could achieve our goal of enhancing the user experience, which would ultimately boost user acquisition and retention. The redesign resulted in a 99% CSAT score.

  • "" is a comprehensive centralized software solution for restaurant management, available as both a Saas product and on the web.
  • This software segment concentrates on managing inventory for different types of restaurants, including local cafes, fine dining establishments, and global quick-service chains.

What ?



The “” app. was not meeting sales expectations, this was a challenge for the HUBB admins, as this would hamper the company’s growth. 


  • Timeline.

  • The platform lacked prior UX Research. 

  • Gradual implementation.

Project Vision

  • The goal is to provide restaurants with the tools to efficiently manage daily tasks by offering accessible and powerful data.

  • The aim is to create an intelligent inventory management platform that is vital to the success of any restaurant.


The Process

To ensure the solutions met user needs, I followed a comprehensive design process, including background research, stakeholder and user interviews, usability testing, and competitive analysis. This led to the identification of key issues and user preferences.

Bring to Life






  • Background Research

  • Stalk-holder/user interviews

  • Usability testing & Competitive Analysis

  • Persona

  • Feature Prioritization

  • Mood-board

  • User flow

  • Sketching

  • Low-Fidelity Wireframes

  • High Fidelity Wireframes

  • Design System

  • Prototyping

Continuous Testing through out the design

process after.​

Key Findings



Reflecting on the Situation..

HUBB VENTURES released a beta version without proper research or testing, resulting in design inconsistencies and user issues that needed to be addressed.

Let's take a look at how to add a product to inventory from the user's point of view.

User flow for adding a product to inventory.

Entry Point


Success Criteria


Sign In

Inventory Management






These links are incorporated and linked to the main screen while adding or editing inventory

Starting to understand what this platform had to offer and how it helped admins out.

Before redesigning, it is important to analyze the services, navigation, and terminology of the previous version. The image below shows the services provided by the software.

Before Redesign |

The previous platform had a horizontal navigation bar.


After Redesign |

We added a vertical navigation bar to help admins find things faster & easier, as researched in the first case study. 

"" is an everyday management  software solution that offers:

Order Management

Inventory Management

Employee Management

Marketing Management

Front of House Management

Kitchen Management

Financial Management

Menu Management

Loyalty  Management

Take Out / Delivery Management

The Focus of This Case Study

Understanding the User-flow After Signing In.

Dashboard Screen

Platform Home Screen / Dashboard Screen

with horizontal top navigation 

Top Navbar/ Menu with an Overlapping Drop-down Menu for Sub-Categories.

Adding inventory was difficult due to confusion & unclear terminology on the drop-down menu.

It took several attempts to find the correct path through trial and error.

Package Management Screen

The user tried various logical user flows before eventually clicking on "Package Management" to complete the task. Despite reaching the Package Management screen, they still encountered confusion while trying to complete the task.

Add Package Button

The user came across an "Add Package" button that triggers an overlay where they can input and confirm the necessary information.

Dashboard Screen

Package Management Screen



Most users were bound to experience difficulties navigating the existing system.

Furthermore, they encountered errors and endured time-consuming steps that impeded their progress.



During the evaluation phase, 90% of users faced challenges selecting the correct path to accomplish their task. They tried multiple paths, including:

  1. Inventory Management > Inventory.

  2. Inventory Management > Inventory Log.

  3. Inventory Management > Vendors.

  4. Inventory Management > Brands.

  5.  Eventually, the correct path was selected: Inventory Management > Packages.


This discovery highlights the importance of addressing the navigation and clarity issues within the system to enhance the overall user experience and streamline task completion.


​I identified several user pain points through research, virtual interviews, and moderated usability testing.

  • Conflicting terminology and information architecture proved to be a significant frustration, leading some users to contemplate abandoning the usability test.

  • The task itself posed challenges due to confusion in selecting the appropriate path to achieve their desired goal.

  • The user journey was prone to errors, primarily caused by overlapping navigation boxes and unclear options.

  • The unfriendly user interface design contributed to difficulties in understanding how to proceed with the task at hand.

  • To provide a visual representation of user interactions with the inventory addition task, I have prepared a user journey map for reference.

Pain Points

User Journey Map


User research summary

I conducted virtual interviews and moderated usability testing to gain valuable insights into the restaurant industry, daily tasks, and the psychology of our target audience. Additionally, I performed a thorough competitor and SWOT analysis to better understand our product's competitive landscape.

Key Findings

  • Users highly prioritize a seamless and intuitive user flow when adding products to the inventory, with a strong emphasis on minimizing unnecessary clicks.

  • There is a clear demand for more comprehensive data input options to facilitate efficient review and analysis of the database.

  • Intelligent inventory management emerged as a critical aspect for users to effectively and proactively manage their stock.

  • Several challenges were identified, including confusing user flows, unclear information architecture terminology, an outdated UI, and a lack of sufficient guidance throughout the platform.

  • Enhancements to the inventory database are necessary, such as incorporating additional filters, improving visual representation through the use of images, and delivering an enhanced UI design that puts the human experience at the forefront.

  • Users expressed a strong desire for automated form-filling capabilities and the ability to seamlessly compare data with their shopping or inventory lists, all within a convenient and accessible unfolding side window.


The Results

User Issues within the current App.

Error Rating table.

Results & error rating

4 =  A usability catastrophe; fixing it before the product can be released is imperative.

0 =  Represents that it does not have a usability problem at all.



Showed extreme frustration.

All except one failed task.

Learning About Our Targeted Users.

Through interviews, business requirement analysis, affinity and empathy maps, & persona development, I gained insights into our targeted users. With a focus on decision-makers for our B2B Saas product, as well as restaurant personnel, I obtained valuable information to guide our design process.

User Insights

Image by Gregory Hayes

Rob is a restaurant owner of multiple branches in NY.

Rob prioritizes efficiency and clarity in software management.

He values straightforward solutions that add clear value to his business and save him valuable time.

Lisa is a restaurant manager of a restaurant located in a shopping center in NJ. 

Lisa focuses on staff communication, efficient inventory management, and effective owner collaboration to ensure smooth operations.

Image by LinkedIn Sales Solutions

Dave is a chef in a fine dining restaurant in CA.

Dave prioritizes organization and relies on software to keep inventory up-to-date, especially during busy periods.

Image by Mason Wilkes

Project Goals



How can we optimize the process to enable admins to accomplish this task with ease & clarity?

In order to optimize the restaurant admin's experience when adding a product to the inventory, our goal is to streamline the process, improve clarity, & minimize any potential confusion.

Goal # 1 :
Simplify data visuals for effortless product addition to restaurant admins' inventory.

Goal # 2 :
Design a modern, user-friendly UI for efficient access to inventory management tools and optimal feature utilization.

Goal # 3 : 

Provide a seamless user experience that enhances productivity and time-saving for our users.


Design Solutions & Iterations



From Findings to Features

Based on insights from research like business vision, users' needs & wants were collected & analyzed through testings, interviews & surveys.
The below anatomy of the dashboard was constructed to reflect the needed features. 


  • adding a product to inventory through a simple smooth user flow. 

  • This is done by automatically opening a form to fill in data to add a product to the inventory.

  • Internally linking the database to add a product to inventory.

We'll be focusing on two inventory management screens: "Adding a Product" &"Inventory Database." Let's give them the spotlight they deserve!

A. Crafting Simple Forms for Adding a Product

Seamless user flow in fillable forms enables easy product addition and accurate information comparison with the "Shopping List" and "Inventory Database." Wireframes showcase design decisions across low to high-fidelity representations.






Left-side navigation bar opens sub-menu for "Inventory Management", with simple straight forward terminology.


Buttons when clicked unfold a vertical left drawer to allow the user to compare info without navigating to another screen.


A vertical collapsable left-side drawer that allows the user to compare info without navigating to another screen.

It also allows some editing of the info in the drawer.


Widgets with input fields & drop down menus to fill in all data about a new product.






The form consists of widgets that adjust accordingly to viewports dimensions.

A vertical collapsable left-side drawer that allows the user to compare info without navigating to another screen.

It also allows some editing of the info in the drawer.

A vertical collapsible left-side customizable shortcut bar

Sticky virtual assistant button Adjustments needed to be pushed to follow layout grid lines.

Widgets sizes adjust when side drawer expands.





Mid-Fidelity Wireframe

Add Product to Inventory Screen

Low-Fidelity Wireframe

Add Product to Inventory Screen

B. Crafting Tables for Inventory Database. 

Constructing tables for the "Inventory Database Screen" which has multiple filter options.

Below is a slide show from low-fid wireframes to mid-fid wireframes,






Top Expandable search field for enhanced item search experience.

The top bar offers quick access to essential tasks like printing and accessing reports, featuring dropdown menus, input fields, & customizable filters for seamless interaction.

Images have been included to improve the visual identification of products.



Enhance ownership and branding by allowing adding personalized restaurant logos



Low-Fidelity Wireframe


Inventory Database Screen

Mid-Fidelity Wireframe


Inventory Database Screen



Attempting to Organize top bar .



Creating customization for filters in a pop left side widget.

Low-Fidelity Wireframe


Final Design Solutions 


Bring To Life

Exploring final concepts for inventory management screens.

  1. Simplify the user flow to add inventory & access to the inventory database with minimum effort & clicks.

  2. Adding buttons that open a left-side drawer to compare the database & shopping list while inputting products' data.

  3. Have an online & offline option.

  4. Redesigning the inventory database screen linked to inventory & adding more filters.


Simple Seamless User-flow


These links are incorporated and linked to the main screen while adding or editing inventory


Platform home screen/Dashboard Screen

Menu has been moved from a horizontal top navigation to a side nav-bar.


The side navigation bar expands to open sub-menu categories.

with simple terminology 

Select "Add to Inventory"


Add Inventory opens a fillable form that directly allows user to fill, revise shopping list and add multiple products then save

Dashboard Screen

Add Product Screen


Considering UI Design Solutions

Final Inventory Mockup Screens

Mockup for Add Product to Inventory Screen.


Previous  Inventory Database / Inventory Log

Mockup for Inventory Database Screen.


Validation & Testing



Does it Really Work?

I conducted more than ten moderated usability testing sessions on the userflow of adding a product to inventory and later on another on the redesigned prototype, to ensure that the information architecture made sense & had simpler & direct terminology.

Change #1

Redefining Labels & Navbar


The usability testing on the prototype showed a CSAT of 99%

Left-side navigation bar opens a sub-menu for "Inventory Management", with simple straightforward terminology.

Input Data instantly in Adjustable Widgets.

Change #2

by clicking "Inventory Management" > then "Add a Product"
This automatically opens a fillable form made-up of adjustable widgets. each widget has input fields. Widgets were the building blocks (
atomic design concept)


Sample of Widget with input fields

Sample of Pop-up widgets to confirm the task completion.

Sample of Pop-up widgets to confirm the info.

Cards / Widgets with Input Fields & Drop-down Menus

Redesigning widgets with input fields & dropdown menus & trying to improve visual appeal & following modern style trends. Focusing on high contrast and accessibility. Selected illustrations were chosen with black outlines to increase contrast.

Style Guide for Drop Down Menus in Input Fields


Change #3

Adding a right collapsable drawer to give the ability to compare data while adding products to inventory.


Design System

Creating a Design System

Creating a simple design system inspired by iOS :
using SF Pro Fonts, Icons were based on Heroicons, while additional icons were added for uncommon icons from “Polaris”, “and iOS (Human Interface Design)” and some I created from scratch to blend with the icon group style.

We previously had an outdated color palette in place that wasn't complying with ADA standards.


Next Steps


Final Thoughts

To ensure that "" team continued to validate the design post-engagement, our team put together some recommended next steps regarding ways their team can continue to iterate, specifically: 

  • Conduct another round of usability testing

  • Measure task completion rate %

  • Implement new features into the Collateral widget

  • Ideate on the statistics card and possibly introduce new data points for our users.

Thank you so much for reading my case study.

"" made me realize just how difficult it can be to produce an application that you know very little about. I had very little knowledge about the restaurant industry coming into the project, so that became problematic when designing around a few screens.


Luckily, I managed to put some time aside to fully understand the product, our competitors, and our business requirements. This made me realize just how important it is to have somebody who knows A LOT about the subject of the tool you are developing in order to create a well-rounded experience for the user.



Searching for a product, UI/UX designer, or  UX researcher that shows passion in their work? Interested in working together? I'd love to hear from you!

bottom of page