UI/UX for GREENZERO
Sustainability meets Design
The Project
The GREENZERO GmbH specializes in the preparation of life cycle assessments for companies and their products. GREENZERO was commissioned by a large German retail company to analyze the environmental impact of a large number of hygiene products (Life Cycle Assessment). makandra was brought in as a technical partner and developed customized software to carry out the life cycle assessments.
In terms of design, a special focus was placed on creating a completely new UI/UX design for GREENZERO. The aim was to provide an intuitive and efficient digital platform that not only significantly accelerates the complex process of data collection and evaluation, but also facilitates it with a clear and user-friendly interface.
Key Challenges
- Transforming a wealth of information into a streamlined design
The large number of tables, forms and modals made it challenging to design a clear and intuitive user interface without reducing the information content. - Merging complex workflows from different systems
Previously distributed and inconsistent processes from Excel, LCA databases and other systems had to be transferred to a standardized, logically structured software. - Ensuring a good user experience despite high complexity
Despite the extensive functions and data, the application had to remain user-friendly - a structure tailored to user flows, animated icons and an integrated help center were therefore essential.
It was important to us that the data input was fun, intuitive and that complexity was not always the main focus. Scientific software can also be stylish!
Video Individual software for a smooth user experience
Design Process & Implementation
1. Develop an Understanding
Right from the start, it was important for us to gain a deep understanding of LCAs, the customer, workflows and the vision. To this end, we spoke intensively with GREENZERO and various user groups (LCA consultants, suppliers, clients), analyzed their previous processes and structured the findings in organizational charts, substance collections and user flows.
2. Wireframing & Prototyping
Wireframes are schematic designs of a user interface that visualize layout, navigation and functionality. They serve as an early concept to plan the structure of an application before the design and details are worked out.
Our ideas on structure, navigation and workflows were transferred into wireframes, linked to prototypes and iteratively optimized in close coordination with the customer.
3. Mockups & Moods
The first design draft was created on the basis of the wireframes, based on GREENZERO's corporate identity. These moods formed the basis for the design system and the first UI components.
4. Design System & Screen Designs
The design system defined colors, typography, icons and layouts, from which UI components such as buttons, inputs and tables were created. These components were then integrated into complete screen designs. The design system continued to grow throughout the project, helping to ensure a consistent look and feel and user experience across the entire software.
5. Optimization & Fine-tuning
New challenges arose as the depth of the project increased. The design was continuously optimized, partially discarded or revised. High-fidelity prototypes helped to test complex processes, while customers and users were actively involved in order to improve flows in a targeted manner.
Good UI/UX design requires a real understanding of the topic, the workflows and the customer's vision. By working closely with the customer and the users of the application, we have developed a solution that works perfectly for everyone.
Our Design Solution for GREENZERO
Focus on user-friendliness and intuitive operation
- Intuitive navigation thanks to logical workflows
- Loosening up the application and user guidance with a clear icon language and micro-animations
- Integration of a help center to explain the application to users and make it easier to get started
- Dashboards for a quick overview of tasks depending on the user group
- Graphical evaluation of the balance sheet
Aesthetics despite data-intensive content
- Dark mode with glowing accents additionally supports energy efficiency
- Colorful animated icons
- Use of the interaction color “water” from GREENZERO's basic colors as well as other highlight colors from the company's CI
Accessibility for inclusive use
- Sufficiently high contrast for better readability
- Full keyboard operation to support different usage scenarios
Structured data visualization and process representation
- Structured visualization through tables and diagrams
- Division of multi-stage processes into smaller steps or tabs
- Status displays with icons and colors to make information easy to grasp at a glance
- Increased visual rather than text-based guidance through the application
- Visual elaboration of various process statuses to provide users with important information directly
In this project, we developed our own design system together with makandra. The UI/UX team did a fantastic job there.
Screen designs Insights into the project
For this project, we had the pleasure of working with a long-time companion: Jens Vogel in the role of Product Owner.
Project Scope Our Design Services for GREENZERO
