We have realised the
Geico Design System.
The Geico Design System provides rules and guidelines for the creation of GeicoTaikisha interfaces on all touchpoints.
The Design System can be used for internal and external projects and as a guideline for GeicoTaikisha’s suppliers in procurement.
The result will be the standardisation of the user experience for greater usability of the software solutions adopted by GeicoTaikisha.
We chose atomic design as our methodology to create a well-structured and sustainable design system based on five distinct types of elements of increasing complexity: atoms, molecules, organisms, patterns and pages. The Design System is primarily concerned with user behaviour and interactions. The Design System is not only about style guidelines.
We started the project with the assessment of the existing digital eco-system in order to define the initial perimeter of the Design System, the types of users and the main touchpoints. During this phase, we also defined the concept and basic architecture of the Design System.
During the second phase, following a joint Enhancers\GeicoTaikisha evaluation, we designed the project roadmap for the release of the Design System.
We created all the guidelines for each core element of the design system such as the colors giving them a logical and functional organization, then we defined a typographical scale and a set of guidelines for making the content more accessible to all types of users.
We also provided guidelines on grid and layout, text readability, and elements size such as input fields, empty state, notifications, etc.
The use of a Design System harmonizes all the elements of the digital product by increasing brand recognition and improving the user experience but it also eases the developers workflow. A further advantage of adopting a Design System is therefore the lower costs associated with the product building.
We designed five different button states according to the actions to be performed at a particular moment in the navigation: enabled, disabled, hover, focus, and pressed. The use of the button element is also extended to improve the user navigation who can use it to switch view by moving from one area of the platform to another.
The Geico Design System was used to define the new J-Detect interfaces. Elements such as buttons and input fields have been designed and organized to make the user experience as smooth as possible.
The color contrast was designed to improve the readability of the elements and establish a hierarchical scale according to the functionality and importance of each element.
The Geico Design System was also used in the Adamos project where we created 3 custom interfaces according to the needs of the users involved: operator, supervisor, and manager.
In this case, the interface was designed for the manager who, through the data visualization area, is able to monitor the machine performance in overview or detailed mode.
ACTIVITIES
What we did.