Invoices that look professional and get paid.
Sole traders needed to send invoices that matched their brand and nudged clients to pay faster. The old flow was scattered, slow, and made it hard to look credible.
Listening before building.
We initiated our journey by diving into an extensive research phase, engaging our users and stakeholders to identify the primary pain points. Main insights: many customers fail to pay on time; users are unable to create digital invoices themselves; creating and sending invoices takes too much time; manually marking invoices as paid on spreadsheets is time-consuming and lacks correlation with transaction lists.
Five days to define the path forward.
Next we wrote the feature brief together with PM, product design, solution design, and content. A five-day sprint nailed the context, problem, goal, and a first sketch of the solution: a dedicated invoicing area where people can tune visuals, set sensible defaults and messages, and hook up Stripe to their Sage account.
Reshaping the solution around technical realities.
We took the concepts to architects and engineers. Endpoints had to live across services so the frontend stayed fast and reliable, which meant we split the UI into separate setting areas instead of one giant form; each customization owns its own space.
Three phased releases, each independently valuable.
Together with the Product Manager and Development team, we effectively prioritized all desired solutions and implementations, while establishing the timeline, requirements and constraints. Solutions prioritized: pre-created templates for brand customization (colors, fonts, logos); a dedicated section for default information and messages; Stripe integration for streamlined payment processing; and dynamic links for sending invoices directly from the app.
From sprint to shipped.
All designs across the listed releases were meticulously crafted to adhere to our established design system, incorporating a new pattern seamlessly integrated into our guidelines. Upon completion, we conducted thorough reviews with architects and developers. We initiated the first round of usability testing with users to swiftly evaluate our solution, then maintained continuous alignment with production to ensure rigorous quality assurance standards were upheld.
First release: effortless, branded invoices.
Ship one was about looking good without being a designer: template, colours, fonts, logo, all with a live preview so people could see the invoice before it went out.
Second release: set once, save every time.
Ship two added defaults: payment method, bank details, instructions, customer-facing notes, core business fields; all of it pre-fills when you start a new invoice so repeat work drops.
Third release: payments that close the loop.
The third release focused on integrating Stripe into payment methods, enabling customers to receive payments more efficiently. This required creating a dedicated bank account within the banking area to connect with Stripe, as well as establishing direct links from invoices to related transactions to automatically mark invoices as paid.
Extensive testing and design system contributions.
We ran four rounds of testing before each release and kept iterating from what we heard. I also worked with the design system crew on the mobile navigation pattern; we designed, tested, and shipped it so other products could reuse it. Stripe-specific pieces stayed on-brand.
