The testing process

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

Page 1

Personalize your App with your allergies and preferences

Find a restaurant nearby based on your user profile

Scan the menu to get a translation and see the food which is safe for you

Choose an allergy friendly restaurant on a map with recommented locations

Find a restaurant with the window signage

Point on the stickers with your allergies or preferences on the menu

Prepare the food with allergy stickers to see the ingredients quickly

Stick the window signage on the outside of the restaurant

Offer a allergy friendly prepared menu to the guests

Page 2

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N + TESTI N G

Design

DESIGN + TESTING

In this chapter we will show our design solution with different prototypes to help foreign people in Hong Kong to communicate with local people if they need or want to order a specific kind of food.

Based on our user analyses we decided to focus on three main target groups. The first one is a technophile group of people who prefer using their smartphone to solve problems in their daily life. They are open minded for technical innovations and know how to use a digital device. Our second target group is the total opposite of the previous one.

They prefer using physical objects to handle different situations. These more traditional people like to use things they already know, like leaflets or stickers. The last target group are restaurants and shops.

They are playing an important role in our scenarios by offering the main consumers their food. We tried to improve their communication with our other two target users.

Testing For our design solutions we did testings to proof our current results if they could work in our daily life, how the users interact with them and how good or bad the usability finally is. After getting feedback from our interviewees, we tried to use these results to create a next generation of the product. That means, if we get good feedback from the users on specific points, we will try to keep them for our improved prototype. If we get any negative feedback from the interviewees, we will try to fix the problem for the next time to get better results in a further testing. After finishing our bettered development, we are redoing the process until we have got a positive result. In this case we repeated the whole process up to three times.

P HYSIC AL S O LU T IO N

D I G I TAL S O LU T IO N Page 3

Page 4

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N + TESTI N G

P HYSI C A L S OLU T I O N

PACK AGING STICKER P ROTOT YP E 1

Page 5

Design and testing

Result

To show the user if the food fits to their food preferences, we thought about creating packaging stickers. So the people can easily figure out if they can eat it or not when they are shopping in the supermarket. We tried three positioning of stickers on a bottle of desserts: Lids, bottom and side. Then we let the user choose where is most Appropriate.The user preferred the stickers on the side rather than on lids or bottom. She said it’s because it shows when necessary and without disturbing the other information on lids.

Finally we decided to modify this development, because we faced another problem. The idea of showing people in a supermarket or in a restaurant the ingredients is still a good idea in our opinion, so we tried to find another solution for it because of the following problems: Imagine you have a lot of different allergies and one or more food preferences because of your religion or your personal attitude.

In that case the shop can not put stickers for all possible allergies on it and cover nearly the whole packaging if it is a small one. We skipped the packaging stickers at this point and tired to find other solutions to solve this problem. The final result for this solution you can find in the design and testing part of our stickers and the live scanner function of our mobile application.

This testing worked for the vegan and vegetarian labels, but more target groups with different preferences means more different stickers. And the style of the stickers and icons is not defined yet. At the moment you can not decide between vegan or vegetarian.

Page 6

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N

P HYSI C A L S OLU T I O N

User Sticker (orientation left)

Restaurant Sticker (orientation right)

Design

STICKER P ROTOT YP E 1

Page 7

We designed different kind of stickers to be informed about the ingredients of the food. The stickers which are left oriented are for the restaurant visitors, the right oriented stickers are for the restaurant stuff. The left oriented stickers shows to the user if he or she can eat the meal with a specific allergy or eating habit. The user can simply point on the stickers to show the waitress what he or she is allowed to eat. The stickers for the restaurant stuff sticks on the ingredients to show for example the cook which allergenic ingredients are inside this packaging.

Positioning Food Menu

Page 8

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

TESTI N G

We tested the stickers on different back-

stickers with a simple experiment. We asked

grounds to proof its visibility. Even on a

people to find out, if there is beef inside

very colour ful background you can see

a packaging or not. First we gave them a

these stickers very well. The restaurant can

normal packaging and they had to check

customize their own menu card without

the ingredients list. For the second step we

printing a new one. For the user it is quite

gave them a packaging with our allergy

easy to point on one or more of these stick-

stickers. They needed about 16 seconds to

ers and show the restaurant staff their food

find the word in the ingredient list, and just

preferences. The size of the stickers is big

1 second with our stickers.

enough to find them easily and to read the content on it (icon + text). We tested the

Page 9

WITH STICKERS

WITHOUT STICKERS

1 SECOND

16 SECONDS

Page 10

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N

