KWS UI Design System

The FEX mobile apps are progressive web apps and are being used increasingly by users on tablets, sometimes on notebooks. The mobile-first design of the apps is not designed for such large viewports, which leads to unfavorable layouts in which information and UI elements are difficult to keep track of.

Furthermore, similar content is sometimes presented in inconsistently designed layouts and UI elements are not used consistently, which leads to an impairment of intuitive use and increased maintenance effort.

In addition, there is a high level of customer support in day-to-day business as well as through trainings that are necessary to introduce new users to the applications in order to demonstrate the use of the app as well as all functions.

• Reduction of customer support by increasing the intuitiveness of the application
• Systematization of the design for efficient and coherent further development of the apps
• UI optimizations for efficient scaling
• Optimization of internal design processes for more efficient collaboration among internal stakeholders and increase in product quality

• Unified usage of UI elements and styles
• Development of responsive patterns and template pages
• Establishment of screen regions for coherent structuring of content across pages and applications
• Introduction of a fixed-width grid to display content in larger viewports in a readable and clear manner
• Implementation of responsive font to ensure readability across all devices
• Working closely with development to refactor code for a clean base of styles (color palettes, font styles, and spacing classes)

• The cognitive load of users is reduced due to the unified and clear design, which enables a more intuitive use of the apps
• Improved content display significantly enhanced the experience of users who prefer devices with larger viewports
• The design system documentation and guidelines serve as a reference that enables faster decision making and consistent design and rollout of new features
• Onboarding of new employees is more efficient due to the scope and level of detail of the documentation
• Prototyping is significantly accelerated by the component library in Figma
• The level of realism of prototypes has also been increased, resulting in more valuable feedback in user testing and providing a better reference for development

The documentation includes color palettes, font styles, spacing classes, grids, screen regions, and icons, as well as a number of patterns such as lists, full screen selection, and a wizard. It describes how to use components and styles, and shows do's & don'ts. In the creation of the design system as well as in the documentation we worked closely together with the development to avoid differences to the code base or to align them. The documentation provides valuable information for both designers and developers.

For more efficient prototyping and design delivery, a comprehensive library of components has been created in Figma. All components have been developed as realistically as possible, they have realistic properties and styles which allows to change their appearance with a few clicks. The naming of the components, their properties and styles resemble code-based components, which provides useful information to developers when inspecting the designs. Realistic prototyping also allows designs to be effectively tested with users without having to invest development effort.