A bloc Payment Interface

Snap3_edited.jpg

Year : 

2018

Project Type :

UI / UX Design

The FAZER A bloc is a cafeteria at Aalto University. During the lunchtime, there are always full of students and Aalto stuffs, however, the current payment system is very confusing and the style of its user interface looks like 90’s design. 

Main Focus: The current system has only one page and has too many buttons on the screen. It takes time for users to understand and find the right button. Therefore, it causes a long queue during the lunchtime. Our mission in this project is to make the payment interface more simple and understandable.

DSC_4139.JPG

The current interface might be easy for the restaurant  staffs and the students who knows this system for longer time. The current payment system is mixed with English and Finnish, however, Aalto University is an international university and many students from other countries, it is impossible for them to understand the system.

Problem Definition

Problem definition was done by interviewing and sending a questionary to Aalto students and FAZER staffs, here are some key findings comes from the survey and interview.

To make the interface simpler, first defined what the essential things to users are, they must be shown on the screen then delete unimportant buttons that only for staffs from the interface

Have you ever been “stuck” with/at the payment system? 

17 responses

01.jpg

No

Yes

In which stage of the payment process did you need help?

17 responses

02.jpg

During payment

Before selecting food

After selecting food

How was your first experience with paying for your meal?

17 responses

  • Very confusing. As the payment process was different compared to restaurants, everything just seemed unnecessarily complicated.

  • Confusing about the directions of the queue and have no idea to operate the machines. 

  • Strange and confusing.

  • The user interface is quite unfriendly, the staff need to guide one by one, it took a long time 

Personas

The personas help us to categorise the target users and design the strategy.

personas.jpg

Pauliina, 36
Fazer Staff

Riina, 22 

BA Design

Thurman, 38

MA IDBM 

Jukka-Pekka, 25
SCI Student

“When I take my friends to Väre for the first time, I always have a laugh as I remember how hard the system was to use for the first time”

“MobilePay should be an option, not mandatory. Not everyone has a card that can be linked to MobilePay. For example, many Exchange students don’t have it”

“The staff that are supposed to help us, didn’t even explain the student discounts. They made me pay €8. It was so bad I will not go again!”

“Many people are confused for the first time. The second time they are much faster already and they learn to use the system.”

Visual System

The visual system was defined through studying the Fazer's brand identity that was done by Pentagon Design (https://pentagondesign.fi/casestudies/fazer-brand-identity/). 

font1.jpg
font2.jpg
Fazer_FoodCo_logo.png
visual colour.jpg
pay visual-01.jpg

Deselected

Active

Pressed

student1-02.jpg

Deselected

student2-03.jpg

Selected

Three Steps to Eat

​Simplify the steps from choosing the meal to the payment.

Step 1:
Get to know today’s meal.

Step 2:
Choose a identity and

additional side dishes.

Step 3:
Choose a way for the payment.

Second page – 1
Second page – 1

press to zoom
Student-+coffee
Student-+coffee

press to zoom
Student-1pay – 18
Student-1pay – 18

press to zoom
Second page – 1
Second page – 1

press to zoom
1/3

Click to try the prototype

A bloc home page