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