Redesigning Australia's largest superfund app
Over six years, I grew from contributions designer to lead UI designer, rebuilding the app’s foundations, introducing a design system, and shipping the features that drove a 65% lift in contribution top-ups.
Product Design, Design System, UX Design
2017–2023 | Millipede AKQA
Members engaged more, and trusted the app more
A fragmented app with no system holding it together
In 2017, AustralianSuper was beginning to step into the mobile app space. Members were logging into a desktop browser a few times a year with little reason to engage more often. The brief was clear: build a mobile-first engagement channel that gave members a reason to interact with their super regularly. By 2021, a new challenge had emerged. The app had been built by rotating freelance designers, with no shared system or documentation. When AustralianSuper underwent a full brand redesign, we were left with inconsistent patterns, visual debt across hundreds of screens, and accessibility issues that were failing our own standards.
AustralianSuper app screens as designed in 2017.
What I personally owned
Over six years my role grew from team designer, designing the contributions and super allocation workflow, to primary UI designer.
In 2021, we got word of a whole new brand redesign and we would have to push this design through to the current app. I was directly responsible for the 2021–2023 brand redesign application across to the app.
Diagnosing the entirety of the app revealed incomplete patterns, and inconsistency in visuals and experience flows
Rethinking the app navigation
We saw this as an opportunity to reevaluate the app's development, learn from our past experiences, and kick off a fresh design approach for a major upcoming release which included an improved landing dashboard hub. We took user feedback to heart and identified a few key areas that needed some TLC: accessibility, usability hiccups, and keeping up with the competition. With a solid plan in place, we were ready to tackle these challenges and give the app the refresh it deserved.
Coming up with design principles for the mobile experience
User feedback pointed to three gaps: accessibility, usability, and a dashboard that couldn’t grow with new features. I explored several layouts and recommended a single-column, modular dashboard because:
Easier to tap: older members struggled with the overflowing Quick Contributions carouselEasier to read: one column meant larger tap targets and less frictionEasier to extend: cards could be added or removed as new features launched
The modular approach won, and became the home screen’s navigation hub.
The evolution of the dashboard design
Strategic roll out for new designs over the span of 2 years.
Building structure
Touching up on foundations
I audited every font size, colour and spacing value, then rebuilt them into a small, consistent set of foundations.
- Reduced the palette to four core colour tokens and phased out gradients
- Defined semantic colour rules so new features could be designed consistently
- Refined typography and spacing for faster scanning
Tweaking spacing and color was smooth sailing, but getting typography sizing just right took some serious trial and error due to how the design relied heavily on the font density.
simplified to
accent-80
dusk-80
concrete-60
concrete-00
We executed the following to improve the state of the designs at the time:
- Re-established the foundations of spacing, colours and typography.
- Phased out the older brand elements such as gradients, and limited the colour palette to reduce visual clutter.
- Defined consistent design patterns and ensured digital interactive elements passed WCAG 2 AA standards.
- Enhanced content hierarchy, readability by refining the spacing and typography.
Crafting a language for the use of the colours helped to create a systematic approach for new features and designs.
These intentional tweaks paved the way for clearer content structure, stronger brand expression, and enabled users to scan content more efficiently.
Developing the Super Performance feature
Previously, members could only see their super’s history in static statements. I designed an interactive graph where tapping a bar reveals that period’s fees, insurance and contributions.
It was important to have this be the first thing users see so rather than adding a fifth tab (which would have forced tap targets below minimum size), I placed it in the modular dashboard, keeping it prominent without crowding navigation.
The Super Performance graph was designed to be the first thing users see when they open the app, and was placed in the dashboard to keep it prominent without crowding navigation.
To help build confidence in the data visibility, I mapped user stories (higher contributions, newer members and so on) to show how the feature behaved, which won stakeholder endorsement and doubled as engineering documentation.
Mapping the different instances and user scenarios
One feedback we did implement was making the graph pills wider than the original design. It was found during user-testing, that the tap surface needed to be larger as testers were struggling to tap the pills. This was a quick turnarond and deployed to the final release.
Shipping release 3.7
I made the case to include the completed icon set in the same release as the Super Performance graph, which aligned to a larger marketing moment and a smoother brand rollout. This approach also set up faster design and development for later releases.
