Skip to content

Case studies

We helped Reckon implement a unified front-end platform and design system.

From design, to React, GraphQL, and team structure – we worked with the leadership team to create the organisation that designs and ships the next generation of Reckon products.

2 screens each from Reckon Invoice and Reckon Payroll App juxtaposed side by side. 2 screens each from Reckon Invoice and Reckon Payroll App juxtaposed side by side.

Highlights

  • Established a new design team and design language across multiple brands and technologies
  • Developed a mobile Design System (React Native) with two successful production apps shipped to date
  • Led development of a shared GraphQL platform and schema for the front-end
  • Developed a new web Design System as cornerstone of a unified React front-end platform (Balance)

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 avatar Sam Allert avatar

Sam Allert

CEO, Reckon

Overview

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 mandate for every small business in Australia. The goal was to ship a mobile app that ensured business compliance, and use the opportunity to introduce a new and native Reckon product to a generation of businesses that are new to digital record-keeping.

Leading design and development, we shipped the app in just five months. It consistently received 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 for a new Design System and front-end platform, and we demonstrated the immense potential of further investment in engineering-led design. (opens in new window) As a result, we got the backing of the leadership team and rolled up our collective sleeves.

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 explored an entirely different aesthetic. This allowed us to establish new and exciting design foundations that have come to define the Reckon UX, while realigning with the brand through colour, illustration, and tone.

Thinkmill has been instrumental in shaping our design function. In fact I would say we have successfully implemented a design process that is uniquely Reckon’s, and that is succeeding in a very complex product environment.

Jason Hollis avatar Jason Hollis avatar

Jason Hollis

General Manager of Product, Reckon

Guidelines, patterns, components

A diagram of Reckon's form component in its different interaction states' A diagram of Reckon's form component in its different interaction states'

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

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.

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 wide range of interface approaches – from the generous and airy, to the power-user dense.

A screenshot of Tree View component from Reckon's Balance Design System A screenshot of Tree View component from Reckon's Balance Design System

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 (opens in new window)

Balance Design System Logo Balance Design System Logo

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.

An illustration showing Reckon colour tokens in dark and light mode An illustration showing Reckon colour tokens in dark and light mode

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.

Related case studies

  • vocal logo

    We helped Vocal scale from a hunch to a multi-million user publishing platform.

  • brighte logo

    We helped Brighte create Spark - a new Design System for their Mobile Apps.

  • elmo logo

    We helped ELMO build an award-winning design system to increase UX consistency and developer efficiency.

A photo of Jed Watson & Boris Bozic together A photo of Jed Watson & Boris Bozic together

We’d love to work with you

Have a chat with one of our co-founders, Jed or Boris, about how Thinkmill can support your organisation’s software ambitions.

Contact us