Designing a mobile responsive website for Chilango

7 min readJan 22, 2018

During a General Assembly concept project myself and two colleagues were challenged with creating a responsive website or app that handled orders and payments from Chilango’s restaurant tables. We created a responsive website which could have been integrated with Chilango’s existing responsive website which just deals with pre ordering. We really focused on achieving a quick and easy ordering process which included splitting bills between groups. https://invis.io/C6E9EB5WE

Methods

User interviews — Contextual enquiry — Affinity mapping — Experience mapping — User flow — Design studio — Paper prototyping — Wire framing — Usability testing

Tools

Brief

Chilango sees an opportunity to leverage existing customer habits by introducing a mobile website that handles ordering and payment for groups.

Features to include in our solution

· Customers should be able to order from their table.

· Groups of users should be able to all order to the same table.

· The product should handle splitting the bill and payment.

We also needed the product to consider

· Food arriving at the same time to each person at the table

· How to display new specials and items out of stock.

Chilango

Chilango is a Mexican food restaurant that has 11 sites around London.

“Chilango in a single word? Vibrancy”

Currently have a responsive website that allows a customer to pre order food to pick up and cut queues. We were therefore aware and able to get onboard with Chilango’s desired to create efficient and effective customer service.

Competitor research

Taking key points from competitors such as Chipotle’s visuals, GBK’s order from table app process and Flypay’s splitting the bill process.

Contextual enquiry

We visited two separate Chilango’s in central London and spoke to employees and customers at each to better understand the restaurants. Key takeaways were:

Customers consisted in the majority of young local male city workers in small groups.
Receipts were often asked for to claim back expenses from work.
Majority of customers used cards to pay.
Ordering and payment is a quick process and customers see their order being made from fresh ingredients in front of them.
However, this process can lead to people being rushed through service, with mistakes, at peak times.

DF Mexico

We visited DF Mexico to conduct a contextual enquiry on customers using the touch screen tablets to order as we were interested in designing an app for a Chilango touchscreen tablet.

“I think it’s great they have the table , its efficient and mean someone doesn’t get my order wrong but it would be even better if the tablet was at my table so I didn’t have to get up”

From our contextual enquiry our persona took the form of a young professional who would tend to just grab a meal for lunch or have a quick sit down meal in the evenings after work.

Our research up to this moment could still be applied. We tailored our scanner survey and user interview script towards understanding people’s experiences ordering as a group, splitting a bill and ordering digitally.

User interviews

We sent out a screener survey in order to find the most suitable users to interview.

98.8% of people have a smartphone and consider themselves tech savvy.
53% found splitting the bill frustrating.
73.2% ordered food in a group monthly or more often.
57% ordered food through a website or phone monthly or more often.

From these screeners we interviewed 14 people who fitted the demographic we were looking for.

Below some key findings:

Affinity map

Through an affinity mapping we were able to group quotes from our interviews into 5 key areas.

The key take aways from our user interviews were that people were:

People were very open to ordering food digitally, as it can make the process quicker without pressure from staff or other customers, however, as long as it is clear.
Splitting the bill is a pain with people leaving or having to pay more.
Apps specific to a restaurant were non-existent on our users phones, only aggregated apps, as apps take up retail space.
Annoyance over either wanting to just pay for themselves instead of splitting the total bill or when people couldn’t remember what they ordered.

Define

We began to consider a tablet in each Chilango table where each person could order from, however we soon understand that this wasn’t viable due to the expensive nature when everyone owned a smart phone.

This led us to focusing on the technology that people already possessed, their phones. Due to our feedback that people did not download apps for specific restaurants we decided to create a mobile optimised responsive website.

Once we had come to this decision we created two user flows and an experience map based on our contextual research and persona.

User flow 1 and user flow 2 differ depending on the decision whether to split the bill with friends or just pay for what you ordered, this ability was a key take away from the interviews.

We came up with 3 scenarios to use when testing our product.

We prioritised features within our sprint scope, with the main functionalities being:

· Add table

· Add number of people

· Menu

· Submit order

· Pay now

· Pay for others

Develop

Iterating — the people’s choices

Through a design studio we came up with some initial designs, making sure we included all the requirements from the brief, which we could test and iterate on.

We tested each iteration on users and designed based on their feedback.

Check in

Users were unsure whether the questions how many amigos on your table included themselves in the total, so we changed the copy and added an extra faded sentence to make this clear.

We used a friendly and casual conversation tone to keep onboard with Chilango’s branding.

We also created two separate screens for the questions in order to improve the fluidity of the check in.

Menu

Our original header on the menu screen confused users as they thought the icons were clickable, however once we placed Mexican wrestling masks, keeping to the fun colourful branding of Chilango, and labelled them with the users names it became clear what they were.

Users also wanted to be able to go to a menu, to change settings or choose a favourite meal so we added in an account button.

My order

On my order screen we added an edit button so users could go back to the menu page to edit their order.

Loading screen

Not all users knew what a ‘luchadores’ was, we therefore changed it to ‘amigos’, this also kept it consistent with the check-in screen.

We included the avatars into this screen so that those waiting for their friends to order could see who hadn’t ordered and why they were having to wait.

Split bill

To split the bill with your friends in the first iteration the user had to click on the avatars to bring up that person’s bill, however users could not achieve this. We therefore placed all the bills on one page which the user could scroll through to select the items they wanted to pay for.

Through testing a couple of issues came up that we changed to make a smoother and more enjoyable experience for our users.