Medium Fidelity Prototype
After the first design iteration, the design team get down to create the medium fidelity prototype and aim to focus on some of the main features in the application. In the last prototype, we had more clear concept based on users' feedback on the features. The team discuss together during week 10, we decided to focus on some of the features: navigation, the grocery and inventory lists, tips, and incentive system to expand the functionality in detail. On the other hand, we also worked on combining and narrowing down the complexity steps for users to go back and forth in the application. The decision made in the meeting has been shown in Figure 1.
Main Changes
The six main functionalities have been made adjustments as discussed below:
-
Navigation
Based on the evaluation result of the low fidelity prototype, the navigation was not clearly identified with the main features the team want to include in the proposed concept. It was a bit complex and lost connection with some of the features that were interconnected with the items users had. To be more specific, earlier we had two ways of Sharing function: 1) the user can swipe to the different directions on an item to make operation. When the swipe to the right, the “Used” function will appear. If the user swipe to the left, the “Share” function will be active. Then when the user clicks on “Share”, it will jump to a different page for more detailed information where the user can request and arrange to pick/drop up the food. 2) the independent Share page could be found at the navigation bar also provides share food function. The user could either choose to add an item to share with neighbours or request to pick up an item from others. The other issue raised up from the user testing is that the mixture of checkbox and swipe operation confuse the user. Some of them did not realise the existence of the swipe function. Therefore, here we propose a new navigation bar with fewer navigation tabs focusing on Grocery list, Inventory, and Profile to give users a clean, easy, and direct navigation user experience.
-
Grocery and Inventory lists
We had good feedback on the inventory function, but a few users were confused with the “share” function that was designed with the swipe left to show. To reduce the confusion, we changed the swipe to the left and right to an expanding card function. Here users can manage the amount of food they used or wanted to throw. At the same time, they can provide/view tips and recipes. The team thought it was a good way to combine all the functions on one page so users can easily operate with the items on a single page. Since there were lots of information displays on a card, we want to hide the checkbox to minimize elements on the page and create more breathing space. The checkbox ticks for multiple selection; it gives users an option to select multiple items at once. When Selection icon is clicked, the “Used” or “Throw” buttons would show up at the bottom of the page. Therefore, it is suitable only to show when it’s needed. -
Sharing food using the app
The sharing food function had mixed reviews from users. The feedback suggested that users were a bit sceptical about sharing or getting food from strangers. Some felt that they would neglect to share food that was about to go bad. Also, meeting and arrange time was another hassle that users were not interested. Even though some suggested that they would share food only with the people they know, they still felt that sharing food would make more sense to donate them instead. It felt that users acknowledged the importance of preventing food waste but it might still take some time for people to get comfortable with the mentality of sharing food with strangers. After discussing with the team, we felt that we would want to focus on other features and hold on with the sharing food function for now. -
Reward/incentive system The core concept that gives the users regular basis behaviour reflection to help them build a healthier food waste habit has been confirmed during the evaluation. The team discussed the suggestions and new ideas from the testing participation. However, different user has different needs and expectations for this personal function. The team decided to keep the minimum function of the Profile page by only showing the statistic of “Used” and “Thrown” items. A diagram will be used to present the visualised proportion of them. And the “Saved recipe“ section from the previous prototype has been removed from the page as well.
-
Preservation tips The last version of the checking storage feature has been designed to click the information icon on the top right corner of each item on the list. Yet, many users did not notice this feature in the testing session. The information icon is not stand out enough from the other information provided by the item cluster. Therefore, we decided to raise the level of this function to put it in the expanded menu for the item on the Inventory list page. Since the preservation tip sharing function is the presence of the social technology aspect in our system. This function has been raised up to third place on the priority list. The users could go through other users’ storage tips concerning a certain item as well as contribute their know-how to that item.
-
Recipe suggestion
Since many of the resting users have indicated that the recipe recommendation is one of the most motivating features in the system, the team will keep this function. However, this function is placed at the bottom of the priority list. We decided to emerge this function into the individual item expand menu on the Inventory list page. The user could check the recipe of using certain ingredients by clicking the expand trigger and then choose the “Recipe” tag inside it.
When we were deciding on a color scheme for our concept the most obvious choice would have been green since this color is often associated with food. The team felt, however, that this choice was unoriginal and therefore decided to go for a different color scheme based on orange tones. Orange is often associated with optimism and social connections and therefore felt appropriate for this project. We also included a red shade which is often associated with action, ambition and determination which is something we wished to inspire in our user group. In addition, we added a green and a yellow color to the scheme and a for supplementary use. In contrast with the color scheme, we used white to bring elements out of the background to highlight them and make them more visible.
The background for the app was made based on the colors from the color scheme. It was decided to make a gradient since this was something that was frequently seen in other apps when we were looking for inspiration. With this background image we looked for an image to use for the frontpage. When this image was found we deleted the original background and replaced it with our own gradient.
The main font we chose as the body text was open sans which is a very user-friendly and good-looking sans serif font. We also supplemented with Roboto on those places that needed a bolder font in order to make the text more visible.
We kept most of the structure from the low-fidelity prototype, just updated with new fonts, colors and icons to make it feel more modern and useable. Since the concept was updated along the way the new page “tips” needed a new structure and design and it was decided to make this page look like a common comment section so the users could associate with this feature. Search fields replaced the button in the center of the main menu for adding items to both the inventory and grocery list to more clearly indicate this feature for the on-looker. This search field was made originally transparent until the user clicks on it, then it becomes solid white to emphasis that it has been clicked. The biggest change to the structure was the drop-down function on the inventory items which removed the slide function we previously had incorporated in the low-fidelity prototype. This choice was made due to the previous user testing where several testers struggled with finding out how this feature worked. In this new drop-drown section we added a function to reduce and increase the amount of food on that specific item with the use of icons. Also, buttons for the “tips” page and “recipes” page were added in this section. Lastly, we added two new buttons to this section, namely “use” and “throw” which is used according to what the user did to that specific item. The “use” button was added the green color while the red was used for “throw”. This was done to distinguish the button from another and also indicate slightly what the “right” choice was since green is often associated with correct choices. The last additional feature that was added was pop-up boxes that were used to select the correct amount of an item when it was added to one of the lists, the same icons for increasing or decreasing the amount of an item in the drop-down section was also used here.
One page that was redone from the last prototype was the profile page where much of the previous content was removed to simplify this page. Since the feature that incorporated this page no longer was included made it obvious to delete it from here as well. However, since this page would not be tested made the team decide to not focus much on its design for this prototype. Last small changes were the repositioning of the menu icons since there was one less for this prototype and also two buttons with the same colors as the drop-down “use” and “throw” was added under the grocery list to either purchase the items from that list and move them to the inventory or delete them altogether. This was done by clicking on the checkbox next to the items and then one of the buttons.
As with the low-fidelity prototype, this prototype was also build using the online prototyping tool Figma.
Link to the Medium Fidelity Prototype: https://www.figma.com/file/sWjfFNoQyk4Zz4ic5hUMtD/FoodWaste_2.0?node-id=7%3A395
Instructions: Before you use the prototype from your phone please follow the instruction below.
- Download a Figma Mirror App from Google Play or Apple store.
- Create an account.
- Turn on the Wifi on your phone and select a Frame or Component on the canvas.
Other option:
You can also test the prototype directly from the link above and use it directly on the website.
For the developer: Get consent forms signed before you begin.
Get feedback on aesthetics and further functionality from first time users.
- Whether users are able to use it without too much effort?
- What users find appealing about the design?
- Whether the basic functionality implemented is clear (purpose of the app)?
- Are the changes from the previous session satisfactory? Were the users confused about the same things?
You are here today to complete some tasks on our app. It is built to help you reduce your food waste. Pretend you have an account with the app.
You will now be given a set of tasks that we want you to complete using this application. We request you to commentate when you are doing these tasks and describe what you think should be done before starting the task:
- Add full cream milk to your grocery list
- Select the first four items on the grocery list and move them to your fridge
- Delete full cream milk from your Grocery list
- Multi-select Cucumber and Beef mince in the Fridge of the Inventory list
- You have used those items, record this in the Inventory list.
- Check the tips for chicken thigh
- Add a tip in the chicken thigh
- Change the amount of the chicken thigh to 100g
- Check the Profile page
For the developers: Observe the user using the prototype. Make notes of things that they attempt to do with the prototype.
- What do you think this application does?
- How was this app to navigate? good/bad - why?
- What about this is confusing?
- Follow up questions on specific things that were hard to understand
- Why, how would you improve it
- Have you used another application
- Do you have any suggestions on how this application could improve?
- About the profile, what would you like the app to store?
- Which function do you think might help you to prevent/temper your food waste?
- What do you think of the colours?
- What about the icons?
- What would motivate you to use this application regularly?
- Any other comments on the visuals of this app?
- Any other comments about the app itself?
We recruited 4 users to participate in testing. The insights from the sessions are summarised below alongside quotes.
Design
"The the color is ugly."
We received some feedback on the visuals of the app. All the comments were subjective and preference based. In the future, maybe themes can be made available so users are allowed a certain degree of customisation in terms of colour. Otherwise, the increased ease of use observed in users during the sessions validated the design changes. We believe that simplifying the interface not only rid it of clutter but made the user experience better.
Functions and Features
"Maybe it could tell you about eco friendly products or even that you have been eco friendly if you buy those products"
"Using machine learning it could track my profile and tell me if I’m eating too few veggies"
"Recommend the quality of food by serving size so that I won’t overbuy the food. "
These were user suggestions for what else the app could do or even what it could do differently. Many suggestions were outside the scope of this project, such as dietary recommendations since our domain is food waste and it is behaviours associated with food waste that we are targeting in users. We would need to do much more research to link dietary recommendations or product recommendations to food waste in individuals. The last quote could be argued to be within the scope of this project but for now we depend on the users to learn what they are wasting from the app and adjust their buying habits; This would be driven by the motivating features of the app.
Navigation
"All navigation was easy except the select button. Struggled with finding it for the multi-select task. The placement of this "button" seemed detached from the rest."
"The select button could be replaced by hard press selection and instead at that location on screen there could be a plus sign representing add"
"Are we able to search the inventory?"
Users primarily had issues with selecting items in the inventory. This might also be attributed to the grocery interface and the inventory interface differing in this regard. This is a kink we will need to iron out. The select function not only needs to be readily apparent to users, we need to have it behave similarly to other apps that people are familiar with so it is not a complete departure from the norm. The last quote brought up something we had completely overlooked, searching the inventory. We did not anticipate that users would want to do this, it will need to be taken into consideration and implemented in this project.
Icons
Unlike with our previous prototype, the icons were well received. This needed to be noted as there was some confusion in all the testing sessions for the low fidelity prototype due to the use of unfamiliar icons apart from the crowded interface.
Social Aspect: Tips
"Organise the tips into different categories."
The fidelity of the prototype interfered with our ability to full communicate this aspect of our prototype. We did still receive some usable feedback, organising tips into categories will also need to be implemented for recipes once that page is created.
Profile Page
"Should show your habits. How much you've used and how much you've wasted. Also show the nutritions you have consumed would be great. Like calorie intake" "Percentage of how many vegetables vs meat they have consumed " This was, as explained previously, outside the scope of this project.
"It would be good to show the price of the food I bought. " This quote tracks back to our initial consideration of a money loss metric.
"Maybe show the history about what food did I buy, used, and throw " A valid suggestion.
The profile page was left almost blank in the prototype save for the use and throw pie chart to demonstrate that it tracked that information. This was done because we wanted to learn what users would want on this page. We received a lot of feedback on what users would want to see on this page. This page would also be where we would incentivise usage so it was important to consult users.
Incentive System
"The function that motivates the most is the inventory which shows mow long you have left before the expiration day of an item."
"If they track your use and throw maybe the app could tell you how many kids in Africa it would feed."
Since the start of this project, we wished to learn what motivated users and what would encourage them to use our app with regularity. As with our previous testing session, our users indicated that the inventory function would definitely help but they also brought us novel suggestions to implement on the user profile.
Gamification
"Competition, link it to social media and you could have a leader board for least food wasters since you can sign in with Facebook"
"There could be a small game where you collect energy for how long you’re using the app and you can feed a virtual plant and after sometime you can plant a tree in real life with your usage. This is addictive and makes people feel good, charitable causes would be a motivator "
Users, unexpectedly, threw in some ideas of gamification. This could also be a motivating feature, something we did not consider. Additionally, they brought up charitable causes as motivators. These are quite interesting and will require further research.
From this testing session, many issues that were brought to our attention were related to the fidelity of the prototype and the limited functionality it offered rather than criticism regarding holes in our concept. Fortunately, we created a high fidelity prototype that could overcome the limitations of this prototype and allow us to test our application with higher functionality. We also received comments on issues we were already tackling in the high fidelity prototype. As an example, a user asked how they would be able to trust tips and recipes they found on the app: We were already in the process of building a rating system for the tips that would place the highest rated tips at the top of the list. We will take what we can from these insights and try to apply it to the high fidelity prototype. Given that they were developed together gives us limited time to take all the insights into account.