Business App 1.0 - Voucher Scanner Redesign
Empower businesses to efficiently interact with the NSW Government through a personalised, accessible and secure mobile app on the go.
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 business customers. This prompted us to explore how a more comprehensive app could streamline services and enhance business interactions with the government.
Goal
Our squad - 3310, was tasked with creating a comprehensive app for business customers in NSW. Inspired by the success of the existing Business Profile, which a dedicated space for NSW businesses to manage their interaction with NSW government.
So we began with research to understand our customers' needs and wants in the mobile context, leveraging the proven success of the Business Profile while exploring new possibilities.
My Role
As a senior designer, I was collaborating with
- a principal designer
- a product manager
on high-level research planning, while taking ownership of planning and executing individual research initiatives.
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 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
2. Listening to Customers
To validate insights from stakeholder research and further explore customer needs, I then conducted generative research with 8 business customers across 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
To supplement the small sample size from customer interviews, 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
Finally, to complement the qualitative insights, 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.
Here is the final, digestible output
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 a gap between its limited offerings and the broader needs of business customers. This prompted us to explore how a more comprehensive app could streamline services and enhance business interactions with the government.
Our discovery phase unveiled three core user needs and identified low hanging fruits for the MVP, which guided the app's development.
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 Senior Designer, my main responsibility was 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 our Business Profile, and
- conducted competitor research on industry-leading apps.
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 Business App posed resource challenges, and legacy system limitations required us to trim our MVP scope.
To deliver immediate value, we prioritised features most demanded by our first customer segment — voucher program providers.
Additionally, push notifications and personalisation features were postponed due to feasibility constraints.
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: 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
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 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.
Due to the rapid development timeline, the original voucher scanner required urgent attention for improvement when I first joined the team. This presented an opportunity to enhance the app's functionality and user experience.
Goal
Enhance the Minimal Viable Product (MVP) of the voucher scanner to optimise the user experience and ensure it accommodate a wide range of upcoming voucher programs.
My Role
As a mid-level product designer, I was working with
- a principal designer
- a product manager
- engineers
I led the research and focused on delivering the design.
I collaborated closely with the principal designer to create a new design system for the app, worked with the PM to prioritise the backlog, and partnered with engineers to implement the design.
What was the MVP
Research and insights
To gain a deep understanding of user needs and challenges, identifying areas for improvement, we embarked on a comprehensive research phase.
Key insights
Other key insights
- Faster redemption process: Strongly desired, particularly during peak times.
- Confusing error messages: Caused significant user frustration.
- Transaction reports: High demand, especially for same-day reports from managers.
- App design: Perceived more as a responsive web interface than a native app experience.
Potential Impact and Strategic Opportunities
Enhancing the MVP by addressing the issues above could significantly benefit the organisation.
Frontline staff feedback revealed that the usability issues drove a high volume of customer support calls, increasing costs and diverting resources from addressing more complex customer needs.
Hence improving the MVP would reduce support calls, lower costs, and allow staff to focus on higher-value tasks.
%201.png)
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 User Feedback
After drafting the initial design, we conducted usability testing with 6 participants from 3 different voucher programs.
Key learning goals
- Assess the ease of scanning multiple vouchers per transaction.
- Evaluate user reception of the instant redemption feature.
- Determine if users understand the updated field labels.
- Check if users can easily remove scanned vouchers.
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.
Inclusive Design and Testing
We aim to create inclusive digital experiences and provide equal access to information for all customers. We also conducted 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.
Learning Goals
- Identify accessibility pain points and blockers for real-world users.
Key Insights
- Text Enlargement: Impacted content visibility.
- Screen Readers: Did not announce the type of content correctly.
- iOS Navigation: Screen reader navigation was illogical on some screens.
- Design: Clean and simplistic with good color contrast on each page.
I shared these findings with the team, collaborated with the PM to build an accessibility backlog, and worked with engineers to resolve the pain points.
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 2.0 - Beyond Voucher Scanning: Research & Discovery
