Improve the Order Procedure of a Student ... - HCI Designer · UX Case Study February 2016 - March 2016 Project Overview A student nation’s pub struggles with its offline order

Improve the Order Procedure of a Student Nation’s Pub

UX Case StudyFebruary 2016 - March 2016

Project Overview

A student nation’s pub struggles with its offline order procedure. The orders are placed and paid at the bar. The bar host writes each order on an order slip and collects it in a mug. Occasionally the server empties the mug and brings the orders to the kitchen. As the pub is mostly very crowded, the orders regularly get messed up that results in delays and confusion. Frequently orders even get lost.

The Process

The Problem

We applied the contextual design, a user-centered design process, to resolve the problem. We conducted contextual inquiries to understand the situation and created work models to analyse the workflow. Based on that, we iteratively designed, tested and refined the solution.

Understand Envision Design EvaluatePrototype

The solution is a distributed system that automates the order procedure to enhance the order delivery efficiency and to empower the pub crew to focus on the customer service. There are two systems: a bar system and a kitchen system. The bar host enters the orders in the bar system. The kitchen system shows a complete overview of the order queue with the waiting time. When the meal is ready, the kitchen crew places the deliv-ery note on the edge of the plate for the server to coordinate the delivery.

We used the screen size of the bar's tacticle screen for the prototypes.

The Solution

My Contribution

Role : UX / Interaction Designer

Responsible Activities

Contextual Inquiries

Work Models

User Personas

Ideation Sessions

Concept Creation

Scenarios & Storyboards

Information Architecture

Interaction Design

Wireframes & Mockups

Prototypes

Usability Testing

Whiteboard

Post-Its

Pencil and Paper

Google Drawings

Balsamiq

UXPin

Used Design Tools

Bar System Prototype

In the prototype scenario below, the guest has ordered a Frozen Rasper-ry Cheesecake, a Tex-Mex Burger and is currently placing the orders for a BLT-Sandwich. Thus, the Order #121 has a bold left border to visually indicate the currently editing order to the bar host.

Kitchen System Prototype

Understand

Contextual Inquiries

We interviewed three workers with different experience and job roles in their working context. The first interviewee was a server who has been working in the pub for two months. The second interviewee was a bar host who has been working in the pub for two semesters. The third inter-viewee was a cook who has been working in the pub for four semesters.

The interviews gave us an insider view into the order procedure as well as the work dynamic and the workflow. Most importantly, they helped us the understand the pain points and needs of each job role.

Work Models

We visualised the in-place order procedure with four different work models to better understand key issues and to further analyse the pro-cedure to detect improvement possibilities.

Contextual Interviews

Contextual Observation

We conducted three contextual observations to get insights into the gen-eral characteristics of the place and the work dynamic. Two observations were completed on a Friday evening, which is usually the busiest day of the week. The third observation was done on a Wednesday evening.

The observations illustrated us the issues and challenges that the in-place order procedure is causing. We even personally experienced our-selves the annoyance of the in-place order procedure - our order got lost.

Physical Model

This model outlines the work environment of the core activities.

Artefact Model

This model illustrates physical objects involved in the core activities.

Pub

Note: - The metrics of this map do

not correspond to real metrics

- The guests tables are not shown in their exact positions and numbers, they can furthermore be moved Entrance

Hall

Tunn

el/G

atew

ay

Bar

Table

Wermlands Källar‘n: Physical Model

Toile

tsCouch

WorkersGuests Tables

Kitchen

Front Entrance

Back Entrance (Staff only)

Garderobe

Staff

only

Service Worker: Moves between kitchen and tables in the pub to serve food

Guests: Move between the front entrance via the entrance hall and tunnel to the pub and back, now and then to the toilets and back

How people move:

How people group:

- A bigger crowd tends to form in front of the bar or in front of the front entrance

- A bottleneck is the crossing of the tunnel, the entrance to the pub room and the stairs up to the kitchen, since the path of workers and guest cross there frequently

This model visualises the communication and interaction flow.

Sequence Model

This model analyses the steps and the breakdowns of the activities.

Flow Model

User Personas

We created four user personas to ideate and design the user experience.

Michael : The Bar Host

Suzanne : The Server

Description: Suzanne is an exchange student from Italy. She joined the pub last month and is working as a Bar Back. She is not yet familiar with the work dynamic.

Goals: She wants to earn money, meet people and have a good time.

Regular Activities: Her main duty is to pick up the prepared dishes in the kitchen and serve them to the guests at their table. Another crucial task is to transfer new orders slips from the bar to the kitchen.

Description: Michael is a physics master student at the Uppsala University. He is working at the pub for a year as a bar host.

