Custom categories—tracking transactions the user's way 

Overview

I arrived at NerdWallet a blank slate. Not only was this my first foray into content design, but I was also NerdWallet's first ever UX content strategy intern. In late June, my mentor introduced me to my second project: custom categories. Users of NerdWallet’s cash flow vertical — i.e., a set of features allowing users to link their bank accounts, loans, credit cards, and more in one place — had long-requested this feature. I was tasked with helping bring it to them.

Scope

Internship

Date

June-July 2021 (four weeks)

Tools 

Figma, Google Sheets

Skills 

Competitive analysis, information architecture, wireframing, UX writing

Frame 55.png

Process

My process fell into the following stages: A) performing a competitive analysis, B) collaborating on wireframes, and C) drafting each screen's copy.

Competitive analysis

The two apps I chose to combine were Webtoon and NerdWallet, a comic publisher and a fintech company. Webtoon encourages its users to both read and create comics; this support-your-own, DIY vibe is what makes the app so appealing. NerdWallet provides financial tools and recommendations from the POV of a "nerdy" friend.

 
web.JPG

Webtoon & NerdWallet's context of use

Research, self-publishing

With my topic at hand, I set off to discover the problem(s). Self-publishing, it turns out, is a tough business; it democratizes publishing only in theory, as there's little to no *free* support for those looking to give it a try. I found a pretty even split between monetary concerns and doubts about folks' own capabilities. It became clear to me that my app couldn't be all about the money—nor all about the process.

Problem Statement

How might we guide writers through the self-publishing process so that they achieve publication in the most equitable and stress-free manner possible?

In my research, I saw people from all walks of life share the same goals and obstacles when it came to self-publishing. Most of them seemed to be unpublished writers barely dipping their toes into the industry. There was no publisher or literary agent. They were standing alone on the path towards self-publishing—or further back, at the crossroads between it and traditional publishing.

Provisional personas for the mashup app

 

The solution—WordWallet

Wordwallet combines Webtoon's publishing tools with NerdWallet's financial guidance, supporting writers' self-publication goals as they:

 

1) Get quotes for certain services within the self-publishing process—e.g., printing, cover design, editing—through interactive calculators and roundups.

 

2) Browse articles on certain processes (e.g., designing cover art) or professions (e.g., hiring a cover artist).


3) Crowdfund and share updates about writing projects, finding support in a community of like-minded writers.

Style guide

The positive, straightforward, and casual qualities of NerdWallet's voice carried over into WordWallet. (After all, like NerdWallet, my app would untangle tricky concepts and explain them.) When it came to color, I leaned into Webtoon's visual design, adding shades of brown to achieve a papery, book-like feel. 

Style Guide.png

WordWallet's style guide

Wireframes

App Open.png
Home1.png
Plus Tap2.png
How-Tos3.png
Donate4.png

Splash screen 

Home page wireframe

Example calculator wireframe

"Support" page wireframe

Articles (unfiltered) wireframe

Since we were on a time crunch, I dove into my wireframes with full color, designing five screens: 1) a splash screen for the logo, 2) the homepage, 3) an example calculator for book printing, 4) the landing page for articles, and 5) the crowdfunding hub. After receiving feedback in class, I made some changes to the flow:

  • Added two new screens, one showing the landing page for calculators and the other showing an example project that the user "subscribes" to. 

  • Made the text bigger and adjusted the colors for accessibility purposes.

  • Re-designed the tab bar for a less distracting look.

Prototype

Final prototype

I also made a few content design changes:

1) Renamed the labels on the tab bar after some eye-opening user-testing (e.g., my tester thought "Learn" referred to learning how to use the app, not learning about self-publishing). Learn became Read, as I felt this best gave the impression of consuming article-like content. Support became Join, which is a bit more active while still hinting at the feature's role as a community-builder. 

 

2) Changed the header for the Support/Join feature to Writer's Desk. This gives a name to said community and implies that the projects shared there are works in progress (a desk, not a bookshelf). 


3) Axed the message [COVER ART NOT YET AVAILABLE] as it felt clunky and robotlike; now, it reads [No cover art yet].

 

4) Made Book Printing Calculator sentence case to match the other page headers (with the exception of Writer's Desk, which is a proper noun).

 

You can interact with the final prototype here
 

Onboarding

Next, I needed to design a first-time user (or onboarding) experience for WordWallet. This not only included a sign-up process, but also a way of introducing features to new users and giving them a reason to stick around.

 

In class, I interviewed a target user, determining her motivations, inclinations (with regards to being prompted to act), and ability to navigate WordWallet comfortably (via a usability test). The results—paired with my previous secondary research—allowed me to construct a slide deck of considerations:

 

Usability test & considerations for an onboarding experience (via the Hook Model)

From there, I designed the flow:

 

Android - 1.png
Android - 2.png
Android - 3.png
Android - 4.png
Android - 5.png
Android - 6.png

Onboarding wireframes

Onboarding prototype

I also created a demo for this flow, though you'll notice a few changes between that version of the experience and the version seen above. For example, I nullified the CTA on the Writer's Desk page; it can't be unlocked until after the user has verified their email, so it was a bit misleading to have the CTA active.

 

Interact with the final prototype here. 

 

Onboarding demo

Happily ever after...?

In only two weeks, I plotted the micro-interactions, brand design, information architecture, context of use, first-time user experience, and more of an app I think might actually be able to make it in the world. With more time, I would push the content of my app. What do individual articles look like? What happens when you tap the "+" on the Writer's Desk page? Where do saved articles go? What kinds of things can you change about your profile? How do users communicate with one another? How does WordWallet combat plagiarism? I'm eager to return to this app idea in the future—perhaps when I'm in a position to really do something with it.