Menú en tu móvil is a service that creates the menu of your restaurant in your clients’ smartphone as a contact-less solution during the 2020s pandemic.
What, why and how
At the beginning of March 2020, confinement was declared in Spain due to the pandemic we are still suffering. Restaurants had to become safe places for customers in order to reopen, but this virus had shown through several studies that can survive more than 12 hours on some surfaces, which means, the menus where a nest of germs.
We wanted to create a digital menu for restaurants that is interactive and invites the user to feel comfortable viewing the restaurant’s menu through their mobile. Besides, it can be accessed without having contact with another person and is easily shared.
The aim was to convert traditional paper menus into a website that you can access from your mobile phone directly through a QR code that you can scan at the restaurant with your phone’s camera. This digital menu not only puts the information on the menu but also offers the possibility to have the menu translated into several languages.
To launch the project we made a minimum viable product to enter the market as soon as possible and to anticipate that the offer of this service would be enlarged. This being the case, we managed to have the product, the website, and the social networks up and running in less than a week.
Designing and launching a digital product
Toni Pareja, Digital Product Designer & Front-end Developer asked me to assist him with the design of this project. Toni was in charge of the product itself, from the definition of the idea, user, and market research, to the creation and implementation of the platform. As a Visual Designer, I assisted him with the corporate image and setting the brand and I took over the social media design creating quick guidelines.
We had to create two products: a website that would work as a showcase of our product + the product itself, the digital menu.
Creating a digital menu
We started by identifying the most important and necessary values in a digital menu:
- Logo and image of the restaurant
- Language selection, if any
- Categories for product organization
- The product itself with description and images, if provided
- The price
- Option to share the menu with your friend.
Followed by defining the user flow:
1) The user opens the camera app on her/his phone
2) Aims it at the QR code provided by the restaurant
3) The user is redirected to the landing page of the restaurant
4) The user selects the language
5) Now that the user is inside the product, he/she can select between:
- Categories: Where the user selects between starters, main dishes, desserts, drinks, etc. Depends on how the restaurant structures it. If the restaurant wants to showcase its food images, the user would be able to click on them, zoom in and out and close them to return to the category he/she was browsing. A description of the dish as well as the allergens is also provided here.
- Share: The link can be quickly shared in Whatsapp and Facebook, so only one person of the group needs to scan the QR, a great solution for those who don’t have a QR scanner integrated on their phones or any app that allows that installed.
- Allergens: a visual standard guideline.
- Address of the restaurant and if applicable, other locations that they might have.
- Social media of the restaurant if any.
The menu was inspired on typical menus but adapted to an easy to understand web/app format. It consists of the logo/name of the restaurant and image if provided + Categories of the products + Image, name, description, and pricing + Share the menu with the rest of the table + Footer with social media of the restaurant.
- Scan the QR code provided by the restaurant
2. Select your preferred language
3. Browse through the different categories and dish/beverages options, check the allergens, and share it with the table.
Click here to test our product live. Remember to resize the browser to the mobile view as this product is meant to be only viewed on your phone.
Now that we have designed and programmed our product, it is time to build a platform that allows us to showcase it and sell it.
Launching a website to sell a product
The design of the website had to be clear and concise so it explains all the functions that the product can offer. We decided that the best option would be to create a landing page with special importance to the CTA, to redirect the users to contact us.
Once we finished the wireframing, we started implementing.
The page starts with a clear hero section with a visual that gives an understanding of how our product model works: the customer arrives, scans the QR code, and chooses his meal, which he orders from the waiter inside the restaurant.
Followed by a “how does it work” section. We structured in 4 easy and quick steps:
2. Send us a picture/pdf of your menu
3. Wait less than 24 hours so we have your product running and ready to be used
4. Print the pdf that we sent you with the QR code so your customers can scan it.
A banner with a discount and a CTA to get that discount.
Advantages of why you should make your menu digital: 1) your catalog would always be up to date, so no more stickers covering the old dishes that you no longer offer, 2) it is safe and contactless, 3) easy shareable, 4) no printing costs, 5) no physical menu stock limitation, so every customer gets her/his own menu, 6) your first digital transformation step.
Pricing options as a comparison table with a label highlighting the option that we wanted to sell.
We decided to create 3 pricing plans. A very basic one with a little customization, an intermediate one, and which has been the most sold service, and a special premium plan in case some customers wanted to have something more different.
The main advantage of the intermediate service is that it includes the option of adding pictures to each dish and an extra language.
A section to download a user guide to get leads into our email marketing sales funnel.
A banner with a CTA to make your menu digital, with a simple footer including a contact us e-mail and social media links.
You can check the final design LIVE.
Visual identity quick design decisions
We wanted to be noticed and we thought about the king of mass consumption in hospitality, Mc Donalds, whose color has always been red (and yellow).
Based on the psychology of color, red captures attention and it is associated with excitement, passion, danger, energy, and action. But it is also associated with the masses, with being active and as it somehow increases heart rate, which helps to jumpstart your appetite.
For the typography, we choose Rubik, a rectangular sans serif font that has a great contrast between its own font weight variants.
We decided to put zero effects on our logo design because we had to launch the product in one week, so we added our website link to it in order to stick our marketing website to the possible client’s mind.
Social media plan
Our social media strategy focuses on differentiating from the typical bar owner of your neighborhood, who couldn’t care less about design, in contrast to that closeness, warmth, and funny accent that he/she gives to you because you’ve known each other for years.
The struture is the following:
- A funny or encouraging quote related to hospitality
- A picture of a customer interacting with the digital menu
- A sentence describing the product’s features as a headline
In this project, we have learned a lot while launching a product. We are currently getting an average of 4000 unique visitors to our website and a total of 6000 visits per month. We are now aware of the importance of being at the right time and taking advantage of every opportunity that comes up, and also of not spending time on perfecting small things that are not necessary at first for the product launch.
The design should be improved, but as we focused on the design of our menus for the restaurants and usability was tested positive, the landing page will remain as it is for now.