TuGo Design System
TuGo needed a source of truth for interface patterns to streamline design and development.
TuGo is an insurance company that has multiple platforms to sell products, extract reports and manage content. They all need to be visually unified.
The Design System was treated as any other product, and had a research stage to understand developers' expectations and current practices when creating front-end code. Recreating components into one centralized file also gave us an opportunity to update visuals and add more personality to the interface. The final result included documentation on design principles, grids, spacing, responsive behaviour, iconography and components in general. All this information is available on:
• 1 website
• 1 library on Adobe XD
• 1 project on Zeplin
Although those resources are available to everyone on the team, it has always been important to engage and encourage developers to refer to the design system when necessary. We continue talking constantly to them to improve our processes, components and hand off.
UX/UI designer
Conduct visual audit
Plan and run a survey with developers
Plan and conduct a card sorting exercise with developers
Build components
Map and document rules and use cases
Build design system website
- 01.
DISCOVERY,A visual audit revealed the state of the interface. A survey and card sorting showed us how the developers used components.
- 02.
BUILD.Components and other elements were grouped based on the survey results. Updated versions of them were created in Adobe XD.
- 03.
TEST & ITERATE-With the components ready, it was time to test if they were flexible enough to be used on screens across all platforms.
- 04.
ENGAGE DEVELOPERS.Finally, we held a Lunch & Learn with developers to present our work. We continue talking to them to improve collaboration.
