The basis of this phase was the results from the research and knowledge about the UCD and UI principles. Firstly, a user scenario was developed to illustrate the possible user journey while ordering a food using the service (figure 3). This scenario was based upon the regular lifestyle of the interviewees which demonstrates the need for the app.
Figure 3. User scenario about the food ordering concept
A user journey map was drawn based on the user scenario and usual food ordering pro-cess (figure 4). This user journey helps to realize the touchpoints of the users with the app and helps designers to focus on stages that are more important to achieve the goal of the user. This user journey provides all the basic touchpoints, starting with opening the app and ending with order completion.
Alauddin is a student in Helsinki. Due to his busy schedule, he often eats out-side and sometimes orders food home. He likes to try new taste and explore different restaurants. But often he gets disappointed due to lack of information
about the portion size or a better understanding about the product. Recently Alauddin learned about an AR app “SEE-EAT” which allows him to get a 3D picture of the food and lots of other info that help him decide to buy a product.
He found out that the app is very easy to use. He just needs to scan a marker of the restaurant he wants to eat using his smartphone and it will then select and display the menu of that restaurant. The app augments -the 3D image of the menu items in the real space using his smartphone. It also provides the list
of ingredients, price, nutritional values, and his friends reviews in the same view, depending on his choices. Alauddin can now easily explore new places
with the help of “SEE-EAT” app, with an improved experience.
Figure 4. User journey map for food ordering process of “SEE-EAT” app
Based on the user journey map and the scenario a Low-fi prototype was developed (figure 5). The low-fi prototype brings the most fundamental options of this app and allowing the user to successfully order their desired food with the augmentation of 3D image of the product. While developing this prototype the goal was to implement only the basic func-tions and there wasn’t much emphasis given on color choices, details, or interactivity of the design.
Figure 5. Low-Fi prototype design for the Augmented reality concept
The Low-Fi prototype was later used to develop the Hi-Fi prototype design. To design the Hi-Fi prototype, the more emphasis was given to the details of the design using the UI principles and UCD methods. Detailing was also done utilizing the information collected during research about the user needs, expectations, and frustrations.
Color psychology is a large discipline which deals with how different color are related to human emotions. Eiseman (2017, Ch7), associates color psychology to nature by illustrat-ing how yellow color can be related to sun which brillustrat-ings warmth and joy. While blue is to sky, that brings the feeling of freedom. To design the hi-fi prototype the color palette was chosen to provide the users with knowledge, passion, wisdom while also provide the feel-ing of liveliness and freshness. There was also effort given to provide some sense of free-dom, imagination and inspiration while choosing the colors for the design. So, the intent was to choose some colors combinations that are related to yellow, blue and green (figure 6).
Edit selected items to modify them as the choice of the user
Confirmation
Figure 6. Color palette choices for “SEE-EAT” AR concept design
While designing the visual part of the design, emphasis was given also to provide icons that are familiar to the users. It was also emphasized to provide conventional naming so that user feels familiar and comfortable environment (figure 7). Having familiar icons and naming provides users with emotional attachment with the design.
Figure 7. Choice of Icons and naming for the conceptual design
While designing the prototype similar informative items were grouped and color coded for ease in browsing the design for the user. The color coding was done in a way that allows
users to differentiate design components in terms of amount of use. While the more quent used components are highlighted in a way so it can be easily visible, the less fre-quently used components are less highlighted. Highlighting was done both by color choices as well as change in opacity (figure 8).
Figure 8. Use of contrast and opacity for better visual experience
While designing the most central part of the concept which was the augmentation of 3D elements, careful consideration was made to allow the user to distinguish the virtual com-ponents from real comcom-ponents. It was found that apart from the 3D image of the food item, there are also other components which provides related information for the food. Each of those items were designed in such a way that they don’t obstruct the visibility of the user in the real world, while providing the necessary information of the virtual world (figure 9).
Figure 9. 3D menu augmentation concept with relevant information
Knowledges from the research were used to prepare the concept of 3D menu design. To design the concept of the screen where the augmentation will occur, results from qualita-tive interviews were used which provided the user needs and expectations. Utilizing those information and other design choices mentioned in the previous sections, the 3D menu augmentation concept screen was designed. Adobe XD was used as the development platform where the prototype was developed. During the design, knowledge from task ma-trix were used to include different elements. For example, it was found that every single user looks for ingredients list and price while buying a product. So, the design was such that this information is provided right over the 3D image of the food and user can simulta-neously observe both information (figure 9). While more than 50% of the user also finds reviews and information about nutritional values to be important factors while deciding to buy a product, this information is provided in two sides of the product image. The concept was designed in a way that the system will have links to social media, which will allow us-ers to communicate with their friends by providing reviews about their experience with cer-tain product. In the information architecture of the design, nutritional values and reviews are grouped as secondary compared to the ingredients and price list, so there are choices provided for the users whether to view this information or not. Users can minimize or max-imize the lists based on their requirement (figure 10).
Figure 10. Information architecture of 3D menu design
Throughout the design effort was made to make the design simple to use while bringing in every aspect that the design solution is supposed to provide. Based on Galitz theory, The visual aspects such as balance, symmetry, proportion, and economy were considered and adapted to the design. While factors such as consistency, user control, flexibility, error prevention, recognition etc. were also considered and utilized to the design. As the design was conceptualized for AR technology, the technology itself is new and there has not been any standardized design methods yet, but formulas such as transparency or opacity were adapted to the design that are being used in other AR applications.
7 Concept Evaluation
To understand the status of design performance, user experience, and usability of the de-sign, usability tests were conducted. The result of a usability test helps improve the func-tionalities, usability, and user experience of the design. For this purpose, a total of five us-ers were asked to participate in the test where each of them was given seven tasks to complete. By observing the user’s reaction to different screens and scenarios, also from the amount of time being used to complete a specific task knowledge about the easiness to use the design, consistency of the design and other user experience measures was measured. After the test users were also asked to briefly describe their experience, which was later used to realize and adapt to design improvement process.
Different test cases were formed targeting the most common activities relative to the app (figure 11). After the test cases were provided, users were let to explore the design and make independent decisions. The reaction at different stages were noted down and timer were on to figure out the elapsed time for a task. Among the test cases, the goal was to find whether a user can complete an ordering process, whether he/she can find different information that are relevant to users’ needs, to observe how the error prevention works and whether a user can get back from a mistake and how long does it take etc. The list of test cases with details are provided in appendix 2.
Figure 11. Tests cases that are used to evaluate the design usability
The usability tests were conducted at a physical location, the cafeteria of Haaga-Helia UAS was chosen for this test as it resembles more to a real restaurant and visitors of this place visits with a mindset that resembles a real user of this case. Each of the five test us-ers were provided with sufficient information about the process of the interview, and how the data will be handled. The user profile for the usability test is shared below:
Table 3. User profile for the usability test
No. Age Gender Nationality Knowledge of AR
1 35 Male Finland Not much
2 18 Female Vietnam Know the concept
3 20 Female Belgium Little bit, not a lot
4 30 Female Finland Fair bit of knowledge
5 21 Male Finland Very small
The user group for the test was diverse in terms of age, nationality, and gender to evalu-ate the design from different point of views and dimensions. It was found that most of the user had already little or fair amount of knowledge about AR while some had very little or almost no knowledge about the technology. The test was not recorded as for the screen recording but the users were asked to fill up the answers to the questions, which were the basis of data analysis. For the data analysis of this part of the research we have used qualitative analysis technique where tested users were asked to answer various research questions to evaluate the different aspects of the design. While observation method was also used to observe any difficulty for the user to deal with the design and how long it took.
While the test was being conducted it was realized that though the design provides a ge-neric conceptual idea about the prospect of an AR based 3D menu but being a 2D type it was not enough to provide the feel or to demonstrate the scope of an actual proto-type, which could be designed in a 3D environment. Nonetheless there were many con-structive suggestions and observations that was useful to realize the acceptance and im-provement opportunities from the design which could be useful for a future 3D prototype design.
While observation was made throughout the test to figure out any abnormal emotion of the user which should provide knowledge about complexity of the design. Each of the test us-ers were also asked to provide their opinion about different aspects of the design, which are considered as Key performance indicator (KPI). These KPI values provides the user friendliness and level of complexity of the design. For example, a timer was used to meas-ure the time for the users to execute the tasks and it was only active while the user was
executing the asked tasks. Following table provides KPI values for the 3D menu concep-tual design.
Table 4. Results from usability test Task
The result from the usability test was quite satisfactory as every user was able to roam through the design and execute the tasks that was asked from them. Users seem to un-derstand the design quite well and was able to execute the defined task in a fluent and convenient manner.
About the look and feel of the design there was one screen where some users wanted bigger font size or better contrast. The design was later reviewed and found out that while
the test was running through “Adobe XD” platform, there was a black background which takes a lot of focus while the viewer views the scene. But without the black background it is quite clear and easy to understandable (figure 12). While one user also suggested that the design had too much opacity for some elements. The validity of this argument could not be justified unless a 3D prototype is designed. Nonetheless, these feedbacks are very useful for realizing the design scope and improvement opportunities for a future 3D proto-type.
Figure 12. Scene contrast with and without the black background
There was one very special suggestion from a user that it would be nice to be able to play with the 3D product by modifying them. For example, in case of a burger the user wanted to see what is inside her burger by moving different items from the burger. The idea was very valid and surely will be a great addition for the future design.