P HYSI C A L S OLU T I O N

Design

WINDOW SIGNAGE P ROTOT YP E 1

Page 11

This application is aim to let our user identify which restaurant are free to request their own food preference, that it should looks inviting, welcoming, and eye-catching. This part would emphasise on whether the size is appropriate, and if it looks welcoming.‘Welcome for food request’ is a new concept for both the restaurant and the public, therefore, we have to test with their perception and understanding on what we provide to communicate. We went for a minimalistic design to support the simplicity of the idea - ordering food must not be complicated.

Page 12

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

T E S T ING P ROTOT YPE 1

P HYS IC AL S O LU T IO N

“This one looks like

D ESI G N + TESTI N G P ROTOT YP E 2

they are welcome for a conversation.”

This application is aim to let our user identi-

however, both of them think we should add

For the second prototype we tried another

this case vegan friendly. it should show the

fy which restaurant are free to request their

some text/tagline for the icon, to widely

version to expand our results and become

possibility to communicate with the restau-

own food preference, that it should looks

promote our newly concept. The user said

more clear about the user by getting feed-

rant about your needs. The feedback we got

inviting, welcoming, and eye -catching.

that handwritten typography is useful for

back from them. For this reason we came

said, it is to foucsed on one target group

This part would emphasise on whether the

some extra information and is more inviting

up with two versions of a new logo and a

and they would prefer one logo instead of

size is appropriate, and if it looks welcom-

than without. And the size of the signage

new slogan, based on the first prototype.

two pieces. The second signage, which is

ing.‘Welcome for food request’ is a new con-

should be a little bit bigger than the com-

“This one only show

We kept the reduced style and the black

just one got better feedback, but they dis-

cept for both the restaurant and the public,

mon window stickers to attract attention on

their preference on

and white colour, because of the positive

liked the salad bowl, for the same reason

therefore, we have to test with their percep-

it. One of the user also showing her concern

green diet.”

feedback of our current results. We tried

like for the one before: it is to specific. They

tion and understanding on what we provide

on the chaotic arrangement of most of the

a version with two speech bubbles and a

liked the communication symbol of the first

to communicate. Two of them agree that a

HK restaurant on their window display, that

specific example of a food preference, in

and the slogan of the second logo.

conversational box is successfully commu-

keeping the sticker in all white is a good

nicating a message of ‘welcome for request’,

solution.

WINDOW SIGNAGE P ROTOT YP E 2

““This one may confuse me whether they are selling green food or their ingredient is fresh etc.......”

Page 13

Page 14

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N

P HYSI C A L S OLU T I O N

Design

WINDOW SIGNAGE P ROTOT YP E 3

Page 15

The final design solution is still very clear and easy, because the interviewees liked that compared to the hectical signages you can see on restaurant windows in Hong Kong. We kept the idea of the two speech bubbles to show the communication between user and provider, in this case the restaurant visitor and the restaurant staff. We also kept a typographic solution to communicate the idea of our information system: ‘we cater to all your needs’ should take the fear from the user to order something wrong and offers a service by the restaurant.

Page 16

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

T E S T ING

We tried three different sizes of the window

To reach a better result on different back-

signage. The first one is 21 cm high, the sec-

grounds, we decided to go for a inverted

ond 17,5 cm and the third, the smallest, 12

version of the white window signage as

cm. We asked people which one they would

well. Otherwise the contrast between back-

prefer from different distances. Even from

ground or wall and the signage is too low

our nearest distance, about 150 cm away

and you might not see it from a bigger

from the window, people prefered the mid-

distance. If you now got a very bright back-

dle or the biggest size of the window sig-

ground, you easily can use the black sig-

nage. From a farer distances they said the

nage with white typography.

biggest is the most comfortable size. After a distance of five meters it is hard to read the content of the signage, but you can still realize the shape of the logo. And the clear design of the signage stands out of the

As a second solution we want to try a small stroke around the window signage to make it look like an seperated object.

cluttered and overloaded stickers of other providers.

As an additional point they said they liked the signage on an eye level height to make it very visible for adult people.

Page 17

Page 18

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N

P HYSI C A L S OLU T I O N

Design

EMERGENC Y C ARD P ROTOT YP E 1

Relating back to the questionnaire on page 16 and 35, we decided that in addition to the app we will supply a information card that will show all the important information about the user and their eating requirements in cantonese. This will allow local staff to read and understand the food requirement and help prevent cross contamination and serving food that could cause an allergic reaction.

