Faster Finances

Introduction

Since 2022, I've been on a mission to transition Quiddly from building UI based on gut feeling to a human-centred design approach. Quiddly is a fintech SaaS provider offering services for invoice management, factoring, integrations, and debt collection.

When taking on the role of Design Leader at Quiddly, I found a lack of design practices and processes to support product development. My task was to guide the organisation towards implementing design strategy, conducting user research, enhancing usability, value mapping, formalising UX practices, and refining visual design.

The goal was never design for its own sake. It was about creating value for our customers and their end-users: faster financial decisions, fewer manual payment steps, quicker handling of collection cases, and customers and end-users who would happily recommend Quiddly.

Since 2022, I've been on a mission to transition Quiddly, a fintech SaaS provider, from building UI based on gut feeling to a human-centred design approach. When I took on the role of Design Leader, there was a lack of design practices and processes, so my task was to guide the organisation towards design strategy, user research, usability, value mapping, formal UX practices and refined visual design. The goal was value for customers and end-users: faster financial decisions, fewer manual payment steps and quicker collection cases.

Design principles

To ensure that everyone in the company had a clear understanding of the direction I envisioned for the design of Quiddly's products, I formulated three design principles:

Quiddly Design Principles

Once the principles were in place, every flow and view of the product was designed with them in mind. In addition, they provided a structured language for communicating the design direction to the rest of the company.

Quiddly — Operations

Example of the “Job in the centre” principle. View was created in close collaboration with end-users to ensure it contained the most relevant information and provided access to the most common actions.

Quiddly — Invoice payment

Example of “Familiar and reliable” design principle. Styling and patterns follow those of other payment solutions.

The sales organisation used the design principles to improve their product communication with customers. Engineering used them as a basis for discussing and reviewing how features should work and behave.

The design principles have made the Quiddly organisation more design-aware and have had a direct impact on the quality of the product offering.

Target audiences

To fulfill the design principle of “focus on the job,” it was important for us to understand our target audience - their needs, expectations and work context. In the scale-up environment of Quiddly, user research had to be more ad-hoc compared to my previous experience with Enterprise UX. With no dedicated user researchers and limited time for research, we had to adapt.

Fortunately, the Product Management and Sales teams were deeply engaged with customers, understanding their requirements and maintaining strong relationships. However, their focus was driven mainly by business needs rather than user needs. To bridge this gap, I conducted regular user research activities to build a foundational understanding of our target audiences, their contexts, and needs.

Instead of dedicating extensive time to user research, I adopted a more agile approach. I gathered audience insights by interviewing internal sales personnel, participating in customer calls, and joining customer visits.

To fulfil the design principle of “focus on the job”, we needed to understand our target audiences: their needs, expectations and work context. With no dedicated user researchers and limited time, I adopted a more agile approach, gathering insights by interviewing internal sales personnel, joining customer calls and going on customer visits. This bridged the gap between a business-driven view of customers and what users actually needed.

High-level view of four target audiences

For example, during a two-day customer visit, I took the opportunity to shadow credit officers at a factoring customer. Being on site, I gained a detailed understanding of their workflows and identified areas where we could better support them in the process.

The typical credit officer sits at a desk with two monitors for a good overview of their workflow. They go through several steps in order to make an informed decision of whether to finance an invoice or not. They are under increasing time pressure towards the end of the afternoon.

For example, during a two-day customer visit I shadowed credit officers at a factoring customer. The typical credit officer sits at a desk with two monitors and goes through several steps to decide whether to finance an invoice, under increasing time pressure towards the end of the afternoon. Being on site showed me exactly where we could support them better.

All payouts of financed invoices need to be done before a certain time, otherwise clients will start calling and asking why they didn’t get paid. As part of this, they communicate decisions with the team to make sure that others know what has been worked on and what decisions were made. This is also required for traceability in case anything happens or goes wrong further downstream in the process.

Target audiences provided the organisation with the necessary details for designing and developing solutions that focused on the job and were in line with the context and expectations of end-users.

Quiddly Design System

A key aspect of fulfilling the design principles of “Professional, yet playful” and “Familiar and reliable” was to ensure a design system was in place.

Being a scale-up company, it was not feasible for me to build a design system from scratch. I did not have enough bandwidth and the engineers needed components to work fast and efficiently. Prior to my arrival, engineering had started to use MUI-components. MUI provided standard patterns and helped support my idea of “Familiar and reliable”. Thankfully, I could build on Engineering’s existing efforts and start creating Figma designs using MUI.

To fulfil the design principles of “Professional, yet playful” and “Familiar and reliable”, we needed a design system. As a scale-up, building one from scratch wasn't feasible, so I built on the MUI components engineering had already started using. MUI provided standard patterns that supported “Familiar and reliable”, and let me create Figma designs that engineers could build fast.

Figma — Quiddly Design System

Screenshot of the Quiddly Design System in Figma

