EAT SMARTER app design system
Ensuring a uniform appearance with a growing product portfolio
When we were commissioned by EAT SMARTER in 2022 to create the UI/UX design for the new app, it was already clear that further digital products would be added or modernized in the future. An overview of all components and an efficient workflow were to be developed for this purpose. The aim was to ensure consistent interaction patterns and uniform design elements across all products.
Development of a cross-product design system
In order to establish a single source of information that can be accessed by designers, developers and customers alike, we have created a shared library using the collaborative design tool Figma. This contains a style guide that includes all design guidelines and elements as well as all UI elements and components.
Expertise used
Hierarchical structure to support overview and scalability
EAT SMARTER's design system is conceived in such a way that it takes into account both existing and future platforms. First, a brand system was defined, which contains the general specifications for all of the brand's products. This primarily includes a style guide with all colors, typography, icons and graphic elements for all applications. It also contains UI components that are used across all products, such as buttons, tags and form fields. With the creation of the app, the design system was extended by the app system, which lies below the brand system in the hierarchy. It mainly contains app-specific design elements and UI components, but also takes basic elements from the brand system and adapts them to operation with the touchpad on mobile devices. The design system can be expanded so that further applications can be added in the future. Further sub-areas can be defined within a system. This hierarchical structure ensures the scalability of the design system and provides a clear overview of the basic specifications and the various sub-areas.
Variables for quick adjustment of colors and shapes
For more complex projects like this one, we rely on the use of variables in Figma. Similar to programming, these enable the central management of values such as colors, fonts and dimensions. For example, if a color used in different elements changes, our designers only need to adjust the variable and all corresponding instances are automatically updated. This makes it easier to update and maintain the design and ensure a consistent visual presentation across all elements. Especially for larger systems that require different display modes for the same content, the use of variables is recommended. This can be the case, for example, when implementing light and dark modes. In this way, display variants can also be added in the future without having to rebuild a design, which can save time.
EAT SMARTER GmbH & Co. KG
The EAT SMARTER platform specializes in healthy eating, recipes and nutritional information. It offers a wide range of recipes and nutrition tips tailored to different needs, as well as information on nutritional values and foods. This makes EAT SMARTER a valuable resource for people who want to expand their knowledge of healthy eating and prepare balanced meals.