Foodsharing

Project description

This project was a part of the Interaction Design class at the University of Applied Sciences of Eastern Switzerland. The project group consisted of my classmates Natasha, Jessica and me.

foodsharing Switzerland is an initiative that is committed to combating food waste. It also rescues unwanted and overproduced food from private households and businesses. The organisation of the foodsharing community and its activities takes place primarily via the online platform f oodsharingschweiz.ch.

The project team wants to optimise the user-friendliness of the foodsharing Switzerland website through a redesign. The focus is on the landing page of the website, the registration process for new members and the homepage of the member area. Out of scope is the entire news concept, the handling of groups, the view for participating businesses and the information architecture. Certain parts of these topics will nevertheless be considered if they overlap with the defined areas. The project team wants to provide foodsharing Switzerland with a design concept and a style guide derived from it so that the organisation can continue to operate on the basis of the concept and the guidelines even after the practical project has been completed.

Design process

The project was structured according to Goal-directed Design process by Cooper. Our process consisted of the following steps:

• Research
• Modelling
• Requirements definition
• Design Framework
• Detail Design

Research

The project team was aware that not all usability problems could be addressed in the three months of the study project. Therefore, it was decided to start with the issue analysis, the expert review of the platform as well as proto persona definition and, in a second step, to validate the problems discovered there through a usability test with the users. This allowed the project team to define the scope more precisely.

Modelling

After the project team got to know the current users of the platform better, they were able to complete the proto-persona and derive the personas from it in the modelling phase.

Requirements Definition

Based on the description of the persona, the project team formulated a problem statement and a product vision statement. These statements served as a guiding principle in the later phases and as a basis for all design suggestions. After identifying the persona's expectations, the project team wrote a context scenario. The narrative nature should help the project team to better empathize with the users.

Based on the context scenario, the project team then defined the requirements for the personas.  What's important here is that the primary focus is on how the product can best support the user's goals. According to the Goal-Directed Design approach, the most important requirements are formulated using the following auxiliary words:

• Action​ (what does the user do)
• Object (what the user interacts with)
• Context​ (what is the relationship to the user).

Design Framework

After defining the requirements for the platform, we continued with the design framework. According to the framework, the first step is the “form factor” (device on which the platform is to run), the posture (how long the user spends on the platform) and the input methods (input sources, i.e. what the user uses for his input the platform makes) should be defined. The “functional and data elements” should then be determined (how the individual elements of the platform relate to each other). In the third step, the “functional groups” are formed and the hierarchy of the groups is determined.

After going through these initial steps, the project team formulated the key path scenario in preparation for sketching. This allowed the project team to build a shared understanding and better imagine the persona's journey. Cooper's theory suggests starting with sketching the screens and only then describing the key path scenario. However, the project team decided to change the order and start with the key path scenario. The reason for this was that it was easier for the project team to divide up the sketching among themselves and then draw the screens on a common basis.

When outlining the framework, the project team used a little more freedom than Cooper suggests. Based on the previous analysis phase, the project team decided that a mobile-first approach would make sense for the platform. Since the persona is often on the go and often needs information shortly before picking up the groceries, it is an advantage if it is optimised for mobile devices. With the mobile first approach, you start by conceiving the entire design on a small screen, taking into account the limitations that you have on a mobile device. In order to quickly generate a lot of ideas, the project team chose the Design Studio method. Each member had 15 minutes to put their ideas on paper based on the context scenario.  The results were discussed together between the two iterations, and everyone presented their sketch. After each iteration, it was determined which elements should be retained and which should be adopted.

After the sketching phase, the project team had a basis to digitize the design and create wireframes. In order to test the design framework, the project team decided to conduct a usability test. To do this, the project team determined 3 processes to be tested with the users: collect information, become a member and become a food saver. The usability tests showed the project team where the concept still had weaknesses and where the content was not understandable. The most important findings from the tests were then collected, clustered and discussed together.

Design Refinement

In the first step, the experience attributes were developed. This means three to four adjectives that help to underline the tone, the language and the brand promise. These descriptive words are called experience attributes. The resulting attributes were: Together, Committed, Urban, Natural, Simple. These attributes were the basis not only for visual language, but also later for verification (Semantic Differential).

The project team was split up for the visual design studies. This meant everyone could collect their own ideas and inspiration. The various inspiration collections then formed the basis for the visual language. After two iterations, the project team agreed on a visual language and used it to create the prototype.

In order to test the resulting prototype, the third usability test was carried out with 5 users (2 non-registered users, 3 registered users). The following scenarios were tested: collect information, become a member, become a food saver and register for collection. After the usability test, the semantic differential was also presented to the user. The Semantic Differential is a simple method to test visual impression. The experience attributes, and their opposite terms, were set up on a scale from 1 to 7 and the users then spontaneously decide how they feel about the design. Using the semantic differential, the project team was able to compare the users' perception with the goal of foodsharing team and their vision on how they want to be percieved.

After the usability test, several adjustments were made according to the issues detected.

The last step was to present the prototype to the client and to hand over the findings of the project to the client team.

The project team did a great job and helped the IT team to detect the biggest issues and to improve the usability of the plattform to make it more accessable and coherent with our goals.

‍