To further expand from just using the mobile app, we thought that having the card accessible to the user physically may be helpful as well, as they can keep it in their pocket incase their battery on their phone runs out, or they just need quick and easy access to the information when ordering food.

Here on the right is a diagram for how the system could work, the profile will be made on the phone, shared to the profile that can be accessed on computer too, and then you can download the pdf of the personal information card.

Page 19

Page 20

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

As we mentioned that there are a few prob-

T E S T ING

lems concerning the readability, we tried to fix these problems with the following steps:

Here we have but the information card into

questionnaire about colour representation,

a simple design. We wanted the information

green was voted the best colour representa-

and cantonese to be the most important

tion for like, which further highlights the

and stand out part of the card, to offer bet-

positive feel the colour green brings. This is

ter readability to the local staff.

why we turned this prototype card to only green.

We increased the size of the typeface to reach more attention to local people and reduced the size of the less necessary parts of the card, like the home country and the

From the first prototype, red was identified as a negative colour, and the cantonese was

The other pictures showing how prototype

written too small, so for development the

1 was tested by a user, the user who is actu-

type was increased and condensed to be

ally a local was the one to identify that the

easier and simpler to read and understand.

written cantonese was too small to read,

Multiple colours were brought into the de-

which is a great way to have gained infor-

sign, however we felt relating back to the

mation from a locals perspective.

age of the user.

Based on our previous research we changed the colour to green and as another benefit it matches with our colour scheme for this moment and looks more like part of our information system.

Page 21

Page 22

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

P HYSI C A L S OLU T I O N

D ESIGN

TESTIN G

Design

Testing

Design

Testing

With this prototype we started to go on with the colour results of our survey and turned the whole card into a green colour. Furthermore, we increased the size of the cantonese sentence to make it more eye catchy in a case of emergency.

The typeface is now big enough and easy to read for the local people. Now it is much faster to order some food with this part of the app or get a fast feedback from other people in a case of emergency.

After we finished our last testing results very successful, we tried to match the style of the current emergency card with the rest of our information system. For this reason we changed the color to yellow and recreated the illustration. We kept it more simple to reach more clearness and a faster reaction of local people as a result.

The results of our testing were still positive and without loosing any quality in functionality. The most beneficial aspect for this improvement is the connection to our other parts of the information system. Now the style of the emergency card fits to everything else and does not look like a separate part anymore.

P HYS IC AL S O LU T IO N

EMERGENC Y C ARD

EMERGENC Y C ARD

P ROTOT YP E 2

P ROTOT YP E 3

Page 23

D ESI G N

T E S T IN G

Page 24

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N

P HYSI C A L S OLU T I O N

Design

LEAFLE T P ROTOT YP E 1

Page 25

For user who prefer a physical solution instead of a digital device, we created a leaflet to with useful parts to order safe food in a restaurant if you have any allergies, religious food preferences or habits like vegetarian or vegan. A part of translated orders helps the user to get the right food. You can easily point on ‘excuse me, I’m a…’ and afterwards point on ‘vegetarian’ for example, if you want to eat meat free food. Or you can copy the cantonese word into the gap to finish the sentence. On the right side you can find possible symptoms caused by food allergies to show somebody else your personalized emergency card as soon as you notice any of these.

Page 26

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

T E S T ING

We gave the leaflet to a few user (exchange students) to proof its usability. First of all

After the testing results we rearranged the

instant use in a restaurant. The back side of

leaflet and created a front and back side.

the paper with the symptoms is now not

We switched from an A3 paper size to an A4

that prominent than before and it it easi-

paper size with two printed sides. With this

er for the restaurant visitor to figure out,

simple change, we improved the usability

where he or she have to focus on first. Now

very quick and got better results after-

it is more clear and structured and feels not

wards. Now the user knows much quicker,

overloaded with information anymore.

which parts of the leaflet are for a fast and

they liked the big and eye catchy style and layout of the left side of the page. They directly knew how to use it and how to order food with it. In a small roleplay they were able to order some allergy friendly food without any problem. The right side was too confusing standing so obvious to the main used part and keeps all the awareness. And it took some time to understand the function of the right side. Afterwards we decided to put the right side on the back of the left part and rearrange some parts together with the users to make it more efficient.

Page 27

Page 28

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

T E S T ING

It was possible to do the testing for the second prototype directly after the first feedback, because we just had to fold our current dummy in half and create a double sided A4 paper. Afterwards the reaction was better and the interaction worked quite faster. All of our interviewees used the leaflet in the right way. With a simple change we gained a successful testing result.

Page 29

Page 30

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

