We helped ASIC build a design system foundation to increase UX consistency and developer efficiency.
Thinkmill joined ASIC on the journey to improve consistency and usability across their interfaces by designing and delivering a framework-agnostic design system to shape the future of their digital product range.
Services provided
Highlights
- Crafted a design system foundation that can be utilised across ASIC internal and external products, with a focus on UX, DX, and accessibility
- Accommodated ASIC’s diverse technological needs across teams
- Reviewed and consolidated existing ASIC style guides into a single cohesive design language
- Delivered a design system documentation website to showcase the system and provide designers and developers the tools to effectively use and maintain it
- Facilitated an uplift in design team capability through a learn-by-doing training methodology
Overview
We’d been augmenting ASIC’s Human Centred Design team across a range of other initiatives including the redesign of their registry. Throughout the course of several projects, the need for a systematised approach to interface design and development became more prevalent. At ASIC’s suggestion, we embarked on the journey of analysing and distilling their multivariate product interfaces into the foundations of a design system that felt at home in the ASIC brand and was capable of bolstering their operational and user-facing requirements. The fruits of our collaboration yielded: ASIC’s first design language, a library of 28+ components designed in Figma and built in HTML/CSS, a comprehensive docs site, and a series of prototype layouts founded on our earlier work redesigning registry.
A subsequent engagement sees us working directly with the design team to improve UX on their products and level up their ways of working in design systems.
Twenty eight components. One source-of-truth.
To support ASIC’s need for an extensible and composable UI foundation, we identified, designed, and built a suite of 28+ core components, including fundamentals such as buttons and forms, as well as higher-level navigation patterns requiring interactivity. Components were provided in both a Figma UI kit and HTML/CSS formats, with colour, dimension, motion, and typography tokens available across both. We bolstered component support with a range of supplementary CSS classes to help developers craft layouts, meet accessibility best practice, and integrate with one of ASIC’s primary development platforms – OutSystems.
Comprehensive documentation
With a comprehensive token architecture and component list in hand, we shifted our efforts to documentation. In addition to 26 pages of component anatomy, the ASIC DS docs site provides a comprehensive reference on design and development best practice from first principles through to functional UI, with guides, accessibility instructions, and system maintenance recommendations.
Elevating design teams through delivery
While delivering ASIC design system we’ve helped to broaden and deepen ASIC’s internal design capabilities wherever possible. Over a period of 2 years we worked with leadership to identify and implement a range of training approaches including documenting guidelines for accessibility best practices, remote training sessions, and facilitation of weekly design system guild workshops. These efforts have improved the quality and quantity of the design team’s output, increasing confidence and autonomy in their day-to-day operations.
Related case studies
We helped ASIC redesign their Registry Services website with a focus on usability and scalability.
We helped an Australian Government department build a Design System to support their digital transformation goals.
We helped ELMO build an award-winning design system to increase UX consistency and developer efficiency.
We’d love to work with you