UI revamp & design system
Track App
Background
Track (now Abound) is a web app that helps freelance workers calculate and submit their self-employment taxes.
This was a startup environment in San Francisco, where I was the sole designer working directly with 3 international developers, the CTO and the user support specialist. This full-time position spanned two years where I was responsible for: qualitative research, ideating, wireframing, prototyping, copywriting, testing and UI.
Problem
The original version of the app was cramped, hard to navigate and needed aesthetic improvement. It was only optimized for desktop and urgently needed a mobile-first redesign.
My role
I used rough sketches and direction provided by Track to inform the UI redesign across the entire product, optimizing for mobile and creating a design system of reusable components and styles along the way.
UI: Before & after
Home view
- The Home view was stripped down to display only the most relevant information: current tax withholdings amount, number of paychecks currently in need of tax withholding, and a high-level snapshot of the user’s current financial overview.
- The user can drill down into the app for secondary info like their full financial/tax breakdown.
- Users that just signed up will see the home view in its new-user state which provides an easy way for them to finish setting up their account while allowing them to explore before doing so.
Income view
- The Income view displays a list of cards representing individual deposits linked to a user’s bank account(s). Each card can be toggled as “Paycheck” (business income) or “Other” (non-business income).
- I created five different “Paycheck” card states that are visually distinct and scannable: needs tax withholding, transfer pending, already withheld, withholding error and withholding expired.
- The user can manually add their income if they do not want to link their bank account(s).
Expenses view
- The Expenses view displays a list of cards representing individual charges linked to a user’s bank account(s). Each card can be toggled as “Business” (business expense) or “Other” (non-business expense).
- I created two different “Business” card states that are visually distinct and scannable: mileage and business.
- The user can manually add their expenses if they do not want to link their bank account(s). All mileage must be added manually and cannot be toggled but can be deleted.
Tax payments view
- The Tax Payments view displays a list of cards representing individual tax payments made to the IRS by Track on behalf of the user.
- I created two different card states that are visually distinct and scannable: pending and submitted.
- The user can manually create and add a tax payment they might have made themselves outside of Track.
Design system
Check out the figma file
- I created the design system with all mobile-first components. Several key components were designed with responsive behavior built in to better fit larger screens.
- All components were created using Figma’s auto layout feature for speed and ease of use, as well as Figma’s component variants feature which allows for toggling of specific properties in order to find the desired component variant.
- I published all of the app’s components to a global component library on Figma.
Design tokens
- I worked with the developers to make design tokens that stored certain properties in order to create easily reusable styles in code, which they could apply to the components. This made sweeping changes fast and easy--for example, updating the primary branding color across all relevant components used throughout the app.
- Several design tokens mapped to Figma styles like color hexes or typographical properties.
- Many design tokens were created for properties not stored as Figma styles like border-radius or border-width.
