Open Food Facts (OFF) UX Design Case Study
Project Overview
Open Food Facts (OFF) is a non-profit, open source project aiming to increase global food transparency. Its database contains over 2 Mio. foods with information about their ingredients, nutritional value, environmental impact and more. The project is crowd-sourced and relies on thousands of contributors to add and edit product informations. Users can contribute and access information via the OFF website or via the mobile apps. This case study focuses on the iOS app.
Team: Individual Project
Client: UX Bootcamp
Duration: 2 Weeks
My Role: Research, Ideation, Design, Prototyping, Testing
Tools: Miro, Figma, Adobe Illustrator, Lime Survey
The Problem
OFF hasn’t reached its critical mass of contributing users yet and the quality of the data entries strongly varies.
The iOS app is one of three ways how users can contribute to the project, but like in many open source projects, the UX/UI aspects have been neglected. This results in a poor user experience and usability and thus hindering the project to reach its full potential.
Goals
- Create incentives to contribute
The solution should motivate both current and new users to contribute. - Improve overall user experience
The solution should make the app more fun to use and thus turning more first time users into regular and contributing users. - Highlight community aspect
The solution should honour the collaborative effort behind the project and make the community visible.
Constraints
- Maintain open source feel
I wanted the redesign to stay in line with the idea of open source, which meant for me not only using open source resources for design elements (i.e. font, icon) but also staying a bit more “technical” visually. - Create feasible solution
Since the app is developed and maintained by volunteer developers in their free time, I wanted to create a feasible solution. My goal was to develop something which could actually be implemented by the community with low or medium effort.
Research & Analysis
I ran a survey to understand the needs and motivations of the current user base, studied reviews, analysed comments in forums, went through the issues in Github and conducted interviews with 5 potential users to evaluate the System Usability Score (SUS). The average score turned out to be poor with 51 points. This served as a benchmark for the later validation of my solution. Based on the results of my research, I created two personas, one lead user persona and one potential new user persona.
Key Findings
- Editing/adding process too cumbersome
- Product detail page too cluttered
- Crowd-source approach often not clear to new users
- Regional disparities in data quality
- Inconsistencies between iOS & Android
Concepts, Sketching & Wireframes
The previous research provided the base for the definition of the problems and the following ideation phase, where I thought of solutions that would both target the current „lead“ users and potential new users, always having the constraints in mind. Through brainstorming and the formulation of How might we … questions I decided on three solutions that I wanted to develop.
How might we …
- … emphasize the collaborative aspect?
- … encourage more users to become contributing users?
- … incent users to complete the adding and editing process?
- … decrease the regional difference of the product database?
Solution 1
Onboarding
Research has shown that some new users don’t understand the community aspect behind the project, and they don’t know that they help others and the overall project by contributing. They maybe even get annoyed if products are not found. So the onboarding should directly address new users to create an incentive to contribute. It’s also meant to introduce the new challenge feature.
Solution 2
Redesign Adding Process
The adding process, which is also the editing process, is the most essential of the whole app and directly related to the data quality. Research has suggested that most users drop out here during the process because of the poor experience and the poor interface design. They don’t finish entries or don’t even start adding the product.
Solution 3
Challenge Feature
Research has proven that there are big regional differences in the database. While there are already a lot of products from some countries, there are not many in others. Global and local challenges organized by the community should motivate users to contribute as well reduce existing regional disparities.
Visual Design & Prototype
As mentioned earlier, the idea was to preserve the open source spirit which meant using open source resources for the font and icons. The open source feel should also be maintained in order to keep the strong supporter community on board and to stand out from the visually more playful competitor apps. The color scheme originates from the existing logos of several scores which the OFF app is calculating and displaying, like the Nutri-, Eco- and Nova Score.
Please note that due to the project duration of 2 weeks, it was not possible to redesign the OFF logo or create custom icon sets.
The Onboarding
New users shall be informed about the project’s goal and the community aspect. It shall serve as an incentive to contribute as well as introduce the new challenge feature.
The Redesign of the Adding Process
Restructured forms, split up into steps shall improve the experience of adding and editing products. The redesigned process also includes a decluttered product detail page.
The Challenge Feature
The newly introduced challenge feature shall create an incentive to contribute while still being organised by the community. Local challenges shall decrease qualitative disparities between regions.
How does it work?
Users (organisations supporting the project or individual people) can create local challenges. They can invite others to join the challenges, which include leaderboards, and offer optional prizes.
Testing & Validation
I tested 3 flows with 5 participants. They were the same ones who were interviewed for the evaluation of the System Usability Score in the research phase. After having completed all the tests, the participants were asked to rate the system again. The result was an improvement of the SUS to 87 points. Due to the current pandemic, the tests were conducted remotely.
Click here to test the prototypes.
Key Findings
The testing provided important insights on how to further develop the challenge feature and how to improve the adding/editing process even more. It suggested many small UI changes which would have a great impact. But it also made me reflect my own task design. I’ve learned that designing “ideal” user flows possibly bias the test results which is why I would change the adding process flow for the second round of testing.
would actively add products
with the new process
felt motivated
to contribute
can imagine using the
challenge feature
Conclusion
Going through the whole process alone in two weeks was definitely a challenge. I preferred working in a team, because it definitely enriches the outcome. Reflecting processes and approaches together helps to reduce all the blind spots or biases one might have.
What I’ve also learned is that conducting surveys without offering incentives is hard. The turn out rate is quite low, if it’s within a group you don’t have a personal relationship with.
Last but not least I’ve learned about the power of UX writing. It is a crucial factor in the success of a product. Wording can motivate people, make them feel involved and personally addressed, but it can also confuse them. I realised that it’s also a part which I quite enjoy doing.