In 2022 I was hired by Tactic, a startup building cryptocurrency accounting software. Shortly after I joined, the company was acquired by Taxbit, which was looking to add it alongside their existing cryptocurrency tax offering.

I was tasked with redesigning the accounting product to fit with the rest of the company's brand identity. This required integrating it with Cosmic, Taxbit's internal design system. This was an opportunity to take existing functionality and present it in a clearer way.

Transactions

The transactions page presents the most intricate and extensively utilized area, encompassing all activities pertaining to the user’s connected wallets and exchanges. Given the information density of this table, I aimed to display the data and relevant actions in an easily-digestible manner.

The existing UI made use of the full screen width to display the transactions table, allowing it to include more columns per row. As such, it had two columns for the counterparties and two for the amounts on either side of the transaction. The legacy table also supported expandable rows to display nested transactions.

Redesigning this page using Cosmic components resulted in an inefficient use of space, causing key elements to be hidden on initial load.

To address this, I combined the columns to regain horizontal spacing, resulting in the Out / From and In / To columns to denote the movement of assets. I also wanted to achieve feature parity with the legacy UI so I implemented expandable row functionality in the Cosmic table which is built using the TanStack Table library.

Due to strict accessibility requirements for certain clients, the filter bar in the legacy UI had to be replaced with a drawer. This pattern is repeated throughout the application.

Dashboard

This page provides an overview of the user's financial activity over time with functionality to filter the charts and tables by date range, source, and asset. The stat cards at the top highlight overall market performance while the section below shows more granular data with the ability to filter by asset, source, and date range.

I updated the chart component to plot two values and show the difference between them. The chart is implemented using the recharts library and is rendered entirely as an svg element. In order to color the area between the two lines, I calculated the points of intersection between them as percentages of the total chart then applied a fill to the areas delineated by those intersections.

Sources

I adapted the legacy sources page to group sources by their type, utilizing an expandable row to show all connected sources of that type. This allowed me to surface aggregate data for blockchains and exchanges while nesting individual wallet and exchange account information in the expanded rows.