KWS UI Design System
Project Type
UI Design System
Timeline
January 2023 – April 2023
Description
Presentation and illustration of the use cases and results of the research projects/applications DAIMON and ERPAD.
Client
KWS Saat SE & Co. KGaA
My Role
Conception
Execution
Timeline
August 2021
Description
Presentation and illustration of the use cases and results of the research projects/applications DAIMON and ERPAD.
My Role
Creative Direction
Design Management
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.
.
Field list, field details with block list (after)
Challenges
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.
.
Field block details, creation of an observation (before)
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 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
.
Observation details (after/before)
.
Field details with block list (after/before)
.
Filter (after/before)
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.
.
Grid documentation
.
Screen regions documentation
.
Wizard pattern
Component library in Figma
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.
.
Button component in Figma
.
Card component with instance slot in Figma
.
Figma inspection tool