D ESI G N

DI G I TA L SO LUT I O N

Design

MOBILE APP P ROTOT YP E 1

For our first app prototype we tried to combine all the first ideas we collected already and combined it in a first interface. At this moment we hadn’t focused on a special topic so far. So the app deals with all kind of language barrier problems we could imagine. We included daily or helpful situations like public transportation, emergency information, shopping, events and food. The first step already was the language selection. The second one was to choose your primary needs for a short cut to get an better overview. In topics like food you have different functions with different filter options, for example vegan, nearby and so on.

After this raff visualization we got the first base to start some testings and get some feedback from different users.

Page 31

Page 32

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

T E S T ING

After a survey about the offered service topics we collected before, we got some new results, which changed the direction of our project. Not all these functions are necessary for the users. But in one topic nearly everybody agreed: Food is interesting for younger and older people, independent on their education, interests or financial status. Eating is something that everybody need to do and which can be connected to a lot of problems if you can not communicate with the restaurant staff for example. For this reason we decided to go on with the food topic. Some other useful ideas from people we talked to

Activities

We rearranged the interface and functions

Food

specific kind of users and focus on the topic

Transport

target groups. But all in all, the sample of the survey all liked the idea to solve the language barrier problem with an app and our intention, because most of the interviewees were exchange students who are on one hand technic affine and on the other hand the perfect target group, because they nearly

‘food’. So we canceled all the functions we didn’t need anymore and worked on the

Emergency

usability. If you got special food preferences

Navigation

the same facts into the filter? And from now

Events

for example, why you always should type in on, we had to find more useful functions which are focusing on just the food topic.

Finances

What could happen? Where are the prob-

Translation

look like? ...

during the interviews, was to focus on the personalization or presettings for different

after our first survey to make it fit more to a

lems? How could a process of ordering food

• 100 % positive Feedback for the idea

Night Life Shopping Attractions

• Food is the most interesting part for for-

eigners • Personalization is a good function • Integration of other applications • Different pre-settings depending on your

profile

all had a problem by ordering food already.

Page 33

Page 34

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

DESIGN + TESTING

DI G I TA L SO LUT I O N

P ROTOT YP E 2.1 Design

MOBILE APP P ROTOT YP E 2.1 P ROTOT YP E 2.2

Page 35

After the first feedback and testings, we created a second interface, which matches more with the idea we were following at this moment. We reduced the functions to the food related topic and added a few theme specific options. After the colour survey we figured out, that people are thinking of a bright green, when the word ‘healthy’ comes into their mind. So we decided to go on with a light and green coloured design. To support the light and minimalistic style we created simple outline icons for different food preferences. But the main improvement for this prototype was the personalization. When you use the app the first time, you have to configure your own profile. The app will ask you about your language, your allergies, your food preferences, your religion and your prefered cuisine. Based on this profile you can find a restaurant nearby, that fits to your needs, without using the filter function every time.

From now on, it’s an intelligent app, that knows your needs and your eating behavior and select restaurants where you can find the food you’re able to eat, without caring about an allergic shock or meals you don’t like.

1

2

3

4

5

6

The first time you are using the app, you have to finish six simple steps to find a restaurant with your personal needs. The second time, when you already did the personalization, you just have to click once to find all the restaurants nearby which are fitting to your eating behavior.

Page 36

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

DE S IG N

TESTI N G

P ROTOT YP E 2.2

P ROTOT YP E 2.2

The result after a few quick feedbacks was

We gave people of a possible target group

of this part was very good and easy to un-

very good, but we changed a few small visual

the smartphone with the pre-installed food

derstand. Most of the people needed under

‘Imagine you’ve got a peanut allergy and you like chinese food. Try to find a restaurant

details and navigation options to improve

allergy app and gave them a task. Imagine

two minutes and some under one minute

that is close to you.’

the usability. We made the whole interface

you have allergy ‘xy’ (tried different allergies

to make the registration part. The searching

a little bit brighter to make it look friendly

or religious food preferences for different

part was very quick as well, but you com-

and modern. Another improvement was

scenarios if they had no real allergy or pref-

pare and have a look at different restaurants

the use of real pictures in some cases to be

erences). The personalization worked very

first before you make a final decision.

more specific. The visualization of different

smooth and like we hoped for. The usability

cuisines is easier to identify with photos and more attractive for the users. Zoe created a real working app prototype out of it, which enabled successful testing results.

Page 37

Page 38

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

1

Page 39

2

Page 40

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

Setting up your profile with your preferences

T E S T ING

