Investing Hub Learn Tab — CommBank Everyday Investing
CommBank's lessons for new investors sat on a design system being retired. I moved them to the new one: WCAG 2.2 AA, consistent with the rest of the hub.
The problem
Many people who signed up to invest with CommBank never made a first trade, and not understanding investing was a key reason. The Learn tab in the app's Investing Hub exists to fix that: short lessons on why and what to invest in, how much you need to start, and the key terms.
But the Learn tab was built on Honeycomb, an older CommBank design system being retired by the 2027 financial year. The hub's other two tabs, Portfolio and Explore, had already moved to Lumen, the new design system. Left on the old system, the tab where new investors learn was drifting out of step with the rest of the hub, in looks and in accessibility, and it was hard to improve.
A migration that was happening anyway
With Honeycomb being retired, moving the Learn tab to Lumen came at no extra cost. Anything beyond a straight swap had to earn its place.
Limited time and people
Scope was limited by the timeline and by who was available to build it.
Not a priority that year
The Learn tab wasn't a strategic priority for the 2026 financial year.
The result
The Learn tab moved to Lumen, so Portfolio, Explore and Learn now share one design system and one look, ahead of Honeycomb being retired.
Confirmed to meet WCAG 2.2 AA, the standard for accessible digital products.
A new carousel control component that makes the lesson carousels easier to navigate for people with accessibility needs.
The team shipped the like-for-like option. The option I recommended, which would have made lessons easier to find, wasn't chosen — see the trade-off below.
What I did
I was the lead UI designer and owned the design direction from audit through to final specs and handover.
- Audited the tab — the same horizontal carousel repeated down the page, so many tiles that lessons were hard to find, and dated components.
- Designed three options — from a full rethink down to a straight swap, so the business could choose how far to go.
Concept
A north-star redesign: lessons in lists, with detail shown only when it's needed.
Middle ground — my recommendation
Breaks up the repeated carousels without needing new Lumen components. The best balance of a better experience and build effort.
Like-for-like
A straight swap of the old components for new Lumen ones.
- Tested the thinking with other designers — I presented the options in several CommBank design forums, took the feedback and got the approach validated by design leads.
- Laid out the trade-offs for the business — I took product and business stakeholders through documented pros and cons for each option, so they could make an informed call.
- Delivered the option the team chose — the team went with like-for-like because of timeline and engineering constraints. I delivered the final specs and handover documentation for native iOS.
The trade-off
The option I recommended wasn't the one that shipped. The like-for-like still did its core job: one design system across the hub before Honeycomb is retired, with accessibility confirmed.
Findability was the cost
The middle ground would have better fixed the content discoverability issues flagged in the scorecard. A straight swap carries the old layout across.
The case is on record
Because each option's pros and cons were documented and shared with stakeholders, the middle ground can be picked up if the Learn tab becomes a priority.
A note on confidentiality
Due to CBA confidentiality guidelines, I'm unable to share detailed mockups or process artefacts from this project. Selected design exploration artefacts are shown here with sensitive information removed.
