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
Format
Mobile, Desktop, Landing Page, Pitch Presentation
Methodologies
User research, Personas, JTBD, User flows, Wireframing
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 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.
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.
Business owner's JTBD
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.
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.
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
A la Orden
Showing number of seats, filter on all tables, available and occupied, waiter responsible and seeing tables by area)
Comparison between Maracona and A la Orden on Table Map wireframe
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.
Landing page preview
Pitch Presentation slides
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.
Wireframes grouped by flow
