Home

Reckon

Striking a Balance

We're helping Reckon implement a unified front-end platform and design system.

We met the Reckon team just as they were embarking on the herculean task of building the next generation of their flagship products. First off the line was Reckon's Single Touch Payroll App (STP App) – a new and entirely electronic way of reporting payroll, which the Australian Taxation Office (ATO) was about to start requiring for hundreds of thousands of small and micro businesses. The goal was to ship a mobile app that allowed these businesses to ensure compliance, and use it as an opportunity to introduce a new and native Reckon product to a generation of businesses new to digital record-keeping.

Leading design and development, we shipped the app in just five months to consistently positive reviews (4.4 stars, at time of writing). In the process, we laid the foundations for a new Reckon Design Language, introduced GraphQL, prototyped workflows that focused on great Developer Experience (DX), and created a component library that set the tone for Reckon's new UX direction.

In the months following launch, we produced a proof of concept of a new Design System and front-end platform, and demonstrated the immense potential of further investment in engineering-led design. With that, we got the backing of the leadership team and rolled up our collective sleeves.

  • 🎉 New Design Language
  • 🎉 New Design System
  • 🎉 New front‑end platform
  • 🎉 New teams
  • 🎉 New mindset

What we did

Design Language development

The next generation of Reckon products called for a new and fresh Reckon Design Language. With blessing from the top, we took a fairly radical early departure from the existing brand identity, and were free to explore an entirely different aesthetic. This allowed us to establish new and exciting design grounds that have come to define the new Reckon UX, while realigning with the brand through colour, illustration, and tone.

Guidelines, Patterns, Components

With both the capability and the mandate in place, we decided early on to invest in creating entirely bespoke components. To achieve our UX and DX goals simultaneously, we wanted to be in control of every component API and produce only what we needed at each step. We also developed common patterns (UI and workflows) across the ecosystem of apps, and set about rigorously documenting guidelines for how to make good decisions when working with the new Design System – the living expression of which is at balance.reckon.com.

Organisational change

Design systems are about people
. We knew from the start that the biggest challenge would be the successful rollout and adoption of the new front-end platform and design system across the organisation.

With an incredible level of support from the leadership, we developed a transition plan and created dedicated Design and Design System teams, seeded by Thinkmill. These new squads formed vital bridges to product and engineering teams, doing a mix of design, development, advocacy, cheerleading, as well as embedded hands on support for shipping products. Feedback at 3 and 6 months has been almost universally positive.

New technologies

New processes

New behaviours

New mindset

“Thinkmill brought a fresh design perspective and a depth of experience that gives me the confidence to pursue a mobile product strategy – together.”

Sam Allert

CEO, Reckon

Outcomes

Reckon Design Language

Inspired by the clarity and focus of mobile interfaces, Balance is Reckon’s new design language. It’s bright and bold. Variable density is available at the component level, supporting a spectrum of interface density, from the generous and airy, to the power-user dense.

Balance Design System

Over the period of some six months, we created a critical mass of made-to-measure components, patterns, and guidelines that underpin all new Reckon web apps. The living docs website is the first port of call for new users as a technical reference, as well as an important resource that helps align the entire product organisation.

Explore Balance Design System

First-class theming

With several sub-brands under the Reckon umbrella, we developed a flexible theming system built on accessibility-focused colour functions and palette resolvers. Across modes and brands, theming provides flexibility: from brand differentiation, light/dark mode, and white labelling.

Balance Mobile

Balance Mobile, developed in React Native, is the mobile expression of Reckon’s new Design Language. The goal is the same: deliver the familiar and consistent Reckon user experience in every native mobile app. Balance Mobile is now the foundation for every mobile product on the roadmap.

Can we help with your design system or front-end platform?

Get in touch
Back to top