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.
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.
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.
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.
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.
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
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, 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.