Eat is one of the Middle East's fastest growing startups, offering two products: Eat for Business (B2B) and Eat for Consumers (B2C). Eat for Business is an advanced restaurant reservation and table management system. Built in partnership with some of the world's top hospitality brands, Eat runs on iPads & the Web and allows restaurant operators to take control of their online reservations, manage their restaurant with ease, and make data driven decisions based on analytics.
My role as Head of Design was to ensure that the final product meets the set requirements based on the product brief and business goals. I was responsible for conducting competitive analysis, put together the information architecture, prototype the application, and create a design system.
One of the main challenges I faced was delivering the same user experience on the web as we had on the iPad app. To overcome this challenge I had to create a similar design and adapt it to the web UX since the user behavior on the web is completely different. Another important aspect was to make the product as responsive as possible on these platforms to adapt to any device from the smaller mobile screen to the large computer displays. Lastly, creating a functional design system was a challenge I faced while working on this project. Seeing as Eat was growing so quickly, this was the best time to design such a system. Without on it would become very difficult to maintain all the products consistently.
The first step in the project was to go low-fidelity and use a whiteboard to review all the current information architecture we had on the iPad. We constantly try to make every build better than the previous one, so the ultimate idea was not just to transform the architecture from the iPad to the web, but to see how we can improve it and use the learnings to come back and improve the iPad app in the future. A good example of that is navigation that we re-built, table view, and reservation open state, but also a lot of small improvements across the entire product. The next big step was to make it more high-fidelity and create wireframes, and discuss possibilities with our development team.
After we had the wireframes and architecture ready, I started with creating a moodboard with web dashboard interfaces & complex apps. The next step was designing navigation block which contains::
1. Main left navigation
2. Main top navigation
3. Page-based navigation
The first feature we built out for the web was the "Add Booking" view. This is one of the most used and important features of the entire software. We decided to go with a full-screen page for this feature, making sure all necessary information is easily accessible and responsive on any device. This feature is accessible from the main top-navigation from anywhere in the app. Designing with a data-driven approach helped us to pre-populate some of fields with the most used selections (example: Date/Time/Pax which is in most cases Today - 8PM - 2 people).
The floor view is another aspect of the application that we noticed customers spent the most time. It helps to get an overview of rooms and tables, as well as reservations from the same window. It's made of:
1. Reservation panel
2. Table overview
Both of the above ended up looking slightly different than the iPad app. The reservation panel was minimized to make the most important information easy to read. The table overview on the right hand side of the screen received a much needed redesign for the tables. Previously they had a very minimal look, but with the addition of some subtle details such as the number of chairs, they ultimately look a lot more robust.
The reservation open state is available through a few of the views in the app. As it shows detailed view of the reservation it can be triggered from Floor's reservation panel, Book view, Table view & Grid view. We had to rethink the current design as it became too crowded with information and details, so we had to find a better way to show them.
Book, Table & Grid views were the result of customer requests and feedback. They wanted to be able to have different ways of viewing and managing their bookings, so over time these features were built out. Each of them helps restaurant managers in a particular situation. In the web version, the table and grid view received the biggest changes, book view remained very similar to the previous version due to its simple design.
The best award a designer can get is happy users/customers. Even though the product video was filmed few years ago I wanted to share it as these stories makes me incredibly happy to see that my design is used on a daily basis to solve real problems.
If you've reached this far, thank you. I just wanted to note that this is still an ongoing product and well into its development phase, hence the reason you aren't able to see a live version yet. There are a lot of features and details about this product that I am unable to share, but if you have any questions or are curious to learn more about my process, please feel free to contact me below.
Thank you for reading.