SINGHA FOOD FEST
A restaurant order-taking application & a customer dashboard
OVERVIEW
Following up on the Taco Fest BKK, the Omacatl team was hired to do the same point-collecting system for the one-month-long Singha Food Festival in Singapore.
About the festival - To promote Thai food, the festival offers special set menus at participating Thai restaurants and rewards sponsored by Singha, the organizer. In order to join the festival, customers needed to register on the website and use the personal QR code they received at participating restaurants to collect points. The points can be traded for rewards during and after the festival. On the restaurant side, they had to scan customers' personal QR codes to put orders in the system for customers to earn points.
​
*The logo of the festival is provided by Singha, the organizer
(see the official website here)
OBJECTIVE
Design the UX of the application to fit the user and to be handy as possible , good looking, and for developer to building within limited-time.
To construct the informations on the website
MY ROLE
1. Application UI Design
2. Customer Dashboard Design for mobile and desktop
TOOLS
Adobe Illustrator, Adobe photoshop, Figma, and Miro
DURATION
3 months (The only designer in team of 4)
DESIGN PROCESS
WIREFRAME / USER FLOW
- Alternative flows
- Wireframe
USER RESEARCH
- Interviews
- Usability Testing
UI DESIGN
Final UI
CUSTOMER DASHBOARD DESIGN
WIREFRAME / USER FLOW
Order taking app for restaurants
The main usage of this application is for participating restaurants to keep records of the special-menu orders from customers, and for the organizer to have the report of sales during the festival so they calculate the redeemable reward (beers) and measure the success of the festival.
​
There was an application developed by Omacatl (Rodrigo Medina) for the previous festival, Taco Fest BKK 2020. It was a very simple one, used to track how many orders were made at each restaurant per day and keep records of customer points. The customer had to register on the website and get a QR code through an email, then every order they made was scanned by the restaurant, and then the confirmation was sent to customers' emails.
Here is the UI of the previous application:
From the application above, we wanted to create a new one again, a similar one but better with more functions. I started by suggesting alternative flows of how the application would work on rough wireframes on Miro.
We presented the choices of wireframes to the organizer to get some feedback. I suggested choosing the shortest flow based on the assumption that the restaurant would want to take the order as quickly as possible and make some changes without going back several pages due to busy hours.
The flow we chose
Wireframe
Low-fidelity Wireframe for discussing within the team, and the organizer, and for usability testing. I created a history page based on an assumption that restaurants might need to cancel orders.
USER RESEARCH
User Interviews & Usability Testing
The festival was held in Singapore and I couldn't reach any of the restaurants there so I conducted interviews with 3 managers of Mexican restaurants that participated in the previous festival (the Taco Fest BKK). in order to get user insights and feedback, and also asked them to do the usability testings of the new design. The 3 restaurants consist of different sizes
​
1. A big fusion dining restaurant with a 2-storey building
2. A food stall inside an outdoor community
3. A takeaway restaurant
Insights from interviews
-
Using one phone to scan every customer is impossible for big restaurants, they need a system that allows them to log in to multiple mobile phones.
-
The staff don't want to hop in-out of the app to see if the scans were successful or not. (before they had to check their emails)
-
They prefer to check on the app only to see if the customers are eligible for any rewards (before coupons were sent separately)
-
Separated coupons in emails are hard to prove if customers already used it or not.
Insights from
usability testing
-
On the history page, they don't need to see the customer's points but how many orders they purchased, and the total sales of the day, so they can cross-check with their POS.
-
A history page is necessary, for example, they could cancel orders when they ran out of ingredients, or a customer made an order and changed their mind later.
-
They like the summary page so they can repeat it to customers. They also suggested that it would help if it showed the remaining points and redeemable rewards instead of how much they spent on the confirmation page so they could tell customers.
-
They're happy that they can do everything on one app.
Persona
UI DESIGN
After the user research, I changed the design accordingly, using the Ant Design System as the developer requested, so that he could finish it within the limited time frame. The organizer also asked me to make it bilingual (English - Thai) because some Thai restaurant staff don't know English. Finally, put all the improved design features into the final UI design before passing it to the developer. Please see the UI design below:
​
*The logo of the festival is provided by Singha
Signing In
The restaurants received usernames and passwords from the organizer. The name of the restaurant will be displayed at the top and there are 3 main functions Scan, History, and Technical Support.
Order Taking
To solve the problems as mentioned in the interviews, the redeemable rewards will be shown under username of customers.
History
The history page shows details of orders and a button for cancellation. It needed to be approved by the Technical Team if they wanted to cancel after several hours.
Problem Report
To make it easy for the user, there is a button for get technical helps right away. It will links to WhatsApp to talk with our team.
CUSTOMER DASHBOARD DESIGN
The dashboard shows general information about the customers participating in the festival and the points they earned for rewards. To access the dashboard, customers need to sign in through the official website of the festival. This design improved from the previous festival as well. Because there is only one page, this design was only discussed with the team and the organizer team.
Registration
Mobile version
Desktop Version
Dashboard
Dashboard before
Dashboard after redesigned