Custom spending categories—tracking transactions the user's way
Overview
Users of NerdWallet’s cash flow vertical — i.e., a hub that tracks and categorizes transactions across multiple bank accounts, cards, loans, etc— had long requested a new feature: custom spending categories.
Users would be able to sort their transactions into categories they named, as opposed to preexisting categories like transportation, shopping, and insurance. I was tasked with designing the content around and within these custom categories.
Scope
Nerdling (internship) project
Date
June-July 2021 (4 weeks)
Tools
Figma, Google Sheets
Skills
Competitive analysis, information architecture, wireframing, UX writing
Process
In a kickoff meeting with engineers, a PM, a UX researcher, my mentor, and the UX designer I'd be collaborating with 1:1, I learned that engineering could currently only support the creation of two custom categories per user. Ever-vigilant, the UX researcher jumped in with a bid to smooth over any potential blowback from users, tasking me with choosing a few additional categories from a list of their requests.
My final process fell into the following steps: 1) performing a competitive analysis and choosing the additional categories, 2) collaborating on wireframes, and 3) writing and documenting the new flow's copy.
Competitive analysis
Many of NerdWallet's competitors—specifically Truebill, Personal Capital, Mint, Albert, and Simplifi—already had custom categories in their own cash flow experiences. My UX design partner and I took advantage of this, screenshotting multiple mobile flows for each (except Mint, who only had this feature in web at the time) and annotating them.
The competitive analysis
This work led to some useful insights:
- Some competitors used customizable "tags" to scratch the custom categories itch (e.g., a transaction falls into the Travel category, but the user can also tag it as "Disneyland 2022"). However, these tags were, by nature, supplementary, requiring a parent category.
- The number of existing categories in each competitor's cash flow feature varied a lot, ranging from thirty to over seventy. The number of custom categories allotted to each user also varied.
- Almost all of the competitors asked users to attach their custom categories to other labels, like Type, Tag, or Sub-category, which often led to confusing and contradictory information architecture.
My thought process around the additional categories
Choosing additional categories
I picked six categories from a spreadsheet of almost two dozen user requests—paying special attention to the categories' popularity with users, relevance to NerdWallet's main personas, potential frequency of use, and presence in competitor cash flow experiences.
Puzzling over Subscriptions and Home improvement, I reasoned that the already existing Entertainment option could cover subscriptions, and hopefully we'd soon have custom categories to track home improvements if/when the need arose. I dropped both in the end, making my finals picks: Donations, Childcare, Insurance, and Pets.
Ideation and wireframing
My mentor, UX design partner, and I all hopped on a Zoom call to realize our ideas for the main flows in question: "add custom category" and "edit custom category." Naturally, design questions popped up left and right—most of which were left for me to answer as part of my learning. For example:
Q: Should custom categories show up at the top or bottom of the screen? (AKA, how much do we want to surface this feature?)
A: The top. Since we're also adding more categories, custom categories would sit far beneath the fold if left at the bottom; this could frustrate users who create custom categories for a recurring use. Having them at the bottom would also lead to a cluster of CTAs, as the screen's main and secondary CTAs are sticky.
Q: Existing categories each have an icon. What will/should appear for custom categories?
A: According to engineering, it's possible to add a handful of new icons that users can apply to their custom categories. Doing so would give each custom category a visual identity more specific to what the user is creating it for (as opposed to an awkward white space where the icon is absent or a generic symbol representing all custom categories).
(You can see more of this design thinking in the images below—the non-bolded text next to the Figma frames is mine.)
Our hi-fidelity wireframes
UX writing
We ran into a ton of content questions too (especially in the last image of the carousel above), but at that point, it was time for me to fly solo.
Tackling the constraint problem, part 1
I decided that it'd be best to tell users about the two-custom-category-constraint 1) as soon as possible and 2) in an obvious way—because this detail could impact what users decide to use their custom categories for.
As I drafted the copy, I ran with a spirit of opportunity, playing around with words like add, can, and up to. It was important to remind users of the freedom these custom categories would bring as a feature even if they were limited in use—and even while I was defining that limit in the copy.
I came up with five variants, iterating the three that my content design coworkers favored in our weekly feedback session.
Variants, "add custom category"
Some notes on the two variants that weren't iterated:
- "Up to two new categories, custom-made": This copy sounds more like a headline than helper text. Although it fits in the constraint, it doesn't engage the user or prompt an interaction.
- "You can add up to two of these—nothing's too random": "Of these" is redundant given the bolded header describing what "these" are. "Nothing's too random" could come off as condescending since users requested custom categories out of a dissatisfaction with the existing categories.
I chose "What'll it be? You can add up to two" as my final copy. It's the most conversational (as it doesn't sound like it's trying to sell something) but still frames the constraint as an open-ended question, an opportunity. It's also a single sentence, which my content design coworkers preferred visually.
Tackling the constraint problem, part 2
But what happens when both custom categories are created, leaving zero left? My UX design partner encouraged me to think past two categories, as engineering could expand that number in the future.
I started with the first frame on the left, but the copy felt too curt for NerdWallet's personality. Also, depending on the load time, the user could miss the copy altogether. In my second variant, I split the messaging into two screens: 1) addressing the load time and 2) the number of custom categories remaining, (e.g., none).
Variants, "how many custom categories left"
Copy doc and final UI
I documented this work using NerdWallet's in-house copy doc template. It's organized in a way that maps onto the backend pretty closely, even playing into if/then statements through its focus on the conditions (see column D) under which each string would appear in the code.
The custom categories copy doc (hosted in Google Sheets) and final UI
That's a wrap!
Through this project, I gained a slew of new experiences—collaborating with UX research and other departments as a content designer, creating an engineering-ready copy doc, presenting copy variants to a team, etc—and successfully applied both my interaction design and content design skill sets. Not bad for a Nerdling!