Many of Quiddly’s administrative target audiences were younger people coming out of college, who expected a short learning curve and had little patience for training. They had exposure to Google and Google-like products, which also made MUI a good fit for us.

However, MUI only provided the standard set of base components. We needed a lot of customised components, so I created a Quiddly Design System with our own components for reuse. We have a lot of complex views, such as a kanban board for making factoring decisions and automation rules, that require specialised components.

Many of Quiddly's users were younger people who expected a short learning curve and had little patience for training, which made MUI's Google-like patterns a good fit. But MUI only provided base components, and views like the Kanban board for factoring decisions needed much more, so I created the Quiddly Design System with our own customised components for reuse.

A mix of MUI components and custom objects

By introducing a design system approach to Quiddly, I laid the foundation for better scaling of UX efforts, standardised components for Engineering and a more consistent overall user experience for our customers.

Customer-centric design

Thanks to our design principles, understanding of target audiences, and the establishment of a solid design system, I designed flows for over 50 new capabilities, filling feature gaps in our offering and keeping pace with the high-speed dynamics of a scale-up environment.

This included understanding and discussing requirements from product management, validating assumptions with end-users, creating prototypes for internal and external evaluations with stakeholders and producing pixel-perfect designs for handover to engineering teams.

For example, a customer required detailed control over their automation capabilities. Product management spent time with the customer to understand the functional requirements and I revisited existing user research to review target audience needs and design qualities. Based on this, I created a simple first prototype that we reviewed with the customer. The review showed that it wasn’t what the customer expected from a functional perspective and product management needed to revise their requirements.

Thanks to our design principles, target audiences and design system, I designed flows for over 50 new capabilities, from requirements and user validation to prototypes and pixel-perfect handover. For example, a customer needed detailed control over their automation. I created a simple first prototype and reviewed it with them, and the review showed it wasn't what they expected, so product management revised their requirements before anything was built.

Decision tree for automation created using a customer-centric design approach.

Based on new input from product management and the customer, I created another version of the prototype. We did a review with the customer stakeholders and their end-users. The second iteration was a great improvement and appeared to fulfill their needs. However, to be sure it met their specific needs of flexibility and control, the prototype was shared with the customer so that they could evaluate all their key use cases.

After testing was completed, I spent additional time looking over the visual look and feel of the capability. I ensured that it followed the Quiddly Design System, was in line with the design principles and compared it to best-in-class automation systems.

Based on the new input, I created a second prototype and reviewed it with the customer's stakeholders and end-users. To be sure it met their needs for flexibility and control, we shared it so they could evaluate all their key use cases. After testing, I refined the look and feel against the Quiddly Design System, our design principles and best-in-class automation systems.

This lean, customer-centric design process has helped us keep a fast release pace while maintaining a high quality product experience and high customer satisfaction.

Accelerating new business opportunities with design

At a scale-up every new business opportunity matters. This was especially true in Quiddly’s case, as they were operating in a limited customer segment with slow and complex sales cycles.

The Quiddly software had gaps in its feature set, so to win customers we used designs of future capabilities to address those gaps during the sales process. This provided me with a great opportunity to work with customers and human-centric design already in the pre-sales stage.

During a significant sales opportunity, it became clear that we were missing a few key capabilities in the system. These were must-haves and the customer was reluctant to continue the conversation with us. In an effort to remedy this, I designed a flow based on the customer needs and created a clickable prototype in Figma.

In the following sales meeting a week later, I demoed the prototype to the customer and they were impressed with how quickly we could produce a design of the missing capability. After the demo, they had a comment about the flow, so I switched from the prototype to the editor and fixed it there and then. This further enhanced their impression of us being quick and customer-centric in our approach.

At a scale-up, every new business opportunity matters. During one significant sales opportunity, we were missing must-have capabilities and the customer was reluctant to continue. I designed a flow based on their needs and created a clickable Figma prototype. A week later I demoed it, and when they had a comment on the flow I switched to the editor and fixed it there and then, which strengthened their impression of us as quick and customer-centric.

After the meeting, I worked closely with the Engineering team so that, within a week, we could present the capability in the live system to the prospective customer. Showing how fast we could work with design and development was a key part in convincing them that we were the right software provider to go with.

With the help of my approach to prototyping, we have brought in new customers by illustrating our customer-centric design approach in practice.

Conclusion: Value delivered

Bringing a human-centred approach to Quiddly has delivered real value to our customers and their end-users. By designing around the actual job, whether that is a credit officer deciding whether to finance an invoice, an administrator handling payments or a team working through collection cases, we have reduced the time it takes to make financial decisions, perform manual payment steps and process collection cases.

The work has also shown in how customers feel about the product. Customer NPS has increased, both among the stakeholders who buy Quiddly and the end-users who work in it every day.

Bringing a human-centred approach to Quiddly has delivered real value to our customers and their end-users. By designing around the actual job, we have reduced the time it takes to make financial decisions, perform manual payment steps and process collection cases, and customer NPS has increased among both stakeholders and end-users.