DESIGN SYSTEM - DESKTOP APP
Build a consistent design language was essential for sharing to 150 team players across Europe. Based on material design, the developers teams are using internally the design system for coding ScaleUP.
ScaleUP is an internal virtual factory to handle the production line, production schedule, task management, and customer complaints.
We based each design element on material design to keep in mind a unified system combining theory, resources, & tools. And for crafting experiences that synthesizes the classic principles of good design.
We were a team of 5 designers: 1 UX research - 1UX Architect - 3 UI Designer. For sharing our latest library sketch and be always up to date, we worked on Abstract.
One of the major challenges was to arrange all the existing files, keeping the recent design and transferring the PSD files into Sketch. Highlighted the multiple interpretations of the existing design system and the missing foundation. Such as a proper grid, guidelines, text style, and color palette. The only reference was a material design sticker sheet.
To solve the files selection, we ordered the elements/components by using the atomic design approach. Brad Frost took the natural world - the chemical reaction - to establish a method to craft interface design systems.
Atomic elements combine together to form molecules. These molecules can combine further to form complex organisms. Afterward, the organisms are implemented into a layout.
Here is an example of how we designed the toolbar used inside the content canvas like a secondary navigation. As organisms, the toolbar comprises a heading and action icons buttons.
The desktop template contains a permanent app bar in the header and a side navigation menu. The content canvas can have their own secondary toolbars for tabs or secondary actions.
Creating a foundation was essential to provide a consistent set of design and guidelines. These guidelines define as well as the style guide and the user experience.
The style guide comprises the 'atoms' such as typography, color palette, buttons, icon library, card, grid, and shadow styles.
The choice of two humanist sans serif fonts was to facilitate the readability and allow a more natural reading rhythm. This friendly set of typefaces optimizes the user interfaces on a mobile, web browser, and other screen text.
To emphasize the difference between title, subtitle, tabs, button, label, we played with the various font's weight.
To enable a consistent look and feel across the application, we defined a color palette according to the meaning behind the various elements and components.
To increase ux productivity, we used flexible and powerful tools.
Every week we planned a design review to syncing up with the team and prioritize the essential design elements.
To avoid duplicate work and share code reuse, we used the library Sketch and export to Zeplin for the developer team.
The usage of the atoms and how they look like on interaction with the user interface was share when we agreed on each element.
Sketch for designing.
Axure for prototyping.
Abstract for versioning.
Zeplin for sharing design.
Miro for visual collaboration.
Structured design reviews.
Conceptual data modeling.
Encourage reuse pattern.
Document what's already available.
Knowledge sharing and code reuse.
Accessible documentation contains different procedures, dedicated explanations, as well as a criteria list to ensure quality and continued discussion for both designers and developers.
To ensure mistakes in the past such as improper maintenance and prioritization are prevented, we provided rules within a clear reference for every designer and developer and project manager on the team.
By initializing the establishment of the collaborative process, through constant communication between the team, the ScaleUP design language allows team members to strengthen production quality.
The atomic design method allowed us to emphasize the importance of the terminology for each single element.
A design system affects a thousand interactions on the user interface. And it affects also the daily decisions of every team member. This project learned me how to communicate frequently and transparently, the strategic priorities, and updates to the best-suited people as possible.