About
The KWS UI Design System was developed for efficient scaling and general user interface optimization of the KWS FieldExplorer mobile apps. It contributes to the further development of internal design processes and better collaboration between designers, developers and product owners.
KWS Saat SE & Co. KGaA is an internationally operating company that specializes in breeding plants and seed. The company conducts research and development, production and distribution of seed in more than 70 countries worldwide.
In doing so, KWS Saat focuses on sustainability, innovation and close cooperation with farmers to ensure a secure and sustainable food supply for the world's steadily growing population. To deliver the best quality, the seeds are precisely tailored to customers' needs and requirements through research and breeding programs.
KWS FieldExplorer is the digital solution for field planning and general management and documentation of field activities. Supported by mobile apps and hardware, data is collected, analyzed and visualized to digitize breeding and seed production activities. With the FieldExplorer mobile apps, users are able to record and manage field activities in real time.
Challenges
The FEX mobile apps are progressive web apps and are increasingly used by users on tablets and sometimes notebooks. The mobile-first design of the apps was not designed for such large viewports, resulting in unfavorable layouts in which information and UI elements are difficult to keep track of.
Furthermore, similar content was 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 was 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.
Goals
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
Solutions
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)
Impact
The uniform and clear design enables users to use the applications more intuitively and reduces the cognitive load.
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
Documentation
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.
Figma library
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.
Other Works
