How we’re designing complex systems
A case study
What we learned about designing complex systems through reimagining a bookkeeping system.
Bookkeeping is tough
Let’s face it. As a creative entrepreneur, keeping your books in order can be a challenge. For those not well-versed in the financial arts the looming presence of the taxman is ever-present. Nonetheless it’s an intrinsic part of freelancing, running a design shop or business in general.
Finding a good bookkeeper with experience in your field, who enables you to take control of your business feels great. For us, and thousands of fellow creatives in Amsterdam, that bookkeeper is KeesdeBoekhouder.
This article aims to give you a detailed look at how we design complex systems and software at digital design studio Heavyweight.
The concept
KeesdeBoekhouder’s concept is simple: Take control of your business by keeping track of revenue and expenses via an online platform. You’re also linked to one of their experienced bookkeepers. They’ll get to know your business, give you feedback, and answer your questions.
Each quarter they check and submit your company’s books to the tax-authorities and take care of your personal taxes. You can rest easy, now your financial administration is signed, sealed and delivered.
The brief
A key part of the client’s business is their online platform. It’s the bridge between the bookkeepers and users. Because most touchpoints are on-platform; for many users the platform is synonymous with the Brand.
Heavyweight was asked to redesign the client’s existing online platform, working in close collaboration with the leadership and in-house development team.
Since we are their customers ourselves we had a unique point-of-view. We were quite familiar with the existing platform, and already had a few thoughts about what worked and what needed to be improved.
Discovery
We kick-off projects with a series of workshops to deepen our understanding of the client and their business goals.
Strategy Workshop
During the first workshop we formulated a strategy for both the project, and the platform as a whole.
We discussed business objectives, the inner-workings of the company, and growth plans. This dialogue ended up becoming the foundation of the product strategy and key objectives.
Key objectives
- Create a user-centered platform that is genuinely nice to use.
- Create a durable design system with future expansion in mind.
- Align the look and feel of the platform with the Brand.
- Improve wayfinding and user-understanding of tax processes.
- Show users they are working towards a goal and show their progress.
User research
Since there was an existing product we took our time to carefully analyse how people were using it. We discerned several types of users.
Users were asked to be observed while doing their taxes. We learned a lot about the users. I.e.; Some would add expenses into the system right away. Others had months worth of receipts piled on their desks. Adding those into the system in bulk is a vastly different experience than adding one at a time.
After the observations the users were briefly interviewed;
- Some customers didn’t see anything that needed fixing. They knew their way around the platform, and said it worked well enough.
- Many users said they wish that the platform was responsive. Now it wouldn’t fit on anything smaller than a 15" screen. 13" laptops were out.
- Tech-savvy users would complain that features were missing, like bulk editing, keyboard navigation, et cetera.
A surprising number of customers had never used the existing online platform, at all. They were still submitting their books physically, in a large folder.
Part of the strategy was to phase-out the physical folders. The users who were still submitting their books old-skool would have to transition to the platform.
After conducting the research we compiled a User Goals, a User Requirement List, and a MoSCoW analysis.
Ideation
After determining what wasn’t working we gathered the team to brainstorm. We came up with a lot of design solutions and ideas for new features;
- Accounts
There are two parts to your taxes: company sales tax and your personal income tax. Many users were unclear on the difference. We’re introducing a proper account-switcher to highlight the difference between personal and business sections. - Dashboard
The platform had always lacked dashboards. We’re adding dashboards for companies and fiscal years. We’re including satisfying charts and graphs to show people their business growth and progress with their taxes. - Deadlines & todos
To motivate and help people submit their books on time, we’re adding deadlines and todos. These also give users clear goals to work towards. - Community
We want to foster collaborations between customers. Because many of the client’s customers work in related fields, there is value in creating a small community. Users can opt-in to create a profile– containing basic information and a few photos– and link up with others.
UX Design
Armed with a strategy, research and a lot of new ideas, it was time to start thinking up some design solutions.
Flow & structure
During the Workshops we made a series of Sitemaps. They’re a good way to define hierarchy and connect different sections of the platform. It is essential to refer back to the high-level structure later on.
During the Workshops we did a lot of layout sketches, to visualise abstract features. But we needed a greater level of detail. We used the sketches, URL and Sitemap to create a Low-fidelity Wireframe.
After completing the Low-fidelity Wireframe we were confident that the screens were ready to be UX-ed in greater detail.
Interactive prototype
Next up were High-fidelity Wireframes. Every screen was meticulously designed with realistic content. Then an Interactive Prototype was created to test and validate our design choices. Testing revealed minor flow and layout issues– but nothing critical. The modular setup made screens easy to update.
UI Design
One of the key objectives was to align the platform with the Brand. The existing platform had not been updated in a few years; and that was evident in the design. The visual look and feel needed a refresh.
The creative brief from the client was to design a platform that felt solid and functional. Users tend to spend a lot of time on the platform. This lead us to take the usability impact of each design decision into account.
We aligned the platform with the Brand’s minimal aesthetic, subtle use of colour, and a strong focus on information and type. Carefully crafting an interface that balances form and function.
Development
The client’s in-house developers were part of the Product Team. They were involved in the process from day one. They provided valuable insights and were key in avoiding design decisions that would be too complex to build.
We created the screen designs using our Component Based Design method. Also, we put together an extensive UI Kit. This made development a breeze.
Read more: How we’re using Component Based Design
Every so often we would get the team back together to check-in on the progress of the developers. We exchanged feedback and made slight alterations to the designs where necessary.
Results
The launch of the new online platform was met with overwhelming enthusiasm. The client couldn’t have been happier. Refreshing the online platform was something they had been working towards for a long time. Seeing it come to fruition in such a good way was very pleasing.
Thousands of users are enjoying the new features and the bespoke new look. They’re empowered to build and expand their businesses; knowing that the financial ends of their companies are in perfect order.
The new platform is a key part of the client’s growth strategy– and it has already paid off;
Since the launch of the platform the client has welcomed many new customers, and opened up two new offices to keep up with demand.
Let’s collaborate!
We’d love to talk with you about solving your design problem too. Let’s collaborate and shape your product into something wonderful. Get in touch.
Learn more about us: www.heavyweight.nl.
Want to see more pixels?
Head on over to Dribbble to see what we’re up to each week.
