Accessibility uplift and design system rebuild for Qkr!
Project Info
Qkr! is a school payments platform by Mastercard, distributed in partnership with CommBank across mobile app and web experiences. The engagement began as a CommBank-aligned visual reskin and accessibility uplift of the existing product.
During the initial review, I found there was no reusable design foundation to update. This changed the work from a palette-led reskin into a full system rebuild, allowing accessibility to be addressed consistently across the product rather than applied screen by screen.
As the sole product designer, I led the design-system rebuild across iOS, Android and responsive web, working with stakeholders across Qkr!, Mastercard and CommBank, including product, technical and accessibility teams. I also initiated early research into user feedback and journey friction to help define a potential future UX phase.
Project Scale
From reskin to system rebuild
The original brief assumed the accessibility uplift would largely involve changing colours and styling. My review showed that, without source design files, a reusable component library or a documented design system, isolated visual changes would not deliver a consistent uplift across the product. I raised this constraint with Qkr! stakeholders and recommended rebuilding the foundations first.
CommBank wanted Qkr! to feel like part of its wider product family, rather than simply adopt a new palette. I developed a lighter visual direction using off-white surfaces and yellow accents, then carried it through typography, spacing, borders, component states and interaction patterns. I designed the system around WCAG 2.2 requirements from the outset.
The new system created a consistent foundation for the accessibility uplift across app and web. I also began reviewing user feedback and journey friction to identify opportunities for future improvement, but the broader UX redesign phase has not yet started.
Focus Areas
Product design, UX/UI design, accessibility, WCAG 2.2, mobile-first design systems, design tokens, reusable UI patterns, mobile app design, responsive web design, interaction design, early-stage UX research, stakeholder alignment, design documentation and development handover.
Confidentiality
This project is ongoing, so this case study shares a high-level overview only. Detailed artefacts and project specifics aren't shared publicly. Get in touch to discuss.
