Order App for 100Montaditos

Simplify the order process

I develop this project for my Interface Design class in the 2nd semester of my Post-Graduation in Digital Experience Design at Fbaul. For this project, I decided to create an Order App for 100Montaditos, it’s a Spanish restaurant chain, which sells tapas inside the bread, currently, they have quite complex order systems with 8 steps to get a meal, as you can see on the image below in section 2 — the current User Journey map.

This case study describes my process of designing the app from the idea of it to the final prototype.

1. Challenge

The main goal for this project is to simplify the order process

• Build the fastest food ordering solution with user-friendly characteristics and some innovative features.
• Avoid misunderstood of interpretation of the orders that are written by hand.

2. Improve the User Journey Map

1. Current user Journey Map takes 8 steps for the user to get his food (with repeated steps, this could be frustrating and lead to misunderstood)

2. The improvement with the order app reduces the order process for just three steps on the app to enjoy a meal.

3. App map

Develop the app map before you go to sketching and wireframing is really important to provide a complete inventory of the variety of screens you need to delivery

4. Main User Flow | Place an order

User story | As a customer, I do not want to spend too much time waiting in line to order so I can enjoy a fun meal with my friends.

5. Sketches

First thing when you open the app, you inform your location in order to choose the nearest 100Montaditos to see the menu.

The app will have a nav menu with three mail sections (Menu, Orders and the Profile), you can also filter your search for specific ingredients.

When you make an order it’s possible to add specific indicações like “don’t want onion”, and after order, you can track and know when it’s done.

6. Main Features

a. Place an order

b. Onboarding

c. Filters

d. Create my own “montadito”

e. Include specific indications on my order;

f. Track my order

g. Split the bill — this is a very useful feature, because the majority of the user that you find on 100 Mondatditos restaurants came in group and always select items on the menu to share with everyone, so it’s important that the users have the possibility to split the bill in the app in a user friendly way.

7. Wireframes

Used early in the development process they were really important to establish the basic structure of the app before visual design and with real content. In the ideation phase, the wireframes have information architecture of the future layout.

8. Style Guide

Researching competition will give you an idea of common color threads that run through the other companies, and it will show you what kind of direction to avoid to ensure that you don’t create something identical.

9. Mockups

Throughout the app the user always has feedback, it is important especially when the user makes a sure request that he is actually in progress with feedback. it is also important to always have an option to return or cancel because of another return the user will not use the application again if they do not feel safe.

Feedback and informative screens

10. Prototype

[embed]

Invision prototype

https://invis.io/UXS7VZZFZW4#/365544821_8-_Onbording_Screen2

I hope you liked, please any comments or suggestions are very welcome :)