Hospitality Innovations Web App

I began full-time work with early-stage startup, Hospitality Innovations, in June 2021 as their only UI/UX designer. After designing their mobile app from the ground up, I moved on to designing a companion web app. I suggest you read the mobile app project first, if you haven't already.

A lot of the hospitality industry is still on pen and paper.

If you haven't read the mobile app portion of this project yet, here's a quick background on Hospitality Innovations. Many restaurants are still using pen and paper to do their inventory, track their ordering, and perform other back-office tasks. Hospitality Innovations aims to streamline back-office operations.

The hospitality industry is chaotic with frequent distractions. Hospitality managers tend to hardly use technology for work other than simple features on Excel, so the experience had to be fit for someone who is not tech savvy.

With Hospitality Innovations, you can take inventory, place orders, generate reports, and manage your team all in one user-friendly place.

Derrick Jones, 38, Married, Father of two kids and both owner and chef of a popular local restaurant. Goals: With Derrick’s long hours, he wants tasks like taking inventory, placing orders, and team management to be as efficient as possible, for more time to spend with his family and more room in his budget to keep the business running smoothly. Frustrations: He’s been cooking his whole life, and the rest of the industry still uses fax machines and paper order cards, so the most technology experience he has is baseline Excel. With too many vendor order sheets to look through and too little time, he typically orders from the same vendors he always does, even if there may be cheaper options available. With the long daily process of taking inventory, he sometimes misplaces the paper he was using and has to restart, suffers from tech blunders using computer spreadsheets, or a crisis interrupts him and he loses his place.

More features without compromising usability.

I was tasked with adapting every mobile screen into a companion web screen, each with more functionality than on mobile.

The primary challenge with this project was crafting a user experience that mobile users could easily pick up, despite the expansion of functionality.

My goals with the web app design were to aim for a clean, familiar look that uses the additional screen space for more conveniences.

Mobile home screen translated to web home screen.

Here's the process from homepage to inventory.

I translated all mobile screens to web app versions, but I will just take you through the homepage and the inventory features for brevity.

The design evolved incrementally with feedback.

To nail down the basic layouts of each page, I began wireframing. I started with the homepage, then moved onto the more detailed inventory page. I kept in mind my initial goals of a clean look, familiarity, and space for more features.

Then, I collaborated with our CEO and software development team to ensure that the layouts fit our long-term plans for functionality, as well as were feasible to put together. I also showcased the design to hospitality workers for unbiased feedback. After each round of feedback, the design increased in fidelity.

Early wireframe of web app homescreen, very low fidelity.

Web app wireframes going from low fidelity to medium, to high fidelity.

A homepage as adaptable as our technology.

Hospitality Innovations provides many other features outside of just inventory. We also have varied user roles available that allow certain users to see more features than others. That's why we landed on a layout that could easily adapt to showing one feature or many more.

Mobile versions of the homescreen for reference.

Homescreens with different levels of access. Inventory-only access, Inventory and ordering access, full access, and future possibilities with six apps shown.

A sidebar ready for every use case.

The conventional placement of a sidebar is on the left side of the screen, but ours is on the right. We wanted to show that Hospitality Innovations is something different. Our sidebar isn't just for menus. It's more like a helpful additional workspace that transforms based on the task you're trying to complete.

Highlighting the sidebar on the right side of the screen.

How the sidebar is used adapts to the task you're trying to complete. This example is showing editing columns.

The sidebar collapses when you need some space.

The sidebar expands to the the right further when there's more to see on the sidebar.

The flexible sidebar design leaves room for the product to evolve, which decreases the need for future redesigns.

An inventory page that needs no instructions.

The web app inventory screen does even more than the mobile version while remaining loyal to the original look and feel.

If they're not using pen and paper, hospitality workers tend to use Excel, so I adapted the card layout into a design that was intuitive for an Excel-user yet was easier to understand. Plus, the user can still export their data as a spreadsheet if desired.

Users can also sum multiple counts and decrease mental math just like on mobile. Except on web, they can reference the rest of their data at the same time, allowing for smoother multi-tasking.

On the web, users can further customize their view by viewing more columns, sorting, and adding advanced filters.

Showing the mobile inventory screen and the web inventory screen to display how it is still loyal to the original look and feel.

Adding up multiple counts is better on web, because you can see your inventory concurrently. On mobile, you add them up on a new screen.

Customize your view, rearrange columns and rows. Showing how you can move columns/rows and customize them.

Showing our inventory page next to an Excel spreadsheet of someone's inventory. Showing how our app is more user-friendly.

The workflow and overall design of the web app work hand-in-hand with the mobile experience, which allows users to seamlessly move between the two efficiently.

Crafting a more flexible product.

After each iteration, I presented the designs to the software development team for insights on feasibility and efficiency. After those adjustments, I conducted tests using UserTesting and with clients to identify further improvements. Here is an example of a change I made based on testing data:

Accessing multiple counts is tailored to the user:

Some users like to keep their sidebar closed in order to see more of their screen. The multiple counts sidebar appeared automatically any time they clicked into their "On Hand" count, which bothered them because they had to close it every time.
To solve this, if the user's sidebar starts out closed, it is optionally accessible via a new button. And then if the sidebar starts out open, the multiple counts will automatically appear like usual. This was a good compromise, as some users like to keep their sidebar open, and multiple counts appearing automatically was a plus for them.

Other testing highlights:

Testers were asked to rate how aesthetically pleasing our web app was on a scale 1-5 (5 being best). Our average score was a 4.4.
Testers were also asked to rate how easy to use our web app was on a scale 1-5. Our average score was a 4.4.

Showing how the sidebar works for users who like to keep their sidebar open vs people who like to keep it closed.

Live prototype in action.

What hospitality workers think.

Here are some quotes from both prospective clients and current customers.
The responses were overwhelmingly positive:

Our web app is an essential piece of streamlining operations in the hospitality industry.

The Hospitality Innovations mobile app successfully streamlined the back-office tasks of our clients, especially on-the-go. However, our web app takes this a step further. Users can seamlessly go from taking inventory on their phone while they walk around their restaurant, to sitting at their desk and analyzing their data on a big monitor.

Since the design is flexible, adaptable, and works hand-in-hand with our mobile experience, it's easy for users to pick up new features both now and as the product evolves.

Why stop there?

Next: A modern tech solution to the loneliness epidemic.