Investing Hub Learn Tab — CommBank Everyday Investing

Context

The Learn Tab within CommBank's Investing Hub provides modular educational content to help new and novice investors build confidence — covering foundations like why and what to invest in, how much to get started, and key investing terms. The tab was built on Honeycomb (HC), an older design system being deprecated by FY27, creating a growing inconsistency with the newly uplifted Portfolio and Explore tabs already running on Lumen.

Deliverables

• Native iOS Learn Tab uplift from Honeycomb to Lumen design system
• Design exploration across multiple approaches (concept, middle ground, like-for-like)
• Final design specs and handover documentation for development

Problem space

A large number of customers signing up to Investing weren't making a first trade — financial literacy was identified as a key barrier. The Learn Tab existed to address this, but its outdated Honeycomb components made it visually inconsistent with the rest of the Investing Hub and limited its ability to evolve. With HC sunsetting, the team had a free opportunity to uplift Learn Tab to Lumen — but the scope was constrained by timeline, resource availability, and the fact that Learn Tab wasn't a strategic priority for FY26.

My role & design process

As the lead UI designer on this project, I owned the design direction from audit through to final specs and handover. My contributions:

• Audited the current Learn Tab experience and identified UX issues — including repetitive horizontal carousels, excessive tile density impacting content discoverability, and outdated component patterns
• Developed multiple design directions: a concept (north star redesign with list views and progressive disclosure), a middle ground (breaks the repetitive carousel pattern without requiring new Lumen components), and a like-for-like (straight swap using new CBA design system components)
• Recommended the middle ground approach as the best balance of UX improvement and implementation effort — it solved the carousel overload problem while reusing existing components
• Presented the design options across several internal design forums at CBA, gathering feedback from fellow designers and validating the approach with design leads
• Presented to product and business stakeholders, walking through documented pros and cons for each direction to support an informed decision
• Delivered final specs after the team decided to proceed with the like-for-like approach due to timeline and engineering constraints

Outcomes & results

The like-for-like option was implemented, successfully migrating the Learn Tab from Honeycomb to Lumen and unifying the visual experience across all Investing Hub tabs. While the middle ground approach I recommended would have better addressed content discoverability issues flagged in the scorecard, the like-for-like delivered on the core objective: ensuring design system consistency before HC deprecation, with accessibility compliance confirmed.

Key design outcomes:

• Learn Tab migrated to Lumen, achieving visual consistency with Portfolio and Explore tabs
• WCAG 2.2 AA accessibility compliance confirmed
• CarouselControl component introduced, improving navigation for accessibility users

Confidentiality note

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.