1

After the testing of different scenarios with

application and the user knows nearly all the

the app, we figured out, that the usability is

time what’s the next step. But there are still a

The APP is very convenient for middle-aged and elder-

very good and easy to understand. There are

few parts we can improve:

ly, and also in line with the American habit. I can choose language and read English very smoothly. The picture is

not many problems by interacting with the

Choose the cuisine you want

realistic, but look forward to its improvements on its inter-

to eat right now

action with user. You can increase the font size for some Font size are too small to

Less important info occupies

Need a clearer instruction of

read in actual environment

too much space

using this page

options.

The first is a handy APP, very helpful to life, we can choose

2

anytime, anywhere restaurants, especially in travel, you

Find your way to the restau-

can find the local specialties, to solve the problem of lan-

rant and order your food

guage barrier, but also in the event of an unexpected situation Timely help. But I hope it can be more perfect, the page runs more smoothly, more maps can choose, some places can not use Google Maps. Hope that more humane design, looking forward to more surprises.

Page 41

Page 42

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

Personalization

D ESI G N

DI G I TA L SO LUT I O N

Design

MOBILE APP P ROTOT YP E 3

In this prototype we hadn’t changed a lot functions or navigation parts because most of the users were quite fine with the usability. The only function we added was an additional way to figure out more about ingredients in food or the restaurant menu.

So we included a scanning function to get live results like translations or allergy signs. We fixed the previous points the user mentioned before in the second prototype testing. The main improvement for this prototype was an optical upgrade to match up with our previous colour surveys. We also tried to combine the style of the app with our new branding ‘Eatsy’ and make it look more like one whole information system. Now the user can see the direct connection between the app and our other devices.

Wayfinding

Page 43

Asking for help

Page 44

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

Food Menu

DE S IG N

D ESI G N

The Live Scanner helps the user to interact

This function is most useful for people who

During our final testing, we got nearly per-

with objects to get further information about

prefer a digital solution to find their prefered

fect feedback on our app. The only thing

the ingredients of food or a meal.

food. It expects a certain openness toward

some people looked for is a ‘no thanks’ or

mobile devices and technology. If you have

‘skip’ button if you got no special food pref-

that, it is an intuitive and easy way to get a

erences or allergies but you want to use the

Scenario 1 - Restaurant: Based on your user profile and an online database the live scanner is able to figure out, which ingredients on a menu are fitting to your eating hab-

fast and clear answer if you can eat something or not.

Live Scanner Real Time Translation with allergy note

app anyway or don’t want to be that specific at this point. We gave our interviewees two different tasks and asked them to solve them

its. By using your smartphone camera, the

Food Packaging

app shows you an augmented reality with

in about 5 minutes. Everybody was able to finish our task in less than the 5 minutes.

a translation and personalized notes of the

Ordering food, finding a restaurant, translat-

menu.

ing a menu or finishing the own user profile

Scenario 2 - Supermarket: By scanning the

was no problem at any point of our testings.

barcode on a product the live scanner reacts

The users used the right buttons or had no

depending on your profile information. If the

misunderstanding during their tasks. We

product includes any ingredients you got

catched feedback like ‘that was very easy’,

problems with, the screen flashes red. If the

‘very intuitive’ or ‘easy to navigate through

product is safe for your consumption, the

the interface’. At least the scanning function

screen flashes green.

was another highlight the people really liked, because you get the information you need instantly tailored on your user profile.

Live Scanner Real Time Ingredients Check

Page 45

Page 46

SD2263 User Studies Semnar / Group: Food Emergency Information Campaign / Final Report

Original menu in cantonese with insufficient information of ingredients for his habits

Scenario 1: Restaurant as a Muslim with an allergy

Scenario 2: Supermarket as a vegan

Jacob is muslim and not allowed to eat pork meat because of his religion. Furthermore, he got

Tara is only eating vegan food. This fact makes it complicated to buy food in a local supermar-

a food allergy against gluten. To prevent ordering anything which can cause an allergic shock,

ket with not much international descriptions. She scans the barcode on the food packaging

he created an user profile on the eatsy app.

to get an answer if she is allowed to eat it as a vegan or not.

Scanning the menu with the Live Scanner func-

Get an instant translation of the menu and signs on

tion of the personalized App

every meal without pork and gluten on the screen

Packaging maybe is in a different language or don’t show every ingredients

Page 47

Scanning the barcode with the Live Scanner function of the personalized App

Get an instant result if you can eat the product (screen flashes green) or not (screen flashes red)

Page 48