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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Other testing highlights:
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.
Live prototype in action.
What hospitality workers think.
Here are some quotes from both prospective clients and current customers.
The responses were overwhelmingly positive:
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.
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.