Native app design system
Empower businesses to efficiently interact with the NSW Government through a personalised, accessible and secure mobile app on the go.
Overview
The Service NSW Business App began as a tool for businesses to redeem QR code-based vouchers.
Over time, emerging customer and organisational opportunities have driven us to exploring a more comprehensive app to streamline services and improve government interactions
During discovery, we uncovered core user needs and quick-win features that shaped the MVP.
Overview
While designing the Service NSW Business App, we identified the need for a dedicated design system to ensure a consistent and seamless native experience. Since the Government Experience Library (GEL) was web-focused, I collaborated with our principal designer to co-create the app's first design system, aligning with GEL’s principles and branding while tailoring it for a native mobile environment.
Goal
Our goal was to establish a design system that enabled designers to work efficiently and consistently while adhering to GEL standards, branding guidelines, and best practices for mobile usability.
My Role
As the senior designer, I collaborated closely with the principal designer.
I was responsible for
- conducting industry research,
- designing custom components, illustrations and animations,
- usability testing
- leading walkthroughs with our cross-functional team.
Approach
Identifying GEL Assets for Quick Adoption
We didn’t need to start from scratch, as GEL provided a few foundational assets easily adaptable for mobile with minimal adjustments, including:
- Branding Elements: Colours, typography, and logos.
- Spacing Guidelines: Standard spacing to maintain consistency.
- Core UI Components: Icons, buttons, and form fields that translated well to a mobile context.
Creating Unique Components for the App
To meet the unique needs of mobile users and the app’s evolving design, we identified and developed a range of custom components. I also created a set of illustrations and animations to add a touch of delight, enhancing overall user engagement.
Steps Taken to Create Components
1. Research
I conducted extensive research to inform our component designs, drawing from:
- Our GEL design principles
- Apple’s Human Interface Guidelines & Google’s Material Design principles.
- Successful native apps to understand user expectations and industry trends.
2. Atomic Design
We used atomic design to build a scalable system, breaking interfaces into fundamental building blocks — atoms, molecules, organisms, templates, and pages.
3. Design walkthrough with cross-functional team
I led walkthroughs with the engineers, explaining the design rationale and interaction patterns while gathering input for ongoing improvements.
4. Usability and Accessibility Testing
We incorporated new components into usability testing sessions to validate functionality and gather feedback, enabling iterative refinement. We also conducted accessibility testing on the key components to ensure inclusivity.
Outcome
The resulting design system created a consistent, scalable foundation for the Business App, enabling faster design iterations and significantly improving the design consistency. It supported the initial MVP while providing a flexible framework for future app updates.
Design system migration
Shortly after the MVP launch, the organisational design team introduced a mobile-specific design system under the updated GEL. As a result I took the lead in facilitating the design system migration.
Reflection and learning
Creating my first design system highlighted the importance of meticulous documentation, particularly in aligning naming conventions with engineers. Overlooking this led to inconsistencies in component naming between design files and code. Moving forward, I’ll prioritise early discussions with developers to establish shared standards for smoother collaboration and maintenance.
I also recognised the need for ongoing, rigorous accessibility testing integrated throughout both the design and engineering phases.
Exploring opportunities to expand product offerings.
Overview
The Service NSW Business App began as a tool for businesses to redeem QR code-based vouchers.
As the user base grew, we identified a gap between its limited offerings and the broader needs of the voucher customers. Additionally, non-voucher business customers presented an untapped opportunity to explore how the app could address their needs.
This prompted us to explore how a more comprehensive app could streamline services and enhance business interactions with the government.
Opportunities
Customer Perspective
- Address businesses' unmet and evolving needs beyond voucher redemption
Organisational Perspective
- Leverage the app to drive adoption of existing products, securing future funding.
- Enable partner agencies to integrate our app for new initiatives and services, further boosting funding potential.
Goal
Explore opportunities to expand product offerings and develop the MVP for a comprehensive Business App, with the long-term goal of making it the primary digital channel for businesses to engage with the NSW Government.
Research and Insights
We employed diverse research methods—qualitative & quantitative, primary & secondary, to address both business viability and customer desirability.
1. Engaging with Stakeholders
First, the squad aimed to leverage existing insights from the broader business team about our customers and align on business goals.
So we interviews our product squads and leaders within the Service NSW Business portfolio.
1. Engaging with Stakeholders
First, the squad aimed to leverage existing insights from the broader business team about our customers and align on business goals. So we interviews all squads and team leaders.
Key learning goals
- Define success criteria for the app from the team's perspective.
- Identify immediate and future customer needs in a business app.
Key insights
- Successful Criteria
- Maintain parity and continuity across web and mobile
- Design and content should be mobile-specific
- Immediate & Future Needs
- Help businesses manage compliance, receive support, and stay updated on COVID regulations
- Provide access to support channels
- Act as a digital wallet for licenses and assets
- Highlight potential opportunities and rebates
Key learning goals
- Define success criteria for the app from the team's perspective.
- Identify immediate and future customer needs in a business app.
Key insights
- Successful Criteria
- Maintain parity and continuity across web and mobile
- Design and content should be mobile-specific
- Immediate & Future Needs
- Help businesses manage compliance, receive support, and stay updated on COVID regulations
- Provide access to support channels
- Act as a digital wallet for licenses and assets
- Highlight potential opportunities and rebates
2. Listening to Customers
To validate insights from stakeholder research and further explore customer needs, I led generative research sessions with 8 business customers from various industries.
1-hour interview with 8 small business owners
Key learning goals
- Determine where a mobile app fits within their business journey and how business owners use their phones
- Identify what makes a great mobile app
- Understand the impact of COVID on businesses
- Uncover interactions with government agencies, especially Service NSW
- Identify potential features for a Service NSW business app
- Explore the use of business licenses and other compliance needs
Key Insights
- Business owners use one phone for both personal and business matters.
- Lack of a single source of truth for business owners to learn about financial opportunities.
- Minimal engagement with Service NSW pre-COVID; current interactions are mostly COVID-related and for license renewals.
- Potential app features
- Receive COVID updates via a trusted source
- Help & Support function considered critical by most business owners
3. Exploring Existing Knowledge
I reviewed a consulting partner's report on supporting NSW SMEs. The report provided insights into SMEs' post-COVID challenges, evolving priorities, and engagement with our business services.
Key Insights
- Financial support and stimulus vouchers were the most recognised and used services.
- Post-restriction priorities: addressing mental health, expanding online presence and market reach.
- Top resources needed over the next 12 months: business grants, funding, and loans.
4. Gathering Vital Data
I collaborated with our data analyst to gather traffic data from the Business Profile, providing a quantitative view of feature demand in the mobile context.
Key Insights:
- Significant mobile traffic to support channels, notifications, and program management.
- Many started applications on mobile but completed them on the web.
Defining the Problem
Jobs-to-be-Done (JTBD) model was chosen to translate the insights into customer goals.
JTBD model identifies fundamental problems customers need to solve, focusing on specific tasks.
This approach provides practical, actionable insights, making it more direct and efficient than personas, which can be abstract and require ongoing maintenance.
I.e., What they do rather than who they are.
Here is a snippet of our WIP (Work In Progress) JTBD board.
3 Core Customer Needs Uncovered
Aligning Customer Needs with Strategy
The three key customer needs identified above align seamlessly with two of our four strategic focus areas.
Defining the Minimum Viable Product (MVP)
To assess feasibility for planning, I first presented research insights to the squad to align on the problem space and potential solutions.
I then facilitated an MVP mapping workshop, gathering input from engineers on feasibility and the PM on strategy. This clarified priorities, dependencies, and identified quick wins.
Quick wins included
Vision
Empower businesses to efficiently interact with the NSW Government through a personalised, accessible and secure mobile app on the go.
Potential Impact and Strategic Opportunities
- A comprehensive app provides another platform to enhance and drive the adoption of existing products within the Service NSW business portfolio, helping sustain and potentially increase funding for product squads.
- It also creates opportunities for NSW government agencies to leverage the app for their initiatives and services, potentially securing additional funding for the portfolio.
Reflection and Learning
Though time and resources were limited, and JTBD provided the most value with the least effort at that moment, incorporating personas or archetypes in the longer term will be essential. This combination will help us better address diverse user needs as we grow and scale.
What's next
With the above learning, we then moved on to the next stage - Design & Delivery phase - to turn insights into impact.
Overview
The Service NSW Business App began as a tool for businesses to redeem QR code-based vouchers.
As the user base grew, we identified broader needs among voucher users and untapped potential for non-voucher businesses.
This led to exploring a more comprehensive app to streamline services and improve government interactions. During discovery, we uncovered core user needs and quick-win features that shaped the MVP.
Goal
To translate customer needs into actionable features, our aim was to launch the MVP for Business App. This MVP would address key needs, validate assumptions, and set a foundation for future development.
My Role
As a Senior Designer, I led workshop facilitation and design delivery:
- Crafting experiences with content designers
- Coordinating design planning with the principal designer and PM
- Implementing designs with engineers in an agile environment
Additionally, the principal designer and I developed our initial design system.
Explore Solution
Next, we explored the process of transforming our idea into a tangible product.
Generating design ideas
Collaboration
After aligning on quick wins, I led a Crazy 8 workshop with my squad to rapidly generate design ideas, foster excitement, and secure buy-in. The session produced diverse sketches that inspired our initial design concepts.
Solo Exploration
To guide our design direction, I also
- analysed Business Profile - a dedicated web space for businesses to manage their interaction with NSW government.
- conducted product analysis on leading apps across various industries.
Insights showed that home screens often serve as dashboards for key information, personalised details, and suggested actions, which influenced my design iteration.
I also considered scalability to ensure our future growth beyond the MVP.
Design and Delivery
With all the groundwork laid, we now moved on to creating high-fidelity designs using Figma.
1. Refining the MVP
Managing multiple voucher program initiatives alongside developing the MVP posed resource challenges, and legacy system limitations required us to trim our MVP scope.
To deliver immediate value, we strategically prioritised features most demanded by the MVP’s first customer segment — voucher program providers.
Additionally, push notifications and personalisation features were postponed due to feasibility constraints.
Refined MVP scope
Vision
Empower businesses to efficiently interact with the NSW Government through a personalised, accessible and secure mobile app on the go.
Reflection and Learning
Though time and resources were limited, and JTBD provided the most value with the least effort at that moment, incorporating personas or archetypes in the longer term will be essential. This combination will help us better address diverse user needs as we grow and scale.
What's next
With the above learning, we then moved on to the next stage - Design & Delivery phase - to turn insights into impact.
Furthermore, keeping the voucher scanning function with no-login in the MVP was essential, enabling frontline employees to continuously scan vouchers on personal or work devices without accessing sensitive data like transaction reports.
2. Crafting a design system
As the design system from Global Experience Language (GEL) was created for the web only, the principal designer and I took on the challenge of creating a new design system tailored to our app.
View more details about the process
3. Iterating through user feedback
To refine our designs, we conducted a usability test with 5 participants to evaluate end-to-end flows for key tasks related to JTBD, identifying any usability issues, and validating design assumptions.
Key Insights
- Enhance Homepage: Further personalise content for greater relevance.
- Help and Support Terminology: Users expected self-serve resources alongside support channels
- UI and Content Fine-Tuning, e.g. use conventional icons or clarify icons with labels to reduce confusion.
These insights guided our subsequent design iterations.
4. Finalising the MVP Design
We made it to the news
Post-Launch Impact
- Over 75,000 businesses have used the app to get things done, adopting key products like licences and transactions.
- They also rely on the app as a trusted source for information, particularly on support services.
- Stronger app ratings, higher downloads, and increased engagement enhance the app's value for partner agencies, unlocking greater collaboration opportunities.
Reflection and learning
In retrospect, conducting usability testing on low-fidelity concepts would have provided valuable insights earlier in the design process. This would have allowed us to refine the user experience more effectively and potentially reduce the number of iterations required for high-fidelity designs.
Iterate the MVP to enhance scalability and user experience.
Overview
The Service NSW Business App MVP was first launched for businesses to redeem QR code-based Dine and Discover vouchers in Feb 2021. Since then, the app has been expanded to accept a wider range of vouchers.
.png)
Problems
Customer perspective
- The MVP, developed under a rapid timeline, required immediate improvements to enhance functionality and refine the user experience.
Organisational perspective
- Service NSW introduced Voucher as a Service, enabling other government agencies to leverage this platform for financial support initiatives. This shift anticipates an increase in both the variety and volume of future voucher programs.
- Usability issues led to a surge in customer support calls, driving up operational costs and diverting resources from addressing more complex customer needs.
Goal
Enhance the voucher scanner MVP to optimise the user experience and ensure it accommodate a wide range of upcoming voucher programs.
My Role
As a product designer, I was working with
- a principal designer
- a product manager
- engineers
I led the research and delivery of the design.
What was the MVP
Research and insights
To gain a deep understanding of user needs and challenges, identifying areas for improvement, I embarked on a comprehensive research phase.
Insights: Key Usability Issues in Setup & Redemption
Other Key Insights
- Content & Communication Issues
- Confusing error messages: Caused significant user frustration
- UI & Visual Perception
- App Design Perception: more like a responsive web than a native app.
- Business & Operational Needs
- Transaction Reports: High demand, particularly for same-day reports from managers.
- Faster Redemption Process: Strongly desired, especially during peak times.
Design and Delivery
Prioritisation
To ensure that the most impactful features were prioritised, we shared key user insights with the product manager and engineers. This collaborative effort helped us balance user needs with technical feasibility and create a comprehensive product backlog.
With the product backlog now defined and prioritised, we are moving to the design.
Design Iteration through Feedback
1. Peer review:
I presented our design at the team design forum to gather feedback from fellow designers across other squads.
2. Usability Testing
We conducted usability testing with 6 participants from 3 different voucher programs.
3. Accessibility review by Principal Accessibility Specialist
I organised a design review with the Principal Accessibility Specialist in the organisation.
4. Accessibility testing
We recruited 6 culturally diverse participants with conditions such as dexterity issues and visual impairments. Participants relied on assistive technologies like screen readers, magnifiers, and text enlargements daily. We aimed to identify accessibility pain points and blockers for real-world users.
Key insights
- The ability to scan multiple vouchers per transaction was seen as a significant time-saver, especially during peak hours and days.
- Participants understood and loved the instant redemption feature.
- Total bill amount and reference details may not be relevant for all programs, indicating a need for flexibility to turn pages on and off for different programs. This further validated our assumption.
- Accessibility insights:
- Text enlargement impacted content visibility.
- Screen readers did not announce content types accurately.
- iOS screen reader navigation was inconsistent across certain screens.
- Clean, simple design with strong colour contrast across pages.
- Pairing icons with text in CTAs helped reduce cognitive load.
Since most accessibility pain points required engineering effort to address, I shared the findings with the team, collaborated with the PM to create an accessibility backlog, and worked closely with engineers to resolve the issues incrementally.
Key insights
- The ability to scan multiple vouchers per transaction was seen as a significant time-saver, especially during peak hours and days.
- Participants understood and loved the instant redemption feature.
- Total bill amount and reference details may not be relevant for all programs, indicating a need for flexibility to turn pages on and off for different programs. This further validated our assumption.
- Accessibility insights:
- Text enlargement impacted content visibility.
- Screen readers did not announce content types accurately.
- iOS screen reader navigation was inconsistent across certain screens.
- Clean, simple design with strong colour contrast across pages.
- Pairing icons with text in CTAs helped reduce cognitive load.
Since most accessibility pain points required engineering effort to address, I shared the findings with the team, collaborated with the PM to create an accessibility backlog, and worked closely with engineers to resolve the issues incrementally.
Final Design
Post-Launch Impact
Reflection and Learning
This was my first experience with inclusive testing, and it was truly eye-opening. It revealed the challenges users with assistive technologies face when products aren't accessible.
A participant introduced me to Spoon Theory, showing how inaccessible products drain the limited energy ("spoons") of those with chronic illnesses or disabilities.
Understanding the difference between the medical and social models of disability further deepened my perspective. The former views disability as a problem within the individual, focusing on diagnosis and treatment, while the latter sees disability as a result of societal barriers, emphasising the need to accommodate differences.
As a product designer, I should embrace the social model, aiming to design products that are not just useful and usable, but accessible.
Next case
Business App 1.0: Voucher Scanner MVP Enhancement
