Signup & onboarding

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

Potential users were consistently dropping off early in the signup process, and some had given feedback that the product asked for too much personal information during signup.

My role

Identify points of friction in the signup flow and optimize it to improve conversion.

My process: first stages

Design audit

I audited the existing signup flow to identify areas for improvement. I noticed the flow consisted of many steps/screens, some of which asked for sensitive information like ssn and bank account linking. It also seemed like the flow consisted of both the signup and onboarding experience, and felt overwhelming.



Present to stakeholders

After discussing solutions with internal stakeholders, we agreed that the signup flow needed to be simplified as much as possible while still collecting the minimum amount of data (outside of login credentials) required upon signup by AARP Foundation, who was funding the project. It was also agreed that onboarding would be a separate experience.



Exploration

I made some wireframes to get my ideas out fast and play around. After choosing a direction, I made a flowchart for the new signup flow so I could document all states and scenarios for reference when creating the views later.

Prototyping and testing

I fleshed out the wireframes and used those to make screen flows and a clickable prototype in Figma. I tested the flow internally and with peers.



Results

There were 2 main insights that arose from testing:



1. Some people expressed confusion around who to count as “members of the household.”



2. Some people expressed confusion and slight suspicion at being asked if their household made more than a certain amount of income last year.

Distillation & takeaway

First, I needed to communicate to the user exactly what constitutes a “household member” per the IRS. Then, I needed to make users feel at ease when answering the question about household income.



The views with questions collecting info like: birthday, type of employment, household member info and yearly income info were specifically required to be in the login flow for AARP Foundation’s data collection purposes and could not be excluded.

Final deliverables

In the end, I added a tip on the “household members” view explaining exactly who counts as a household member per the IRS. I also added a lock icon and some copy explaining how we encrypt user’s data to keep it safe on the “household income” view. This way, we could reassure the user that their sensitive information is being safely secured, without having to touch on why we need that info since it was explicitly for AARPF’s data collection (to see if a user’s household constituted as “low-income”).



I created high-fidelity mockups and screen flows in Figma as the final deliverable.

Bonus: New onboarding experience

The new onboarding flow was developed similarly: audit, present, explore, test and iterate as needed.



In the new flow, users that completed signup will see the home view in a new-user state displaying a “Setup Progress” card. This way, users can explore and play around in the app to get a feel for how things work right away after signing up with minimal friction.



Once a user decides to commit to the app, they can onboard via this card where they will be asked for more sensitive and time-consuming info required for full account functionality. They can also take a break during setup at any time and have their progress saved, then resume when they’re ready.

Onboarding in 3 parts

The “Setup Progress” card splits account setup into three flows:



1. Specifying how you want your taxes withheld

2. Linking your bank account via Plaid so the app can display your bank transactions (this step can be skipped in favor of manual transaction creation if desired)

3. Opening a tax withholdings account and selecting a payment method for those withholdings

Responsive design

Implementation

I worked directly with the developers to implement my designs, then helped QA before pushing to production.

Next: UI revamp & design system