Design
As an international and inclusive project, Open Food Facts needs to share a clear design for all its current and future users.
This current page aims to list main needs and constraints, and document our current design and UX efforts.
What it is
The Open Food Facts Design Team is a group of volunteer contributors who focus on the user experience (UX) and user interface (UI) of all Open Food Facts projects. This includes the main website, the mobile applications (for iOS and Android), and other tools and platforms developed by the community. The team is responsible for creating a cohesive, accessible, and user-friendly experience for a global audience. They work on everything from graphic design and branding to interaction design and user research.
Design discussions and work are coordinated through the openfoodfacts/openfoodfacts-design GitHub repository, as well as the dedicated #design channel on the Open Food Facts Slack.
Why it matters
Design is crucial for Open Food Facts' mission to make food data more transparent and accessible to everyone. A good user experience makes it easier for people to find the information they need to make informed food choices. It also lowers the barrier for new contributors to add products to the database, which is the lifeblood of the project.
Key principles of the design team include:
- Clarity: Making complex nutritional and environmental information easy to understand at a glance.
- Accessibility: Ensuring that the platform is usable by people with disabilities and on a wide range of devices.
- Consistency: Creating a unified and recognizable look and feel across all Open Food Facts properties.
- Collaboration: Working openly with the community to gather feedback and ideas.
Recent achievements
- Development of a new, more intuitive user interface for the Open Food Facts mobile app.
- Creation of a nascent design system to ensure visual consistency across all platforms.
- Adding illustrations for many of the parts of the project
Work in Progress
- openfoodfacts-explorer: A complete redesign of the Open Food Facts web front-end. This is a major project to create a modern, responsive, and feature-rich user experience.
- smooth-app: Ongoing improvements to the new Flutter-based mobile application.
- Design System: Continuing to build and document the Open Food Facts design system with more reusable components.
Coming next
The future direction of the design team's work is closely tied to the overall roadmap of Open Food Facts. Key areas of focus will be:
- Feature Parity and Replacement of the Legacy Frontend: A major goal is to bring the new `openfoodfacts-explorer` to feature parity with the existing website, with the eventual aim of replacing it. This will involve significant design and UX work to ensure a smooth transition.
- Enhanced Image and Data Input: Improving the user flows for image uploading and editing, as well as the overall product addition process.
- Support for New Features: Integrating design support for new initiatives such as Open Prices, Search-A-Licious, and Nutri-Patrol.
- Integration of new features into the mobile app, such as advanced search and personalized product comparisons.
- Further development of the design system to cover all Open Food Facts projects.
- More user research and testing to gather feedback and inform future design decisions.
Meet the team
You can connect with the design team and other contributors on the Open Food Facts Slack channel #design. The design discussions and work are coordinated on the openfoodfacts-design GitHub repository.
How to help
If you are interested in joining the team, the best way to get started is to:
- Open Food Facts does need design work and design skills.
- Explore the openfoodfacts/openfoodfacts-design GitHub repository and the issues labeled "design".
- We have started a CONTRIBUTING.md file @ openfoodfacts-design
- Design discussion takes place in the "#design" channel of our Slack space , in our GitHub dedicated to design (https://github.com/openfoodfacts/openfoodfacts-design) and in the various issues/slack channels related to specific projects.
- Join the #design channel on the Open Food Facts Slack.
- Introduce yourself and your interests to the community.
General
- structure the Design and UXR teams
- document current design state (see below)
- identify issues (coherence, accessibility, ...), and report it on Github
- check for our existing issues
Server
- as a first step, better explain our goals
- TL;DR: 80% of our traffic is mobile web, yet our website is poorly optimized for mobile. We don't really have frontend developpers for the web, and we're investing in openfoodfacts-explorer, with modern techniques, and more independance from the monolith. openfoodfacts-explorer does not have a design direction right now, we are jazzing on the classic website and the mobile app.
Mobile app
- TL;DR: The mobile team is regularly doings mocks and implementing them. Some innovation and deviation from the mockups is happening. We've done several rounds of UXR interviews in the past (most recent 2 years ago)
Open Food Facts explorer (next Gen Web Frontend)
- TL;DR: We're trying to copy the best of classic frontend for lack of bandwidth to do mockups in advance. Loads of engineering bandwidth at the moment.
Other
- Search-A-Licious (P1): TL;DR: important, not launched yet, coherence with the web and mobile could be great. Interesting challenge if you like search projects. https://search.openfoodfacts.org/
- Taxonomy Editor (low priority)
- Hunger Games: TL;DR: the UI needs to be more consistent with the website, and also more efficient on mobile and web (it's a mass annotation system, people want to annotate as fast and as safely as possible)
Bringing visual coherence to our secondary tools
- Wiki (Mediawiki template), Forum (Discourse template), Blog (Wordpress template)
Our design files
- Our design files are on Figma and Sketch. While we have many files and components, we use only a couple of them on a weekly basis: mobile, and sometimes web. Many of those files are outdated, and we lack digital twins for many of our key project. Our "design system" only has a couple of UI components (we have many more for things like scores, icons, illustrationsā¦)
- Design files on openfoodfacts-design

- If you'd like a complete tour of our assets + access to Figma, please ask in #design.
- Since Figma is a paid for system, please use the free tier, and duplicate our files in your personal account. We can reintegrate your changes to the main file.
- If you're regularly volunteering in design, we'll be happy to pay you a paid seat.
- We also have a Canva account, but this is limited to marketing/communication/blog & social assets.
Needs and constraints
Open Food Facts design have to address the following needs and constraints:
- international: Open Food Facts is an international project and its design should be readable and understandable in any kind countries or cultures
- highly readable: Open Food Facts is a project which promotes food transparency and aims to share knowledge; its design should make contents easy to read and understand
- inclusive and accessible: we care about every kind of users with every kind of technologies or disabilities
- opened to every kind of usages and users: Open Food Facts is not only talking to the general public but also to professionals such as scientists, policymakers, expert, journalists, food producers, etc.
- Open Food Facts doesn't provide recommendations but tries to enlighten users about product facts; its design shouldn't add subjective meanings unless it is based on facts and science (e.g. red colour used to share a factual information)
Current design state
Open Food Facts is currently using informal rules to support these needs and constraints.
Graphic Charter
- Graphic charter
- More details at https://quentinlagrange.com/projets/open-food-facts
Fonts (outdated)
- The default fonts have changed ! For canonical fonts to use, please see Graphic charter. Feel free to port documentation here.
- https://fonts.google.com/specimen/Plus+Jakarta+Sans is the main font
Old font system
Open Food Facts is using easy to read fonts: for their main contents, most Open Food Facts websites(*) use the following font directives: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
- issues:
- "Helvetica Neue" and Helvetica are not installed on some operating systems such as Linux (and ?); some users have said Helvetica is not the best
- Roboto is not installed natively on the main operating systems (MacOS, Windows, Linux); it should be downloaded by a CSS directive but it's not
- TODO:
- compare with other website such as Wikipedia, OpenStreetMap or other projects
- use Arial which is widely used?
- use CSS directive to download the main font (drawback: impacts on performance)
- what about non-Latin alphabets?
(*) tip: Font Finder, a Firefox extension, is an easy-to-use font inspector to get the current font of the selected element.
Open Food Facts logo
- Please see Graphic charter. Feel free to port documentation here.
Open Food Facts palette
- Please see Graphic charter. Feel free to port documentation here.
Open Food Facts illustration policy
- Please see Graphic charter. Feel free to port documentation here.
You might also be interested by
Resources and inspirations
- What happens when you prioritize consistency over clarity.
- Defining Principles to Drive Design Decisions
- How to maximize the impact of content design (see slide 46)
- Design for Coherence, not Consistency
Get in touch
|
|---|