The client asked us to develop a restaurant management system from scratch. This includes the ability to customise table layouts, menu items and pricing strategies, as well as integration with other third party systems. Tabela needs to provide restaurants with detailed reports and analytics to help them make informed decisions about their restaurant operations.

Our role

Our role was to conduct research to gain insight into the needs, behaviors, and pain points of Tabela’s customers. This information was used to design the system. We wanted to ensure that it was intuitive and easy to use. After the research phase, we designed the wireframes, created a prototype and, after some edits, started brainstorming design concept ideas. Once we decided on the concept idea, we move on to the UI of all the screens. The results of each stage are presented and discussed with the client to see if this is what they need and if we can move forward.

By conducting a comprehensive research phase that included a SWOT-analysis of competitors, business analysis, app map, and user flow, we were able to gain a thorough understanding of the market, potential customers, and key product requirements. This informed our decision-making throughout the design and development process and helped us to create a system that effectively meets the needs of restaurant staff and customers.

The SWOT analysis of competitors allowed us to identify the strengths, weaknesses, opportunities, and threats of existing restaurant management systems and competitors in the market.

What we’ve done

We conducted a thorough analysis of competitors in the market, including their product features, usability, modernity of design, pricing models, target customers and marketing strategies. This analysis provided insights into potential areas of differentiation for Tabela and helped inform our product development and marketing strategies. As a result of the analysis, we identified a list of key findings that are worth implementing in the Tabela:

• automatically gather all incoming bookings from external platforms on one page ( ‘Reservations’ ) and separate them into two columns: incoming, accepted.
• the ability to create reservations manually on the ‘Reservations’ page
• the ability to assign a waiter as soon as guests have checked-in and choose a few tables for appointments
• the ability to assign more than one waiter to a table
• the ‘Tables’ page with maps of tables, their status, the waiters assigned to them. Ability to keep track on this page of what guests have ordered and display the receipt
• the ability to quickly rearrange tables on the map
• the ‘Dashboard’ page with basic analytics, reservation dynamics and quick access to reservations
• the ‘Reports’ page with advanced analytics such as analytic on customer satisfaction levels, the most popular menu items, and the busiest times of day

During the business analysis stage, we select the best solution, outline the requirements for it, evaluate the most crucial functionality for the customer, and prepare and finalize the necessary documentation. This documentation aids in reducing development costs as all aspects have already been accounted for and thoroughly documented. Developers can focus solely on creating the product according to the documentation, eliminating the need for additional inventions. Additionally, business analysis facilitates precise estimation of the development budget, which helps in planning the company’s budget.

What we’ve done

The business analysis phase in the development of Tabela involved analyzing the restaurant industry and market trends to identify potential demand and opportunities for Tabela. This phase also included gathering and analyzing data on the restaurant industry, market size, and target customers, as well as identifying potential revenue streams and pricing models.

After establishing a strong analytical foundation, the next step in the development of Tabela’s platform is to create a user-friendly interface. During this stage, we focus on designing the interface layout, determining the location of each element, developing a clickable prototype, and selecting the style in which the design will be created.

Wireframe is a preliminary blueprint of a product’s layout and functionality. Its purpose is to provide a basic understanding of how the product will function without going into too much detail. The main goal of using wireframes is to save time and resources in the design process. Additionally, clickable prototypes are often created at this stage to test user reactions and gather feedback since users often think differently from designers. For the Tabela platform, we used wireframes to map out the structure and flow of the application before moving on to more detailed design elements.

In order to establish the appropriate visual direction and style for Tabela’s interface, our team began by creating moodboards and presenting them to the client for feedback and coordination. This process allows us to identify the most fitting design solution before moving on to the UI design stage.

Once the moodboard has been approved, we proceed to develop an initial visual concept for the application to demonstrate the chosen style on several layouts before proceeding to render the UI on all screens.

During the user interface development phase for the Tabela platform, our team creates a complete set of styles for colors and typography. We use design tokens in naming styles to ensure clear communication between designers and engineers. We also create reusable components for common elements to simplify the design process and make it easier to make changes. Ultimately, we assemble the design system and compile all the necessary documentation. This approach not only systematizes design elements but also helps with front-end development, which ultimately saves time and effort.

As a result, we achieved a modern and clean design for the Tabela platform. We avoided visual overload and opted for a simplistic look. The bright yellow accent color complements the neutral tones perfectly. It gives the design a fresh look.