During my time at Recko, a fast-scaling fintech startup now acquired by Stripe, I worked on a bunch of interesting and complex experiences. This included approval flows, transaction lifecycle search and a wholesome analytical dashboard used to track payment reconciliations. This is a case study of how we designed the dashboard which was shipped in early 2020. 

ROLE

Product design, Data visualization, Research

TEAM

Solo designer, 3 engineers

DURATION

Nov '19 - Jan'20

Understanding Recko

Recko is a SaaS-based transaction management platform that enables AI-Powered reconciliation of digital transactions & keeps track of the complete transaction lifecycle for organisations. 

The

Dashboard

The idea behind building a dashboard was to give our customers an overview of the health of their payment transactions, and give them insights to dive deeper.

The design process

Use cases

Wearing PM hat to define use cases

In the absence of a dedicated PM, I started out by identifying the necessary use cases that would go into building the dashboard. We then rated these uses cases on impact and frequency of use to finalize them. During this process, we also involved our users and internal business analysts who worked closely with them. 

1. Identifying use cases 

Analyzing recon lifecycle

We analyzed the entire payment lifecycle workflow and pulled out all possible data points of interest. 

Studying user recon files

Studied spreadsheet files that users used for reconciliation to identify potential use cases. We also scouted use cases from user activity logs. 

Looking at best practices

Some use cases were preemptively defined from our end as best practices.  We nonetheless validated them with customers.

User recon lifecycle

2. Rating and finalizing the use cases 

After identifying all possible use cases, we devised some parameters that would help us narrow down key use cases to show on the dashboard — Frequency of use and Impact. We later also matched the finalized use cases with the potential visualization treatment it should receive, which was further explored in the design iterations. 

User Research

Co-designing with customers

We conducted a user research study with users to understand their KPIs and prioritize our use cases. We did this using a design probe where we asked them to build their own dashboard using paper cutouts of the visualizations. The users were asked to think aloud while doing so and were asked follow-up questions. We later asked them to rate the individual visualizations. Using a design probe here greatly elevated the discussion and helped us maximize our time with users. 

Secondary research 

A comprehensive audit of other dashboards ranging across fintech and otherwise to learn about the following: 

1. Hierarchy of content
2. Actions
3. View for detailed reports
4. Viz types and views

Designing the Viz

We scrabbled through many iterations using pen paper as well as digital mediums to finalize the vizzes. We relied on internal validation from the team to eventually narrow down from a range of iterations. An important step for us here was also to validate the visualizations with real data. 

1. Pen, paper and pixels

Early sketches

Early mocks

Final mocks

2. Testing with real data 

An important part of the iteration process was to validate the iterated viz forms with real data. I used Tableau to play with a variety of real data sets from different orgs to test the fittingness of the proposed visualizations. 

3. Visual design 

The typography and UI components used in the dashboard were borrowed from our existing design system. The one segment that was missing was a definitive colour palette for the dashboard. We worked on converting our product brand colours into a viz appropriate colour palette so that the final dashboard appeared cohesive and seamless.

Final

Design

The final step was putting together all the individual sections together in the dashboard. Every dashboard tells a narrative and our's was a function of impact as well as the frequency of view of its visualizations.