MENSA APP FOR HOChschule rhein-Waal
A smartphone application is designed using human-centered design methods to aid Rhine-Waal University of Applied Science's students with their eating experience.
THE CHALLENGE
Students with food constraints, especially non-German students, have no easy way to access information about the offered meals in the university’s canteen. Currently, detailed information about the ingredients in our canteen offered meals, specifically markings, additives and allergens, are only available through a downloadable PDF-file on the university website and only in German language. Besides, new students at the campus consider it difficult finding answers to important questions regarding the use of the canteen, for instance, which kind of payment methods are accepted.
MY ROLE
The team composed of 3 talents, with my role being the UX and UI designer. I took the responsibility to conduct user research, design user interfaces, and perform usability tests for low- and high-fidelity prototype iterations.
THE PROCESS
A user-centred approach was followed, the journey of which is represented by the diagram below.
Overview of the process
User research was performed by conducting user interviews to gather insights into user's pain points and problems, their wishes, and understanding the context in which they would use the app. These findings were used to define a set of requirements and use-cases within the scope of this project. After understanding the user and the requirements, we brainstormed initial solution concepts and sketched wireframes and user flows of the viable solutions. Based on these wireframes, the low-fidelity prototype was designed and tested. Three iterations were made where the usability problems were tackled and improvements were made based on users' feedback. The high-fidelity prototype was then designed and tested. Quantitative data was gathered during the testing to make further design decisions. After three iterations, the final prototype was ready to be implemented.
USER INTERVIEW
One-on-one interviews were conducted to gather requirements which is a vital phase of a project when developing a new system. The key findings from these interviews, based on the diverse opinions, ideas and suggestions provided by the users, were used to define the user and the system requirements. These requirements were then translated to the activities a user can perform using use-cases.
USE CASES
To describe the overall workflow in which the user would interact with the system from beginning to end the use cases were developed.
Use-Case Diagram
WIREFRAMING
After understanding the user and creating a set of requirements and use cases, initial solution concepts were brainstormed and wireframes of the viable solutions were sketched. The below-shown wireframe represents the user-flow of the application based on the defined use-cases.
LOW-FIDELITY PROTOTYPING
Based on the wireframe above, the low-fidelity prototype was designed using Sketch and Illustration. Below are a few screens from the first iteration of the low-fidelity prototype.
Low-fidelity prototype screens
LOW-FIDELITY PROTOTYPE TESTING
The digital design was printed out on paper and tested with users. Qualitative data was gathered to tackle usability problems and make improvements based on user feedback.
Paper prototype user testing
Below is an example of one of the iterations of the screen 'Meal List'. The design decisions for this screen are explained in detail in the next paragraph.
.png)
Low-fidelity prototype iterations for 'Meal List' screen
The key insights from the testing for the above screen 'Meal List' were as follows:
​
Improvements
For the above 'Meal List' screen, from first to second prototype iteration the meal entries gained additional information, that was not clearly defined previously. Boxes that stand for meal attributes received either a checkmark or a “forbidden”-icon indicating that these attributes refer to liked and disliked ingredients from the user’s profile.
​
Behind the meals’ names, letter markings were added, specifying basic attributes (e.g. V for vegan) defined by the Studierendenwerk Düsseldorf. We opted to add these same letter markings as they’re widely used already and parallelly introducing a new labeling system would confuse the user. The detailed view of a meal incorporated the same changes with an additional display of the meal’s calories.
The first iteration top bar shows a scrollable view of dates with an unspecified length of days you could view into the future. After more research, we realized that data about meals is only present for the five days and therefore changed the top bar to a non-scrollable bar with always the current and next four days.
​
Usability Problem I
The “Preferred meals only”-toggle on top would filter the list to show only meals that have favorable attributes. Therefore unpreferred, as well as neutral meals, (i.e. meals that neither contain liked or disliked ingredients) would be hidden. If a user has not specified any favorable attributes in his profile, the filtered list would be empty then and thus serving no function and possibly causing confusion.
​
Solution:
The toggle’s label was changed to “Hide unfavored meals” so that it is highly likely that even if no favorable meals are eligible to be displayed, at least neutral meals would always be displayed.
Using the toggle without having created a profile is not possible, therefore a popup prompting the user to create a profile is displayed in that case.
​
Usability Problem II
Next to a meal’s name a star icon acts as a button to mark a meal as a favorite and thus receiving notifications about its availability in future. Some users related the star icon to a rating feature instead, which caused confusion.
Solution:
The star icon was changed to a heart icon, as the latter more accurately represents a symbol for something that you like.
Furthermore, on the first few uses of the favoriting feature, an explanation is now displayed on screen for a few seconds.
HIGH-FIDELITY PROTOTYPING
After three iterations of the low-fidelity prototype, the high-fidelity prototype was developed and tested. The screens below are from the final iteration of the prototype.
High-fidelity prototype screens
HIGH-FIDELITY PROTOTYPE TESTING
Usability tests were conducted on this design to determine how the interface facilitates the ease of use, the information facilitation, the learnability, and the look and feel appeal. Quantitative data (task success rate, time-on-task, user error rate, system usability scale) was gathered to make design decisions for the iterations. Some examples are shown below.
Data collected from usability testing of high-fidelity prototype
Three iterations of the high-fidelity prototype were made based on the test results. For the same screen 'Meal list' as shown in the low-fidelity example, the changes in high-fidelity for one iteration is explained below.
.png)
High-fidelity prototype iterations for 'Meal List' screen
The key insights from the high-fidelity testing for 'Meal List' were as follows:
​
Usability Problem I
In the first iteration of high-fidelity prototype, the ‘Hide unfavored’ toggle option filtered meals to show and hide unfavored meals. The toggle option along with the label to perform the task of viewing meals accordingly was not obvious to the users during the test.
​
Solution:
The ‘Hide unfavored’ toggle button was changed to segmented controls and renamed. Segmented controls are often used to display different views and here the two kinds of views are now the filtered and unfiltered list with labels ‘My Preferences’ and ‘All Meals‘respectively.
​
Usability Problem II
The attributes referred by the red and green smiley faces to distinguish between preferred and unpreferred meal ingredient did not meet the user expectations. The smiley face, rectangular and small in size, was not easily distinguishable even with color. Also the contrasting color was not friendly and created confusion as green resembled vegan or vegetarian to many users instead of preferred and unpreferred ingredients.
​
Solution:
The smiley faces were changed to circular faces with high clarity and warm, user-friendly colors to reflect preferred and unpreferred moods instead of vegetables.
View the full prototype here.
Wireframe and User Flow