Design System for a responsive app
Context
In 2021, Lizee has no in-house resources to design the interfaces for the software dedicated to circular warehouse logistics. The first mock-ups have been designed and developed on the basis of the existing front-end framework: Material UI.
Faced with the growing demand for functionality and the need for improved ergonomics and user experience. Lizee decided to revise the app's overall ergonomics in a second version. The first HiFi mock-ups were delivered by an external service provider.
As the number of screens multiplied, it became urgent to build a Design System to guarantee maintenance and unity in the production of HiFi mock-ups.
Aperçu
Typography
Hanken Grotesk, the typeface used for the logo, is the main font. Its different weights enable it to be used for both buttons and body text.
Oswald is used to distinguish numerical data (dates, statistics, etc.).
In order not to be penalized for web performance, only the font digits are loaded. The downloaded file is much lighter.
Couleurs
The primary brand color, midnight blue, is used primarily. A second, light green, is used as a secondary color.
Semantic colors are included to manage the different states. All are available in a range of hues, from bright to dark (50 to 900).
Color contrast complies with WCAG 2.0 AA minimum.
Composants
Some components, such as Modals, Sheets and Boxes, take advantage of Instance swap properties, so that instances are not detached and style consistency is maintained when the Design System is updated.
Result
Since 2022, the Design System has been evolving day by day. It was even updated following a branding change, without a hitch.
After several months of fine-tuning, the first mock-ups are all based on a Figma library. The new features are based on the same components. New functionalities are produced much more quickly.
Chiffres clés
3 Weeks
Average time to produce HiFi mock-ups for a feature.
18 Features
Based on the Design System.
1 Update
Design system following a change of visual identity.
2 Products
Products based directly on the Design System (B2B SaaS, Internal App).
200% In productivity gains.
Production time halved to deliver HiFi mock-ups after implementing the Design System.