Prepay Product Refresh

Launching a new Prepay Plus product across app & web with a new design system

Role

Experience Designer

Industry

Product launch

Duration

6+ months

Project overview

A new Prepay Plus product lineup and Salesforce CMS migration created an opportunity to modernise inconsistent app and web experiences, introduce reusable design-system foundations and prove the value of scalable design patterns through a live product launch.

Problem: Existing Prepay app and web experiences were inconsistent, technically constrained and not supported by a shared design system.

Opportunity: Use the Prepay Plus launch and Salesforce CMS migration to improve CX, create cross-platform consistency and establish a design-system foundation for future journeys. We implemented using Flutter for the first time which allowed more versatility in design.

My role: Key designer working on wireframes, interaction patterns, design-system foundations, high-fidelity UI, stakeholder reviews and delivery alignment across complex app/web states.

Impact: The new Prepay Plus lineup and supporting app/web designs launched successfully, creating a more consistent customer experience and demonstrating the value of reusable design-system patterns to the business.

Why this mattered

One NZ was moving its CMS to Salesforce and launching a new Prepay Plus product lineup. This created a rare opportunity to improve more than the surface-level design of the experience.

The launch gave our team a practical way to modernise the Prepay experience, create more consistency across platforms and demonstrate how reusable patterns could make future design work faster.
It also helped show the business why design-system investment matters: clearer standards, better customer experience, reduced duplication and a stronger foundation for scalable delivery.

My role

Wireframing, iteration, high-fidelity UI and design-system contribution. My role was to help turn a complex product and platform change into clearer customer journeys while supporting the wider effort to establish reusable patterns and standards.

I contributed to Prepay Plus app and web UX/UI across multiple product states, used global landscape research and Material 3 principles to inform scalable patterns, and worked with product, delivery, engineering and business stakeholders under tight timelines.
I also created flows and wireframes to communicate complex coexistence states and help advocate for backend changes where visual improvements alone would not solve customer pain points.

Approach

Using the product launch to prove the value of a design system

The Prepay Plus launch became a practical way to prove the value of a design system. Rather than treating the system as a separate exercise, I built patterns through real journeys, real states and real constraints, prioritising components required for these journeys. As more components and flows were created, the design process became more fluid and the value of reusable patterns became easier for stakeholders to see.

Designing for consistency across app and web

Existing app and web experiences lacked consistency, which created friction for customers and inefficiency for teams. The move toward Flutter gave us an opportunity to create a more unified front-end experience across mobile and web.
The challenge was not just making screens look consistent; I had to consider how product states, content, navigation, validation, account conditions and platform behaviours would work cohesively.

Working through complex coexistence states

Because the wider platform migration involved a new Salesforce CMS alongside Flutter and existing React and Angular experiences, not every state could move cleanly at once. I had to design for coexistence: customers moving between old and new systems, different product states, and technical limitations that affected the ideal journey. Wireframes became critical for aligning designers, developers and stakeholders around why some backend changes were necessary.

Collaborating under delivery pressure

The project moved under intense time pressure, with changing business decisions, shifting requirements and multiple teams working in parallel. I used an agile approach with frequent design reviews and stakeholder feedback loops to keep momentum while continuing to protect customer experience and design quality. Trade-offs were constant, but the focus remained on moving the experience in the right direction and creating foundations that could continue to evolve beyond launch.

Key design decisions

Build the design system through real journeys

Instead of designing components in isolation, I used Prepay Plus journeys to stress-test patterns across realistic states and scenarios. This helped ensure the design system was grounded in actual customer and business needs.

Use Material 3 as a practical foundation

Google’s Material 3 Design System provided a strong base for interaction patterns, spacing, components and mobile-first behaviours. I used it as a foundation while adapting patterns to One NZ’s brand guidelines, product rules and customer experience needs.

Push beyond visual polish

Some existing pain points were caused by technical and backend limitations, not just UI presentation. I used flows and wireframes to demonstrate where backend changes were needed to create a meaningfully better customer experience. I had to demonstrate that sometimes the experience would be degraded vs current state if we did not tackle technical constraints.

Design for coexistence, not perfection

The transition required old and new systems to coexist. This meant designing pragmatic states and compromises while keeping the longer-term experience direction clear.

Align parallel design-system work

Another product and design system was being developed in parallel, so consistency between systems was critical. We worked to ensure customers would experience a more coherent journey even as different parts of the platform evolved.

Impact

Launched the new Prepay Plus lineup across in early 2026.
Delivered new suite of app and web designs that created a vastly improved and consistent CX.
Established reusable design-system patterns through a real product launch, making future flows faster to design and easier to align.
Helped demonstrate the value of Salesforce CMS, Flutter and systematic design investment to senior stakeholders.
Used flows and wireframes to support technical alignment and advocate for backend changes that improved the CX, not just the interface.
Created a stronger foundation for future Prepay journeys, design-system maturity and scalable digital delivery.

Learnings

Design systems gain business buy-in when they are proven through live product delivery, not presented as abstract libraries.
Cross-platform consistency requires technical alignment as much as UI alignment.
Cutover and co-existence states are tricky to handle technically and some design compromise may have to be conceded
Design flows are powerful tools for influencing technical decisions, especially when backend changes are difficult but necessary.
Large transformation projects require constant trade-offs, but a clear design direction helps teams make pragmatic decisions without losing sight of the customer experience.

Design systems · App design · Web UX · Cross-platform design · Salesforce CMS · Product launch