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
Solutions
Impact
The uniform and clear design enables users to use the applications more intuitively and reduces the cognitive load.
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
