Custom 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
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, we were given the constraint that engineering could currently only support the creation of two custom categories max per user. The UX researcher also asked me to choose a few additional categories from a list of users' 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 (specifically "thrivers"), potential frequency of use, and presence in competitor cash flow experiences.
I puzzled over Subscriptions and Home improvement. 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 ended up dropping both, a decision that the UX researcher agreed with. My final picks became 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.)
The hi-fidelity wireframes
We ran into a ton of content questions as well (especially in the last image of the carousel above), but at that point, it was time for me to fly solo.
UX writing
Although my first project at NerdWallet immersed me deeply in the style guide, I still lacked an understanding of where NerdWallet's voice sat in the competitive landscape. This would impact the language I used in the custom categories flow.
So, my first order of business was to go through our competitive analysis again, picking out little mannerisms in the competitors' copy and comparing them to NerdWallet's. I created two copy matrices (on the right) to help me visualize the differences.
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.
The question now was how. How could I make this constraint on the user feel like an opportunity? Ultimately, I ran with that 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're limited in use—and even while I'm defining that limit in the copy.
Ultimately, 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
Ultimately, 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. The spreadsheet format was a bit mind-boggling at first—it's organized in a way that maps onto the backend pretty closely, even playing into if/then statements—but with some guidance, I recorded all of my copy and even 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
Takeaways
Through this project, I gained a slew of new professional experiences—collaborating with UX research and design 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.