WordWallet—simplifying self-publishing

Overview

WordWallet is a mobile app providing insights and interactive tools for folks looking to self-publish their books. I designed it in two weeks for an "interaction mashup" project. I was asked to:

1) Combine two existing—and unrelated—brands in order to design a new, uniquely useful app.

2) Create a product video showcasing four micro-interactions (two from each "parent" app).

Scope

School (solo)

Date

Oct 2021 (2 weeks)

Tools

Figma, Google Slides, Premiere

Skills

Competitive analysis, interaction design, brand design, prototyping

Product demo

Process

My process fell into the following steps: 1) identifying and researching the parent apps, 2) designing my mashup app, and 3) creating the product demo(s).

THE PROBLEM

The problem—a mashup

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.

Webtoon & NerdWallet's context of use

So...what happens if financial goals and DIY storytelling have a baby?

Self-pub·lishing
verb
the process of publishing one's own work independently

Research, self-publishing

Excerpt from "A Beginner’s Guide to Self-Publishing Success"

Excerpt from "21 Things You Need to Know About Self-Publishing 2.0"

Excerpt from "How to Self-Publish a Book in 2022: 7 Steps to Bestselling Success"

"How to Self-Publish a Book in 2022: 7 Steps to Bestselling Success"

Quora response: "When reading a book, can you tell if it was self-published, and if so, does that matter to you?"

Quora response, "Is it difficult to self-publish?"

With my topic at hand, I set off to discover the problem(s). Self-publishing 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. However, 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

The solution—WordWallet

Wordwallet allows writers to:

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.

WordWallet's style guide

Wireframes

Splash screen

Home page wireframe

Example calculator wireframe

"Support" page wireframe

Articles (unfiltered) wireframe

I created my first batch wireframes, then iterated into the final prototype with a few changes to the flow, including:

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

- bigger text and adjusted, WCAG-complaint colors

- a re-designed 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 (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: