navigate_before
navigate_next
arrow_back

Designing for a B2B transaction data platform

Platform:

Desktop app

Year:

2021

Tools:

Figma, Typeform, User Interview, Maze, Dovetail, Miro, Adobe Analytics

My responsibilities:

Discovery
Competitor analysis
Research & usability testing
Information architect
Hi-fidelity design & prototypes
Design system
Dev handoff

01/Discovery

The problem

There were 1.9 billion debit and credit card transactions in the UK in January 2022. As a transaction enrichment vendor, Transaction Transform specialises in collecting and analysing transaction data to make it more useful.

However, the transaction strings generated from APIs can be highly complex and leading to incorrect or missing merchant information. Therefore, transaction data often requires manual intervention to correct errors, reconcile discrepancies, or fill in missing information.

Project timeline

Working with a startup client often involves limited budget. In this case, the project had only one designer and a small team of three developers. I led the entire design process, starting from the kick-off and discovery phase and concluding with the handoff to the development team, all accomplished within just 8 weeks.

Product concept

Transaction Transform connects to banks and provides API that allow fintechs, lenders, credit bureaus, and also banks to build new services based on automatic account statement gathering.

The categorisation API assigns a category to unclear business and personal transactions, and turns them into meaningful actionable insights that can be used by companies and their customers.

To compete with their competitors, Transaction Transform want to provide a platform that allows their partners to have oversight, manage, and manually enhance the data more effectively.

Identifying users

In terms of users, our platform functions similarly to a CMS platform, offering two types of accounts: general accounts and administrators. To better understand the distinctions between these two account types, I prioritized their goals, needs, and motivations. This shift in perspective allowed me to adopt a user-first mindset, placing emphasis on addressing their requirements rather than solely focusing on features.

Associate account - contractors

For this account type, the target users are more likely to be contractors who are paid on an hourly basis and have specific targets to meet. They will have different levels of technical expertise and may not have any prior experience with fintech or open banking. Therefore, it's important to ensure that the product is straightforward and simple enough to use.

Goal: To improve as many 'flagged transactions' as possible when logged into the platform

Needs: Quick onboarding / training to understand the transactions

Must: Follow the regulatory instructions

Value: Accuracy and efficiency of their input

Admin account - business project managers

These users are highly experienced and professional in their work. They play a crucial role in managing and overseeing the data processes to ensure accuracy, quality, and compliance.

Potential businesses will be using this platform

Banks

Open banking

Financial software

Accountancy platform

Wealth management

Goal: To ensure the data and workflow are managed in a high standard

Needs: To have full visibility into the distribution of data and general accounts' reports

Must: Provide feedback and create reports

Value: Accuracy of the data

Market opportunities

Legacy software: Many companies still rely on outdated legacy software applications to manage their data. This presents an opportunity to introduce a modern and efficient data management platform that offers enhanced functionality, streamlined processes, and improved data security.

Rising competition: With the increasing number of businesses entering various industries, competition is intensifying. Companies are seeking ways to gain a competitive edge by effectively managing and utilising their data. A robust data management platform can provide them with the tools and capabilities to optimise their data and stay ahead in the market.

Effortless to set up: Having a fully documented service with Postmaster and Open API documentation makes a world of difference. It's simple, lightweight, and easy to install, making it a breeze to integrate and use. You'll have all the information you need to get up and running smoothly and confidently.

Effortless to set up: Having a fully documented service with Postmaster and Open API documentation makes a world of difference. It's simple, lightweight, and easy to install, making it a breeze to integrate and use. You'll have all the information you need to get up and running smoothly and confidently.

02/Interactions

Designing for a data-heavy platform is like sculpting - you start with a big chunk and then start trimming until you get it just right.

The data itself can be complex and vast, requiring careful consideration of how to present and visualise it in a user-friendly manner. The challenge lies in finding the right balance between providing meaningful insights and overwhelming the user with excessive information. Because less data usually means a less useful solution. But throwing in all the data isn't practical either. It's all about finding that sweet spot, focusing on the main use case and organising features accordingly.

Transaction tasks

One of the main problem I tried to solve is to investigate when a transaction string obtained from APIs had missing or incorrect details, and which field will need to be completed.

After reading through the analysis, I identified that a transaction can be divided into three 'tags': in-store - when a physical or digital card was used at a specific merchant location, online - when a payment was made via online merchant and there may not have a specific location registered, direct debit - when a regular payment was set up with a merchant and may not have a specific location registered as well

Each tag will have different requirements for users to fulfill, depending on which details are incorrect or missing from the APIs. This means that some tasks will be more complex than others. Based on user interviews, most participants mentioned that they would prioritise completing the easier tasks before tackling the more difficult ones. However, considering the large volume of transactions processed daily, there is a potential problem where all the complex tasks could be ignored, resulting in a significant backlog.

To prevent this from happening, I have devised a solution. We will randomise the tasks in the backend based on their modified dates and present users with only one task at a time. This approach also ensures that users are not overwhelmed with a large number of tasks and allows them to focus on completing one task before moving on to the next.

Approval process

As an admin, one of the most significant responsibilities is to ensure efficient data management, which in turn improves the backend database. This improvement is instrumental in helping the product stand out from competitors.

During my research and discussions with the backend team, I discover the challenge faced by admins when it comes to managing the backlog of unresolved tasks. A task remains unresolved when an associate couldn't provide all the required information. Therefore, our platform needs to make it easy for the admin to quickly check all the unresolved tasks from the team's associates. This way, they can check if the data can be retrieved from the current transaction ID or if they need to flag it for further backend improvements.

Workflow hierarchy

During the initial kick-off workshop, I broke down the different roles and responsibilities for associate accounts and admins. This helped me create a workflow hierarchy connecting the two accounts. From here, I can identify the areas that need to have a tracking progress in place for each account type.

Working with data can be a monotonous task, which is why it's important to design the tool in a way that is motivating and easy to keep track of progress. Having the right tracking tools not only boosts team motivation but also creates a healthy competition that pushes individuals to reach their targets.

Key takeaway

Some of the challenges I have overcame while prioritising focused features for the MVP build:

YesCreated with Sketch.

Putting complicated requirements into simple task tickets. This helps to reduce cognitive load and shifts the user’s focus to completing a single task at a time.

YesCreated with Sketch.

Providing a granular level of required actions to allow users to have a clear understanding of what they will be doing by telling them exactly what needs to be done.

YesCreated with Sketch.

Incentivising users by encourage users to complete the task, but if they are unable to, provide the option to skip required actions or a whole task.

YesCreated with Sketch.

Creating a simple lexicon and structure with a consistent pattern from one task to another. Providing familiar visual cues, layout and copy throughout the flows.

YesCreated with Sketch.

Building the connection between the two account types and their workflow was crucial, as it was initially outlined as two separate CMS systems. This separation had the potential to cause a fragmented approval process.

Besides that, due to the time and budget restrain, multiple design ideas and iterations had to be deprioritised including these:

NoCreated with Sketch.

As mentioned above, associate users are likely to be working on a contract, but there is currently no designated space within the tool for them to track their incentives and earnings.

NoCreated with Sketch.

I had an idea for a task leaderboard, but during user research, it was mentioned as a potential source of additional pressure for users, which could adversely affect the quality of their work and therefore needed more studies.

NoCreated with Sketch.

There are still a lot of questions regarding manually finding information at the store level, which has been proven to be very time-consuming. However, it's currently beyond our capabilities to solve this issue.

03/Execution

Design system

Despite the project's tight design timeline, I make it a priority to allocate time within each sprint for developing the design system. This includes establishing a foundation for branding elements and component sticker sheets. This approach ensures consistent creation of design frames and minimises the time required for handoff to the development team.

Foundation

I prioritised cohesive visual elements such as color, typography, and spacing in the design system. By establishing a consistent color palette, thoughtful typography choices, and attention to spacing and layout guidelines, I enhanced the overall aesthetic appeal and user experience. This can help to deliver a polished and harmonious user interface.

Component sticker sheet

In the design system, each component will be created with careful attention to detail, including variants and usage guidelines, all organized in a sticker sheet format. The component sticker sheet not only accelerates the design process but also enables smooth collaboration with developers, leading to quicker implementation and a more cohesive user experience.

Visual highlights

Task ticket sidebar with breadcrumbs and requirements

As mentioned earlier, when associate users navigate to the transaction task tab, instead of overwhelming them with a long list of transaction IDs, the platform displays one task ticket at a time. To assist users in completing the task, I created a sidebar that showcases the requirements and tracks their progress, providing a clear overview of the necessary steps to be taken.

Content card modular

Cards provide users with a browsing experience similar to surveying a store shelf. They offer a quick and effortless way to scan and grasp the information they hold. Additionally, cards are highly adaptable to responsive design, as they can be rearranged to fit any screen size. This flexibility enables a cohesive visual language and ensures a consistent user experience across different device types.

Using card grid over list

Using a card grid layout in product design, instead of a traditional list, can minimise cognitive load and enhance visibility for users. The organised grid allows for easy scanning and priorities important information, improving the overall user experience and facilitating quick decision-making.

Conclusion

Simplifying design complexities is a prominent trend, particularly in consumer apps with straightforward objectives. However, when designing for enterprise products, it's not always possible or advisable to follow the same approach. In our project, we catered to a specific audience that prioritises functionality over aesthetics and has distinct goals.

Having a small and agile team let us move fast by finding a balance between design and technical considerations. We faced a number of challenges along the way, especially when it came to meeting industry regulations on a tight schedule. However, we were able to make significant improvements to the MVP that can greatly assist stakeholders in testing, learning, and creating a roadmap for the future.