Invoice template set up
As lead product designer, I created Xero's first mobile invoice template setup flow, empowering small business owners to customise their invoices with logos, addresses, and payment details on-the-go. This helped them create professional, branded invoices so that they could get paid faster.
Role
As lead product designer for the standard branding theme, I owned the end-to-end mobile experience from research and competitive analysis through to high-fidelity design and implementation support.
Team
Product managers, Engineers, Content writers, Accessibility specialists, Web teams
Stakeholders
GM Product & Design, Project leads, Domain partners (web)
Design Approach
Problem
Invoicing is one of Xero’s core features. It’s how small businesses get paid.
However, new customers entering through the Xero Accounting App (XAA) couldn’t customise their invoice templates on mobile. Things like logo, address, tax numbers, payment advice were only editable on Xero web.
This created friction during their onboarding journey
- Users either switched to desktop mid-flow
- Or sent an unprofessional, unbranded invoice
We knew from research that the “first invoice” moment is critical to “getting paid”. Friction at this stage contributed to 46% of trial users dropping off before converting to paid.
Mobile users could create invoices, but not professional ones. That gap weakened trust during onboarding.
Goal
Enable new mobile customers to set up a professional, branded invoice template within the app, so they can confidently send their first invoice and realise value faster, without needing to switch to desktop.
Success looked like:
- High completion of the setup task
- Increased invoice sending once task was completed
Challenges
- Handling scenarios where users had already entered data on web, requiring confirm screens and edit states
- Ensuring changes made on mobile were reflected on web and vice versa, maintaining a cohesive experience across channels
- Designing for different tax number requirements across regions (GST for NZ, ABN for AU, nothing for other regions)
- We shipped in two phases:
- Phase 1: Standard theme (logo, address, tax number, payment advice)
- Phase 2: Enhanced branding (fonts, colours, live preview)
The MVP had to scale into a richer branding experience without redesigning the flow.
Solution
I designed a guided, step-by-step mobile flow that allowed users to customise their invoice templates with logos, addresses, payment details, and tax numbers, entirely within the app.
The experience:
- Introduced a dedicated “Set up invoice template” task in mobile
- Broke setup into simple, progressive steps
- Included smart pre-fill for existing data
- Allowed editing and removal states
- Provided an invoice preview to build confidence
We focused on reducing cognitive load and making professional invoicing feel easy and achievable.
Impact
High Engagement & Adoption
- User engagement more than doubled in the first two months, growing from 4,697 to 9,280 users entering the invoice template setup flow across two entry points
- 47% of users who completed the setup went on to send their first invoice, directly connecting the feature to Xero’s core value proposition of getting customers paid
Process
Competitor analysis insights
I conducted a structured competitor and comparator analysis across leading mobile accounting and productivity apps.
Rather than reviewing screens in isolation, I mapped the full end-to-end journey. From first invoice creation through to sending so at I could understand how template setup was positioned holistically across the app.
I analysed:
- Where template setup appeared in the journey
- How it was framed (optional vs required)
- The structure of the flow
- The level of guidance provided
- How confidence and trust were reinforced
- How momentum was preserved through to completion
I documented the underlying strategies behind each flow, not just the UI patterns and synthesised them into high-level themes to inform the next phase of discovery and lo-fi concept exploration.
Key learnings
- Template setup is embedded in onboarding, not hidden in settings
- Step-by-step flows reduce cognitive load at important moments
- Real-time preview increases trust before sending
- Structured choice prevents users becoming overwhelmed
- Seamless transition into send protects momentum
Analysis of web experience
Invoice template setup already existed on web. Rather than designing mobile in isolation, I treated this as a cross-platform systems problem.
The web team owned the APIs powering templates, so understanding the underlying logic and constraints was critical before exploring solutions.
What I Did
- Validated feasibility before progressing lo-fi concepts
- Analysed the existing web template architecture, behaviours and API capabilities
- Identified which elements were fixed vs flexible from a technical perspective
- Set up weekly design working sessions with the lead web designer
- Aligned early on interaction patterns, naming and core behaviours
Outcomes
- Ensured cross-platform consistency in template logic
- Reduced engineering rework by surfacing constraints early
- Designed within real system capabilities, not assumptions
Ideation
With research complete, I moved into rapid concept exploration using a divergent thinking approach. I created multiple directions and narrowed down to three concepts, each testing different assumptions about cognitive load, preview visibility, and user flow.
Concept 1: Step-by-step with persistent preview
The approach: A progressive disclosure flow with an always visible invoice preview.
Rationale:
- Preview updates build confidence as users add each detail
- Designed to scale for Phase 2 (better branding with live preview updates)
- Maintains context throughout the flow
Trade-offs:
- Split-screen layout reduces space for input fields
- Preview competes for attention during data entry
- Could feel cramped on smaller devices
Concept 2: Step-by-step with full-screen takeover
The approach: Progressive disclosure with the preview as a secondary action, accessed via a dedicated button.
Rationale:
- Reduces visual noise, allowing users to focus on one task at a time
- Adheres to native sheet patterns for auxiliary actions
- Creates clear hierarchy: input first, preview second
Trade-offs:
- Less immediate feedback on changes
- Preview requires an extra tap, potentially lowering engagement
- Users might forget to check how their invoice looks
Concept 3: Single-screen form
The approach: All input fields displayed on one scrollable screen.
Rationale:
- Users see everything upfront, there are no surprises about what’s required
- Faster for users who already know what they need to add
- Familiar pattern (single-form entry)
Trade-offs:
- High cognitive load contradicts research findings about progressive disclosure
- Overwhelming for first-time users who are still learning
- No natural break points to build confidence incrementally
Converge onto an MVP
After stakeholder reviews and design critiques, Concept 2 emerged as the clear direction.
It balanced simplicity with visibility and aligned with native mobile patterns needed for future phases.
Why this concept won
- Reduced cognitive load while maintaining access to preview
- Scalable for Phase 2 improvements (live preview + “better branding”)
- Cleaner implementation using native patterns
- Strong alignment with web logic
It delivered impact without expanding scope beyond MVP.
Moving to High-Fidelity
With the concept validated, the focus shifted to refinement and system integration. I increased the fidelity while accelerating delivery through reuse.
Key Design Decisions
1. Design within the system
- Reused existing form fields, buttons and icons from the design system
- Applied exisiting validation, error and empty state patterns
- Matched web field labels and template logic
This ensured consistency and reduced engineering uplift.
2. Optimise for native performance
- Leveraged iOS & Android photo picker and system upload flows
- Used action sheets and HUD confirmations
- Designed for dark mode, accessibility and responsive behaviour from the start
This kept the experience familiar for each platform.
3. Reduce user effort through smart defaults
- Pre-filled known business details (logo, address, tax)
- Replaced empty states with confirmation screens
This minimised friction during setup.
Engineering Handoff & Delivery Approach
To accelerate delivery without compromising quality, I structured handover incrementally and progressed each step to hi-fidelity and handing it off as it was finalised.
Rather than waiting for the full flow to be complete, I worked step-by-step across iOS and Android in parallel.
How It Worked
- Completed one step in hi-fi (including edge cases, dark mode and accessibility)
- Reviewed interaction logic with engineers
- Documented behaviours, validation and states
- Handed off for build
- Continued designing the next step while development progressed
Why This Approach
- Accelerated build velocity: engineering always had designs ready to build
- Reduced delivery risk: constraints surfaced early, per step
- Minimised rework: smaller increments meant fewer changes later on
- Protected quality: each step received focused attention across iOS and Android
This approach allowed us to deliver under tight timeframes, ensuring the MVP shipped on schedule without sacrificing on quality.