Goals: He wants to have a good time and provide a great customer service without unnecessary delays.

Regular Activities: He takes orders, serves beverages and accepts pay-ments. If a meal is ordered, he writes down the order information with the guest’s table location on an order slip, that has an imprinted order number, and puts it in the order mug. Thereafter he hands over a copy of the order slip, with only the imprinted order number on it, to the guest.

Description: Anna is in her final year of her bachelor study. She is working at the pub for two years. She works in the kitchen at the dessert section.

Goals: She enjoys working in the kitchen and prefers to have an organised and effective working environment.

Regular Activities: Before the pub opens, she prepares the dessert sec-tion. When a dessert order comes in, she takes the order slip and places it on the edge of the plate. After that, she makes the dessert and puts it on the plate. At last, she hands it over to the server.

Anna : The Dessert Maker

Lärsson : The Guest

Description: Lärsson is a chemistry student at Uppsala University. He loves the pub’s cheeseburger. He usually goes there once a week with his friends.

Goals: He wants to enjoy his meal and have a good time with his friends.

Regular Activities: Enters the pub and reserves a table before he places his order at the bar. He returns to his table with the order slip and his drink. Every time the bar back approaches his table, he shows his order slip and if the order numbers match, he receives his meal.

Envision

After brainstorming ideas, we decided to automate the order procedure with a digital solution. This approach will minimise human errors and enhance the order delivery efficiency. A digital solution enables func-tionalities to view and manage orders which in turn will positively im-pact the customer service. The concept requires that each table should be assigned a unique identifier such as numbers.

Description: Guest (Lärsson) orders a cheeseburger and a drink, the meal is made and served at his table.

Users: Bar Host, Server, Kitchen crew

Stakeholders: Guest

Artefacts: A touchscreen computer with a slip printer at the bar; A touch-screen computer with a slip printer in the kitchen; Printed delivery slip for the server

1. The guest enters the pub and reserves a table.

2. The guest approaches the bar.

3. The guest orders a cheeseburger and a drink.

4. The bar host asks the guest for his table number.

5. The guest tells the table number.

6. The bar host enters the order with the table number into the system.

7. The bar host asks the guest if he has another wish.

Scenario

Concept

Storyboard

8. The guest answers: “not for the moment”.

9. The bar host submits the order.

10. The bar host tells the guest the payment amount.

11. The guest pays the amount.

12. The bar host hands the order slip and the drink over to the guest.

14. The guest takes the slip and the drink and returns to his table.

15. The system sends the order to the kitchen.

16. The order appears on the kitchen screen.

17. The kitchen crew see the order and start preparing the meal.

18. When the meal is ready, the kitchen crew marks the order as done.

19. The system prints out the delivery slip containing the order details and the table number.

20. The kitchen crew puts the delivery slip on the plate.

21. The server serves the meal according to the delivery slip.

Iterative Design

First Design Iteration

In the first iteration, we created wireframes and, subsequently, reviewed the design with a usability testing method called expert review.

Wireframes (Lo-Fi Prototype)

Bar System

Kitchen System

The wireframes were evaluated by Mats Lind, an Uppsala University pro-fessor in HCI. The notable feedback was that we should design the user interface for experts by avoiding information hiding. This approach re-quires a high learning curve, but the user will eventually be more effi-cient because the number of clicks are reduced to an absolute necessity. He advised to take a look at the user interface design of POS systems.

Expert Review

Mockups

Bar System

Although the user interface appears crowded and unappealing, the de-sign will eventually maximise the user's efficiency. As a visual support, we added a clear colour code to the elements for quick orientation: each meal category has its own colour e.g. burgers meals have the colour or-ange. Additionally, we applied the grid of equal design pattern to give the elements within the groups an equal importance as well as the undo design pattern to revert mistakes.

Second Design Iteration

In the second Iteration, we improved the design based on the expert re-view and created mockups. In the end, we evaluated the design with the workers from the pub. The usability testing method task scenario with think aloud was applied to conduct the usability tests.

Kitchen System

Usability Testing

We conducted moderated usability tests with the three end users: a bar host, server and a cook. We gave each test participants a handful of task scenarios to follow and requested to think aloud their thoughts. At the end of the session, An interview was conducted to capture the feelings and impressions.

The evaluation results were satisfying. First, the test participants were overwhelmed with the jam-packed user interface and the colours but quickly they appreciated the efficiency. They liked the features to view and manage the orders. The cook appreciated the overview of the com-plete order queue which she thinks will certainly help them to improve the efficiency of the order preparation.

Despite the positive outcome, we think the solution needs to be tested in the real world setting to properly evaluate if the solution resolves the order procedure issues and improves the order delivery efficiency.