A la Orden
UX/UI and web design

Summary

Users

Small gastronomic business owners in Peru who are yet to use digital solutions for their business, cashier operators, waiters, kitchen assistants

My role

Lead UX/UI designer and visual designer to make the MVP for desktop and mobile, a landing page and a pitch presentation

Timeline

4 weeks

Tools

Illustrator, Figma, Trello, Miro

Group.png

Format

Mobile
Desktop
Landing Page
Pitch Presentation

Methodologies

User research
Personas
JTBD
User flows
Wireframing
Image by Brooke Cagle

Project Overview

One of the projects I had as my position of Lead Digital Designer in Bitzone is making a restaurant management tool for Peruvian small gastronomic businesses. Our CEO, Luigui Astohuamán, wanted us to create an MVP to to offer it as a solution to small business owners of restaurants, cafés, foodtrucks and bars that might be interested in purchasing it. A la Orden is one of Bitzone's first digital products, as this company normally offers custom software solutions to clients.

 

The problem

Even though restaurant digital management systems already are widely used all over the world, in Peru many small gastronomic businesses only use POS to register their sales but take all the orders by hand. There is a considerable amount of information that could be obtained from digitalizing their processes that can positively impact these businesses. 

Many business owners are reluctant to digital solutions because of mistrust or lack of knowledge about them. Nevertheless, because of the COVID-19 pandemic, most businesses had to adapt to sanitary regulations and start using digital solutions for delivery, order taking and remote work. Digital solutions in the gastronomic scene in Peru are here to stay, however there is still a large amount of users that has not been able to enter this field for many reasons, such as the cost and the lack of digital expertise.

Waiter with Mask

The solution process

Together with one junior designer and our CEO, we started to explore different ideas to proceed with the UX/UI and visual identity of the MVP. A la Orden is based on an app Bitzone made for the restaurant Maracona, nevertheless the goal was to improve it, expand it and give it a unique branding that introduced it to the market of restaurant management tools.

 

User interviews

When the restaurant Maracona's app was implemented, we got qualitative first-hand information from the waiters, those operating the cashiers and the kitchen assistants. The users commented on the difficulties they were facing when using Maracona app, as well as the benefits after using it for a whole day on the restaurant.

To validate these problems we carried mainly several personal interviews face-to-face with restaurant employees from other restaurants. We interviewed employees and restaurant owners who do not yet have a digital gastronomic management system in their business, so they shared their pains and gains with their actual restaurant management. 

UX extras for Case Studies - Findings.jpg

Interview and qualitative findings from users

Defining the different users

According to the qualitative research we conducted, we then organised the users' JTBD statements. We noticed that we had to address each user individually, as each user would turn out to have their own unique way of accessing the product. Each user works in unison with the others, but in different ways. The idea was to both consider each user and at the same time allow their actions to synchronise and be processed in unison by the product.

With this processed information, we were able to create our personas for each user and to establish clearly the types of user for the app, as they would have their own type of profile and access to A la Orden.

UX extras for Case Studies - Jobs to be done - Business owner.jpg

Business owner's JTBD

UX extras for Case Studies - Personas.jpg

Personas for each type of user

Brand and visual identity

We wanted to create a very upbeat and cheerful brand design, that may appeal to restaurant, bar and café independent entrepreneurs, who are both seasoned owners or just starting out. 

We researched different gastronomic management solutions in Peru and Chile, as well as small cafés and  restaurants. I came with a solution for the naming, the logo and the colours.

 

I chose the name 'A la Orden' as it is a very popular phrase used by Venezuelans in restaurants. Because of the great immigration of Venezuelans in Peru on the last years, this phrase has become very popular locally. A la Orden means 'I will proceed with your order', but with a very cheerful and carefree tone. My team loved the ring of it and believes it captures the cheerful tone the brand wants to give but it is also contemporary and close to our users.

Group 3.png
Group 19.png
 

Improving the UX

A la Orden is not a product made from scratch, its information architecture and main wireframing is based on an app made for a restuarant called Macacona, a client of Bitzone. My team was in charge of improving some UX functionalities of Macacona's app and also making a mobile version, as the original app was only made for desktop.

 

Some of the main improvements we made on the UX include the inclusion of a dashboard for the Admin user showing analytics regarding sales for business management, a clearer distinction between users: Admin, Waiter, Kitchen and Cashier, which also exist as different modules in the application. We also improved the UX writing to make it as clear and consistent as possible and optimised the table selection.

 

It was important to work with user flows for each of the different modules and actions each user did in the app. We used an effort/effect matrix to organize better the conditions that must be met, due to the fact that our time and resources were limited in making the MVP. Also we made a user flow to follow clearly each of our user's pathways.

 
UX extras for Case Studies - Frame 1.jpg

User flow for New Order (Waiter Module)

Product's UI

For this stage I firstly made a few tests with the UI, using the colors and selected typefaces. Then I worked together with the Junior Designer on all UI on the desktop wireframes and the wireframes under the Waiter profile for mobile.

As we are dealing with different type of profiles, we have a great amount of wireframes that may increase or decrease. I focused my efforts on the Admin profile, where I worked mainly on the analytics, and the Waiter profile for mobile.

 

Maracona's app

Showing number of seats, active and inactive, and waiter responsible

maracona_mesas.png

A la Orden

Showing number of seats, filter on all tables, available and occupied, waiter responsible and seeing tables by area)

a la orden_mesas.png

Comparison between Maracona and A la Orden on Table Map wireframe

 
a la orden_ordenar.gif

Ordering flow wireframes

Landing page and Pitch Presentation

It was vital that additional to our MVP we also prepared a landing page and a pitch presentation to show stakeholders and small business owners the characteristics of our product. Both the landing page and presentation show the brand's visual identity, and try to convey the application's energy and vitality to stakeholders and potential clients. There are three purchase plans for A la Orden: On-Premise, Cloud and Custom. 

 
a la orden website.gif

Landing page preview

a la orden ppt.png

Pitch Presentation slides

ADMIN-DASHBOARD.png

Constraints and limitations of the project

As an MVP, A la Orden had a great time constraint, so some parts of the process had to be speeded up. We had to prioritise the urgent improvements needed but there were some, like adding a delivery functionality, that had to be kept on hold. 

There is also some competition in offering a solution of this type for local businesses, so defining the product differentiation was very challenging and I think we are still to define it and work on it better.

 

Admin module's Dashboard

What did I learn

I have learned more about user research on this project, as we worked closely observing and listening to users' feedback. The fact that we did not work a product from scratch allowed us to improve through iteration many of its characteristics and allowed us to be more critical and thorough on the different stages of the project.

a la orden_wireframes_2.png
a la orden_wireframes_1.png

Wireframes grouped by flow

maria jose campos logo_web encabezado.png