Coffee Vending Machine in TU/e Background: I joined a course named Human Factor and was inspired to discover some imperfect HF case in our surroundings. I looked around and thought the coffee vending mchine in TU/e can be developed better. And this project I will put my emphasize on User-Centered-Design.
Personal project Nov. 2017
StoryBoard
Many students in TU/e had the experience of ordering several drinks for fellow friends during lecture break. This storyboard is based on this context.
1. A fellow student asked Bas to order a coffee for him.
2. There were many other students waiting in the line for the coffee.
3. Bas ordered first cup of coffee and paid for it.
4. After getting first cup, Bas ordered second one and paid once again.
6min 46s Time for 1-cup people
5min 48s Time for 2-cups people
27% People who order 2 cups Lecture Break 9% People who order 3 cups
2min 26s
64%
Time for 3-cups people
People who order 1 cup
Pre-research for time and people
Pre-research
I did a pre-research for a coffee vending machine during a lecture break. The break was 15 minutes. There were 11 people in total who ordered coffee. 1 of them(9%)ordered 3 cups. 3 of them(27%)ordered 2 cups.7 of them (64%)ordered 1 cup. In this research I can tell that ordering more than 1 cup is a nonnegligible situation. However, few people would order 3 cups or more, because it’s hard to grab 3 cups by hands. After understanding the situation I’ll start a usability test.
Objective
Identify the pain points of coffee vending machine in TU/e.
USABILITY TEST
Coffee vending machine in TU/e is a convenient product in general. However, a quick usability test reveals that people run into 2 critical issues with this machine when ordering multi-cups.
Test Parameters
Test Tasks
What: Coffee vending machine system for multi-cups ordering. Who: Existing users who order drinks through this machine. Where: TU/e.
Task 1: Order 2 cups of same coffee. Task 2: Order 1 cup of coffee and 1 cup of chocolate and 1 cup of soup. (Tasks here were determined based on needs of ordering several coffee at one time. The participants need to perform one of the two tasks. Tasks were phrased as open-ended scenarios to avoid leading the user to solve their problem in a predetermined way. )
MEASUREMENT This Usability Test uses three tools for measurement:
A think-aloud protocol
With the think-aloud protocol I can check the emotions and behaviour of the participants during the performance of the tasks.
A questionnaire
Time notation
The questionnaire consists of questions about demographics, a self made question about emotional responses and a standardized question.
Time is measured how long it takes to order the amount of drinks on the Coffee Vending Machine. Time notation is a way to measure the efficiency of the machine.
Task 1: Order 2 cups of same coffee. Task 2: Order 1 cup of coffee and 1 cup of chocolate and 1 cup of soup. 15 people participated in the test. 8 of them did task 1 and 7 of them did task 2. I found that repeated payment made some users feel irritated. In task 1, few participants noticed there’s a repeat-selection button when ordering second cup. Participants in task 2 feel more irritated in coffee choosing procedure.
ANALYSIS
How many dutch users fail to pay at least once?
What is the ethnicity ? 67% Dutch Student
30% Fail at least once
15 people in total
87.5% Not realized the button 8 people in total
10 people in total
33% International Student
90% All success
Time proportion for one cup in average
How many international users fail to pay at least once?
20s Coffee Making
5s Payment
For task 1, How many people realized there is a repeat-selection button?
12.5% Realized the button
80% Fail at least once
payment procedure coffee-making procedure 5 people in total
58s in total
For task 2, What factors make you feel irritated ?
20% All success
29% 57%
choosing procedure waiting line
33s Choosing Procedure
43%
29%
Findings: 2 KEY ISSUES x2
Few users discovered the repeat-selection function.
It’s a waste that an actually developed function cannot be found and used.
“Oh. I have to select the same coffee again !” There’s a tip on card reader. But it’s always in dutch even if users change the language mode in touch screen. So for international students there’s still no tips.
No notification on the main interfact when fail to pay.
No tips on the main interface when pay failed. Experiencing uncertainty can affect how people perceive time.
“Failed? Errr... I have to make selection again!”
When fail to pay, the main interface will just stop in the deducting page for a while and return to home page automatically. Then users have to repeat the selection they just made and pay again.
DESIGN SUGGESTIONS
1. more noticeable mapping for the repeat-selection function
- Adding whith aura around this function after finishing last selection.
- The card reader should be in the same language mode with the touch screen.
2. Clearer notification for transactions
- Adding a clear notification on the main interface when users fail to pay.
Here is my general process... Understanding Users
Prioritizing Needs
Prototyping Features
Testing
Storyboard Usability test
Personas Task flow
Paper prototype
Usabbility test
Product Design
Users Research
I’ve covered part 1: usability test And I want to make sure I design a system that people actually need. So personas and task flow will follow next...
Persona Primary
Bas is the primary persona. He represents the dutch students or employees in Tu/e who would use coffee vending machine. If the primary persona is the target, all other personas are at least minimally satisfied. dutch student drinking coffee cooking Behavior - grab a coffee during break - always help firends order drinks
Bas Needs - faster ordering procedure for 2 cups
people waiting behind me might feel annoyed when seeing me pay for the second coffee because it would keep them waiting longer. So second cup always make me become a bit stressed.
- tasty coffee
Facts - normally just order 2 cups when helping friends. maximum 3 cups at one time - pay by card - long waiting line during break
Persona Secondary
There are also quite a lot international students and employees in Tu/e. Sofie is the representative. They need to use the coffee vending macine too. But the situation is they don’t speak dutch and have different cultural background. They would be entirely satisfied by the primary persona’s coffee machine if one or two specific needs were added. chinese student studying with friends Behavior - grab a coffee in library - sometimes help firends order drinks
Facts - satisfied with the current coffee vending machine when ordering 1 cup
Sofie Needs - clearer payment interface
Because paying interface doesn’t say anything, I always need to swipe the card for several times before paying successfully
- cheap coffee
Identifying Needs for muti-cups ordering To conclude, there are generally 4 broad needs as below :
Faster process
Clearer notifications
Tasty coffee
I’ll break down those broad needs (epics) into sets of smaller needs.
Epics
Break down into smaller needs
Needs
Needs
Cheap coffee
Prioritizing Needs for muti-cups ordering There are 4 epics, but this coffee vending machine already performed quite well in tasty and price. So I will put emphasize on the other two epics.
3.One payment 4.Selection button 5.Coffee-preparing
Faster process
Clearer notifications
Less procedure
Objective time
1.Language mode
Nonduplicate actions
Perceptive time
2.tips on touch screen
5 Needs
Task Flow When solving all the needs, I want to be precise. Just solving the paticular problem itself without creating new problems. Nothing more, nothing less. So I will use task flows to help me. A task flow is a walkthrough of the interactions a user takes to complete a story. It will give me bird’s-eye view of all the steps I should cover. Here is the Current Flows where I can locate the needs mentioned above.
Stage 1 Home
Stage 2 Select Drink
Preference Selection
Stage 3 Select
Fail to pay
Deducting
Tap Card
Success to pay
Stage 4
Stage 5
Preparing coffee
Taking away
Solving Needs (1st & 2nd)
Deducting
When fail to pay, notification will be on both screen in the same language.
- Now users clearly know they need to insert their card again instead of waiting until this transaction expired.
First, I’ll solve the 1st and 2nd needs. They locate in stage 3: Deducting. 1st need: Corresponding language mode. 2nd need: Tips on touch screen.
- In the same language mode
Solving Needs (3rd) Now, I want to solve the 3rd need: one payment. One payment means you can order multi-cups before you pay. This is a new feature so some pages will be changed and current flow needs to be revised.
Loop for preference
Stage 1 New Home
Stage 2 Select mutiple Drinks
Preference Selection
Stage 3 Select
Deducting
Fail to pay
This seems an universal way to solve the multi-cups problem. No new pages added. But after doing a littel user test I found some new problems occured.
Tap Card
Success to pay
Stage 4
Stage 5
Preparing coffee
Taking away
‘-’ and ‘+’ button are for deleting and adding cups
After selecting 1 cup of Dbl.Espresso and 1 cup of Cafe au lait, click ‘✓’ button to preference page.
Number of cups you ordered for certain drink
Problem:
1. Home page looks too complicated. And those ‘-’ , ‘+’ buttons seems too small to click. 2. It really affects users who just want to order 1 cup of drink.
Lessons Learned: NEW FEATURES SHOULD NOT AFFECT ORIGINAL FEATURES !
After finishing preference for 1st cups, click ‘>’ to select preference for 2nd cup.
Solving Needs (3rd) From the Failure of last try, I leart that if I want to add multi-order function, try not to let the revise affect 1-cup ordering.
Select another cup
Stage 1 Home
Stage 2 Select Drink
Preference Selection
Stage 3 Select
Deducting
Tap Card
Fail to pay
This seems a simple way to solve the multi-cups problem. But is it really okay to let the second-cup selection page be the same as home page ? Will it run into new problems ?
Success to pay
Stage 4
Stage 5
Preparing coffee
Taking away
New Problem Arises Now I imagine users are using the new system to order multi-cups. However, the work flow I just made might run into the situation below.
Bas click back to the home page to order the second drink. But he suddenly got a phone call and left the machine immediately.
Then Sophie came to this machine. She saw current page was home page so she ordered drink in this page directly.
When Sophie tried to pay she realized that she had to pay another cup which she didn’t order.
Another Solution 2nd cup
Select Drink
Preference Selection
Select
From the mistake I just made I learnt one more thing : If I don’t want new feature affect the existing function, the new feature flow should involve as less old flow as possible. So I make another new feature flow, which is between stage 2 and stage 3. They are seperate to any existing stages.
Select another cup
Stage 1 Home
Stage 2 Select Drink
Preference Selection
Stage 3 Select
Fail to pay
Deducting
Tap Card
Success to pay
Stage 4
Stage 5
Preparing coffee
Taking away
Add new button here
After selecting Dbl.Espresso and its preference flavor, click ‘+’ button to select second cup.
Multi-cups &One payment make it different from home page
Choosing preference for second cups. Then click ‘✓’ to confirm all the selections.
Add bill here
Payment after all the selections
Solving Needs (4th)
Repeat Selection Button
The 4th need: emphasize on repeat selection button. The repeat selection button problem is easy to solve. As I mentioned before, Just make some emphasize on this button to guide users to discover it and actually use it, which will certainly save time for the needs of ordering multiple same cups. Here are the 3 pages that this button will apear.
Second choice page
Home page Adding white aura around this button
Finishing page
Solving Needs (5th)
Preparing Coffee
Now I’ll solve 5th problem: More tap for preparing coffee. It locates in stage 4: Preparing coffee. When ordering more than 2 cups, consumers hope the 2 cups can be prepared at the same time, instead of one after the other. In fact, there are 2 taps in this coffee vending machine. But this machine can only allow 1 cup at one time, so just 1 tap is in use each time, which is a bit wasted of the other one.
Enable this tap for multi-cups ordering
PAPER PROTOTYPING
Here are the re-designed interfaces. I’ll use the task of ordering 2 cups of same drinks to present.
My general process... Understanding Users
Prioritizing Needs
Prototyping Features
Testing
Storyboard Usability test
Personas Task flow
Paper prototype
Usabbility test
Product Design
Users Research
I’ve already covered 3 steps. Now I will use the paper prototype to do a general usability test...
USABILITY TEST For the Paper Prototype 1.I think that I would like to use this system frequently. 2.I found the system unnecessarily complex. 3.I thought the system was easy to use 4.I think I need support of a person who is able to use this system. 5.I found the various functions in this system were well integrated. 6.I thought there was too much inconsistency in this system. 7.I think that most people can learn to use this system very quickly.
8.I found the system very cumbersome to use. 9.I felt very confident using the system. 10.I needed to learn a lot before I could get going with this system.
1
2
3
Strongly Disagree
4
5 Strongly Agree
The system usability scale (SUS) is a simple, ten-item attitude scale giving a global view of subjective assessments of usability. What do consumers think about the interfaces after using it? I asked 7 people to participate in my usability test. And the avarage score of this interface is 82.5, which is higher than 80.3. Thia means people like this interaction and will recommend it to their friends.
82.5