Increase efficiencies, consistency and overall product satisfaction
An introduction
‘Systems thinking’ in design has been around for decades. However, there’s been a new kid on the block the last five years that is revolutionising businesses: design systems.
Discover how the design system we built for CommSec transformed their design team, business and their bottom line.
Why a design system?
A design system is a common language which everyone in the design and development ecosystem understands. It helps products be produced faster, with more integrity. It saves time and money.
Hot button issues we've noticed with current ways of designing products:
It takes too much time to design and build features/pages
Prototyping is non-existent or time-consuming
Design is inconsistent
You have many developers and not many designers
Things never get built like the way they look
If you fall into any of these categories, then a design system can help you. The design system built by Hello Human for CommSec saved them at least 30% on building features YoY. Scaling that up, they can save millions in developer costs and get to spend that extra 30% where it belongs - on better features.
It’s exactly why we recommend companies have a design system expert involved from the start. Without one, the implementation of a design can be twice, or even three times, as long a process as the design itself.
In a nutshell, a design system can help you:
Build more for less
Scale faster
Be consistent
Think holistically
How does a design system work exactly?
Think of a design system as a bunch of decisions around how everything should look and how it should work. These decisions become guidelines that can span your entire product ecosystem, from web to mobile to even digital marketing materials and offline branding. It’s up to you how in-depth you want to go. There’s no set way to do things; a great design system responds to the needs of your business.
Get Granular
Decisions are granular too - think a style guide on steroids. These decisions should cover your entire experience - that means colour, typography, spacing, sizing etc, even border-radius, animation timings and shadows. Think of them as the core of your design system that can be used to design and build all components. These components are built to be re-usable and usually stored in a library like Storybook.
How did this transform design at Commsec?
We amped up efficiency
A prediction of ~50% increased efficiency in design time is even better than the development time previously mentioned. All components have already been designed and are now easy to reuse. When you need to layout a new page, design an email or build features, you have a wealth of knowledge already predefined to start designing.
It accelerated new features and cut the waste
With everything pre-defined in design, your development environment can be a live reflection of that. Components were now re-usable and more developer-friendly. When we audited CommSec’s experience, we found 27 different versions of the same button. That means one button had been built 27 times! This is a common situation when you have multiple design and scrum teams.
Rapid prototyping became the reality
With pre-defined components, the design team had more time to experiment with customers. CommSec now had a library of pre-designed components, allowing you to layout a page in a matter of minutes. We also built a Sketch that could take in a number of stock codes and generate a prototype of a customer portfolio in seconds, something that would have taken hours previously.
How a design system improved workflow
Handover is slick
When providing designs to developers, already built components can be referenced with handover tools like Zeplin. At CommSec, project delivery meetings were faster as teams didn’t need to provide detailed specs of how elements should look and work.
Designs are stored in Git
At CommSec, many applications like Abstract are not allowed or too lengthy to onboard, so we had to adapt and find a way to version control Sketch files. Previously, design files were manually duplicated in dropbox, which frequently caused file corruptions and lost files. As GitHub was already on the approved vendor list, we were able to implement Kactus, a tool that translates Sketch files into JSON. This allowed CommSec to have version-controlled design files with additional features like branches.
How a design system changed teams
We brought designers and developers closer
At CommSec, we ran a series of workshops to re-imagine ‘the handover’ process. Designers and developers now work more closely together to deliver the outcome with a holistic view, rather than having ‘design blinkers’, where they focus on that one small deliverable without considering the impact to the entire experience. Say goodbye to silos.
It grew more focused testing
As components are pre-defined, pre-designed and built, it freed up the UX team to work on validating components, their interactions and rules. Usability and concept testing were a constant feedback loop used to validate the Design System and its library, iterating when required.
It became a product within a product
For a design system to be a success, it needs a resource to manage the backlog, versions and governance. CommSec executives were very supportive of the Design System by merging two scrum teams to form a centralised design system team. This team was responsible for the creation, iteration, definition and distribution of the design system.
The wrap up: a new phase of agility
Design Systems will give you a strong return on investment, particularly in the long term. Implemented correctly, you’ll get a huge increase in efficiency and even cross-discipline collaboration. The Design System Hello Human produced for CommSec has allowed them to enter an agile phase of the business, by experimenting rapidly and conducting a site-wide refresh over the next three years.
