Multi-platform design system
A systematic approach to design that helps build cohesive experiences across products, applications and platforms.
I am currently the Lead User Experience designer at Australia’s largest customer owned bank – Great Southern Bank. In June 2021, Great Southern Bank went through a company wide rebrand transformation and digital was a primary focus for vast improvement. The delivery timeframe on this project was extremely short and expectations high, so a strong, versatile design system was essential in delivering a fresh new experiences across web, app, online banking, platforms, systems and third party platforms to ensure a cohesive experience for our customers.
Approach
The web is the default language of design systems right now. Any discussion about design systems is assumed to be talking about the web. Websites are an amazing medium, but it is not the only way our customers interact with our products. As a community I want us to break outside web centric mindset and take a more holistic view to include all the ways we can help deliver experiences to our customers.
Great Southern Bank is made up of a wide variety of platforms and systems, not unlike other companies. Some of the major platforms that needed to be considered for our multi-platform design system include Web, Mobile Banking App (iOS and Android), Online Banking, Home Loan Application flow, Personal Loan Application flow, Credit Card Application flow, Insurance portal and Everyday Banking applications to name a few.
Research
One of the first things we did was research other companies, studied the guidelines laid out by Google, Facebook, Apple, Airbnb, Atlassian and searched for other designers who faced a similar challenge. Some design systems we came across were
- Salesforce Lightning Design System,
- Shopify Polaris,
- Microsoft Fluent,
- Google Material and
- Adobe Spectrum.
We can quickly learn from others so that we know what we can do now, what we won’t do now and what we want to do in the future.
One of the largest tasks I went through was documenting existing elements and capturing all the minor variations of each across our digital products. For example grouping all of the different types of buttons and single-use icons across the website, mobile banking and online banking platforms.
Doing this ensures you haven’t missed anything because we were going through a rebrand at the same time, everything had to have a home on the other side.
Planning
Having completed accessibility training through Vision Australia, our team was well equipped with best practices in inclusive design. Therefore we constantly strive to make our digital products a minimum AA accessibility rating for optimal readability for all and that all starts at the foundation of a design system.
To ensure that your organisation meets the WCAG standard, it must follow the four POUR design principles:
Perceivable: Information and UI components must be presentable to users in ways they can perceive.
Operable: UI components and navigation must be operable.
Understandable: Information and the operation of UI must be understandable.
Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This was a team effort to work out how we want to organise and deliver the design system. From naming of elements (e.g Typography, Colours, Elevation, Spacing, Grids, etc), Sketch layer naming, categorisation of elements and presentation of these elements on artboards within Sketch. Organising the symbols page was important to be able to evolve and maintain a system that is easy to understand when changes needed to occur.
Build
Having completed the current state audit and the team understanding the plan, we dividing up the work and set out to build the design system. With frequent design reviews and collaboration sessions we put things together pretty quickly.
With the design system complete, we started with the website pattern library. These patterns were designed mobile first utilising the design system.
Image blurred intentionally for security & privacy
What's next?
We originally went with Sketch and Abstract as our design tools to build out the Great Southern Bank design system. The reason for this was because they were the existing tools and these were the tools our team was most comfortable with at the time.
Post rebrand and during 2021, Figma has become the clear (in our opinion) all-in-one design tool of choice. Here is one of many write ups I found if you want further convincing if you are in the same position.
Figma gives us new capability to easily create interaction design within the foundations of the design system. From there we can build out conceptual designs, ideas and prototypes that we can test with users. Some other reasons it upgrades our skillset:
Development: Design thinking is easily translated to development teams.
Reduced development debt: Testing prototypes with users before development means we can validate design thinking which means development teams won’t need to build it twice.
Stakeholder approval: Prototypes are easier to use for stakeholders to get a better picture of how a product feels instead of static designs.
🙌 Acknowledgments 🙌
This work could not have been done without the help and support of the incredible Digital Experience (DX) team. Shoutout to Lloyd, Sarah, Marika, Jehan, Francesco, Gosia, Matt, Becs, Leanne and Jen
Other projects
Check out some of the other projects I have worked on below.
A platform for people to book unforgettable travel experiences. Explore the process of how decisions were made on this highly complex Flight Centre product offering.
Opentrons make open source, flexible, user-friendly robots for life scientists. Opentrons robots automate experiments that would otherwise be done by hand, allowing scientists to spend more time pursuing answers to some of the 21st century’s most important questions.
How might we better communicate to our customers and prospective customers that digital payments are safe, secure and easy to use.
Get in touch
If you want to learn more about me or have a chat, please say hi 👋