Vision
rona:systems aimed to improve the existing ERP software in terms of UI design and usability. The vision was a style guide that documents all central design guidelines, ensures a consistent, modern appearance, and significantly supports the further development of the application.
Our Contribution
We developed a guide for rona:systems that developers can refer to and use for independent application development. Through an iterative process, detailed concepts for colors, typography, icons, and individual screens were created. The team can implement new features independently – even without external support.
rona:systems is a leading manufacturer of innovative software, dispatching, and telematics solutions for the waste management and recycling industry. Within the EU, rona:systems has approximately 650 customers.
Reduced Color Palette for Greater Clarity
In the previous application, colors had different meanings depending on the area, which appeared more consistent and calm through consolidation. With the new style guide, the color palette was revised and reduced to a few central colors. These are designed for both light and dark modes and ensure a harmonious appearance in both variants.
Targeted Use of Colors
The style guide specifies in detail how colors are used in UI design with the aim of creating visual consistency and improving usability. Colors for text, backgrounds, and borders are clearly defined, sometimes even at the component level. Interaction states such as hover, focus, or disabled are also described in detail. The result is a solid foundation that enables consistent further development and simplifies collaboration within the team.
Compact, Readable Typography
A central requirement was to find a space-saving font that remains readable even at small sizes. Several fonts were compared and tested for their effectiveness in UI design. The final choice was Public Sans, which optimally meets both requirements. Based on this, a type scale was developed that clearly defines font sizes, weights, and spacing.
Scalable Icon Set
Frequently used functions are represented with icons to save space. The goal was to find an icon set that matches the chosen font, offers a wide selection, and is expandable. The decision was made for single-color outline icons from Microsoft Fluent. The icon set includes numerous icons in different variants and sizes, can be easily expanded, and is open source.
Targeted Optimization of Screen Designs
With the new style guide, rona:systems was able to implement many screens independently – consistently and efficiently. For individual views, the team sought feedback. The designs were already strongly aligned with the new style guide but still had potential for improvement. We supported with targeted optimizations, for example, in information structure or user guidance.
»The style guide significantly supports development – we make decisions faster and more consistently now. Fusonic has understood exactly what matters to us.«
