Business context
Suncorp Bank's frontline teams—branches and call centres—handle a high volume of customer requests, often guiding customers through tasks step by step in real time (e.g., lost or stolen cards, transaction disputes…). Beyond live support, teams need onboarding and refresher training across features and products, while process, advisory, risk, and compliance teams require material for discovery and audit.
Meeting these needs depends on an up-to-date, accurate visual reference. But equipping all staff with test devices is impractical, and maintaining them is costly. Meanwhile, inconsistent or dated references risk degrading call quality, QA standards, and overall frontline effectiveness.
Goals
- Enable frontline staff to guide customers and troubleshoot tasks in real time
- Support onboarding and refresher training across teams
- Inform discovery and audit for new features and updates
Success metrics
- Reduce Average Handle Time (AHT)
- Increase First Call Resolution (FCR)
- Increase Net Promoter Score (NPS)
Results
The tool has ~ 5 digits of visit monthly. This number is close to the digital avail tasks from all queues, reflecting the usage rate.
- Decrease AHT by XX%
- Increase FCR by XXX%
- Positive impact on NPS
- Average satisfaction rating of the tool 4.6/5
Solutions
Design libraries
Applying atomic design principles, I manage the design libraries end to end—from functions and components to sections and full screens. The master screens give the team a single source of truth to reference, and also lay the groundwork for setting up the app demo tool.
Within the design team, we run a contribution model: members can submit any in-flight update, which is merged once reviewed.
Scale to the App Demo Tool
Since the master screens and flows are properly maintained, the app demo tool can pull them in as instance components. Any future update to the libraries then flows through to the tool automatically.
Approach
Research
Along with channel owners, we conducted user research to Call centre, branches and other team.
| Target users’ key characteristics | Preferences | |
|---|---|---|
| 1 | They use Windows laptops | Easy to access securely |
| 2 | Not highly tech savvy, relying on simple, intuitive tools | Easy to use. Clear instruction. |
| 3 | Support customers in real time over the phone or in person, often under pressure to complete tasks quickly and accurately | 1. Easy to navigate to different tasks. 2. Support step by step guidance. 3. Simple explanation or tips for complex steps or exceptions 4. Simple index for flow switching |
| 4 | Experience increased pressure from changes (eg, during maintenance or new features rollout) | Inform the teams in preparation for upcoming changes |
Feasibility
After evaluating the tooling options, we chose Figma for its low cost, fast setup, and ease of scaling and maintenance.
| Test device | Website | Figma | |
|---|---|---|---|
| Cost | High | High | Low |
| Production Time | High | High | Mid |
| Maintenance | High | High | Low |
| Learning | Low | High | Low |
| Onboarding | Mid | Low | Low |
Use cases priority
We collected the top use cases from different teams and categorised them by
- platforms
- call volume
- reason for contact
To align with our success metrics, we prioritised the highest-volume features for the MVP first—such as lost and stolen cards, transaction disputes, and password resets. These analysis also shaped how we structured the content menu, keeping navigation simple and intuitive.
Usability testing & Iterations
| Iterations | Design | Participants | Feedback |
|---|---|---|---|
| 1st | 1. Used the Figma canvas to display all flows, with pages structured by feature. 2. Added a "How to Use" guide to walk users through Figma. | 10 participants from different teams tested a lo-fi version. | 1. Despite the instructions, users found the learning curve steep—navigating screens on their laptop was hard, especially mid-call 2. Switching between flows was difficult. |
| 2nd | Based on the 1st iteration, I simplified the instructions and condensed the canvas view to reduce scrolling. | A call centre team of 8 tested the 2nd iteration twice over 2 months. | 1. Staff worried they'd disrupt the screens on Figma, even in view mode. 2. The Figma canvas interface felt complex to them. |
| 3rd | 1. Replaced the Figma canvas with a Figma prototype. 2. Users navigate flows via a preset content menu and arrow buttons—no dragging or scrolling required. | A branch team of 8 tested the 3rd iteration twice over 2 months. | 1. Users found it easy to navigate—"like playing an arcade game." 2. It felt similar to their compliance modules training, giving them more confidence to use it. |
Feedback mechanism
- At the polite stage, we set up bi-monthly checkin with the teams to collect feedback
- We also set up a Feedback Form attached to the tool, covering
- Satisfaction rating
- Feedback collection
- Feature request
