KWS UI Design System

KWS UI Design System

KWS UI Design System

KWS UI Design System

KWS UI Design System

KWS UI Design System

KWS UI Design System

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

A UI Design System for KWS Saat SE & Co. KGaA. My role was Conception and UX/UI Design. The project ran from January 2024 to April 2024.

www.kws.com

Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg

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.

Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field list page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

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

Research

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

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous field detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the field detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous field detail page of the KWS Field Explorer mobile app on tablet
Mockup of the field detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on smartphone
Mockup of the observation detail page of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous observation detail page of the KWS Field Explorer mobile app on tablet
Mockup of the observation detail page of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

Before

[

]

Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on smartphone
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on smartphone
Screenshot of the previous inspection filter interface of the KWS Field Explorer mobile app on tablet
Mockup of the inspection filter interface of the KWS Field Explorer mobile app on tablet

After

After

[

]

Before

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.

Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Screen Regions documentation with visualizations of regions with explanation on how to use.
Screenshot of KWS UI Design System Screen Wizard pattern documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Screen Regions documentation with visualizations of regions with explanation on how to use.
Screenshot of KWS UI Design System Screen Wizard pattern documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Screen Regions documentation with visualizations of regions with explanation on how to use.
Screenshot of KWS UI Design System Screen Wizard pattern documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Screen Regions documentation with visualizations of regions with explanation on how to use.
Screenshot of KWS UI Design System Screen Wizard pattern documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Screen Regions documentation with visualizations of regions with explanation on how to use.
Screenshot of KWS UI Design System Screen Wizard pattern documentation with visualizations and explanation on how to use.
Screenshot of KWS UI Design System Grid documentation with visualizations and explanation on how to use.

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.

Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS card component with instance slot in Figma with the properties
Screenshot of the KWS FAB component in Figmas inspection mode for developers
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS card component with instance slot in Figma with the properties
Screenshot of the KWS FAB component in Figmas inspection mode for developers
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS card component with instance slot in Figma with the properties
Screenshot of the KWS FAB component in Figmas inspection mode for developers
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS card component with instance slot in Figma with the properties
Screenshot of the KWS FAB component in Figmas inspection mode for developers
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS button component in Figma with the properties
Screenshot of the KWS card component with instance slot in Figma with the properties
Screenshot of the KWS FAB component in Figmas inspection mode for developers
Screenshot of the KWS button component in Figma with the properties