Case Study: Check Express

Simplifying check processing for busy nonprofits

Check express web app displayed in laptop and mobile phone Try it out





Journey Map


User Flows


Usability Testing


UI Design





Concept Design
Course project
July 2021-Feb 2022


UX Researcher
UX Designer
UI Designer


Figma logo
Optimal Sort icon
Optimal Sort
Usability hub icon
Usability Hub
Miro icon



I've spent the last four years processing incoming checks for nonprofits. It's slow tedious work, especially compared to its counterpart, ⚡️electronic payments⚡️.

One day I asked myself, “why am I hand-entering the same 9-digit check number into four different places. Does this have to take so long?" And with that, a challenge was born.

So I reached out to seven other administrative staff - from administrative assistants to CEOs - to hear their side of the check processing story.

User Interviews

View Full Analysis

Administrative roles had frustrations around how long check processing took and the physical and digital storage of the original check copies, while executive roles were more concerned about security and miscommunications between teams/roles in the process.


Businesses are lacking a centralized system for check communication, storage, and processing.


By creating web app that is flexible and interoperable with existing check processing tools and structures, staff time, miscommunication, and errors around processing checks will be lessened.

Why a web app?

A web app allows users to stick with their preferred programs, access it from any location, and from any device.

Competitive Analysis

During user interviews, participants named only a few of tools that are capable of integrating with each other. This leaves staff bouncing around from tool to tool to enter the same information.

I conducted a competitive analysis of multipurpose and interoperable business finance apps and didn't find a tool that allows businesses to manage their financial systems in one place.

From invoicing, to processing donations, to recording in donor databases, it seems that the market is lacking a one stop shop to streamline money processing and record keeping.

Competitive Analysis venn diagrams

Learning Moment

During this stage, I should have also looked at team task management apps to see how they solve communication and processing hold-ups with teams.

Convergent Thinking Cap

Up until this point, I was considering this evolving Check Express web app as a solution for incoming and outgoing check processes. These are two very different processes.

As I was the only one working on this concept project, I had a limited timeline to complete it, and I had primarily heard evidence of problems with processing incoming checks from others professionals, I determined the MVP would focus only on incoming check donations for nonprofits.

While the features in for outgoing check processing in the competitive analysis such as and quickbooks are not as relevant, the user interfaces of these established sites provide inspiration for visual layouts and patterns with which administrative professionals are familiar.

With the refined scope and a clear problem, I moved onto defining the target users.

Define Users


Based on user interview participants, four personas were created summarizing the roles and user needs involved in check processing at a variety of business types.

User Persona Meg: the founder

User Journey Map

To put ourselves in the shoes of the persona’s original check processing steps, I created a user journey map for each persona. This really put into perspective just how many steps, tools, and locations there are for processing one single check!

View Lola's User Journey
User Persona: Lola the rookie
User Persona: Ryan Numbers Guy
User Persona: Dave CFO


Task Analysis & User Flows

With previous user journeys identified, putting together a list of tasks started creating space to dream up each users new flow.

In the user flow below, Meg needs to easily input checks into Check Express. I needed to decide if she would be required to deposit the check while adding it to the app, or if there would be an option for her to deposit it at the bank (as she prefers) and mark it as deposited in the app. To keep "old schoolers" like Meg happy, I opted for the latter.

Click here to view larger

Add Check User Flow for Meg Persona

Site Map

Core features and traditional features like help, profile, etc. were arranged into a site map that evolved during the sketching process.
View site hierarchy

Core Features

• Add checks to app
• Deposit checks/Mark as deposited
• View added checks
• Link accounts
• Add checks to quickbooks
• Add checks to donor database
• Search for checks


For my paper prototyping process, I took apps that I enjoyed using and thought “how would my app look if it was like gmail?” or “what features and heuristics from quickbooks would be useful in my app?”

I started with a mobile-first approach to focus on the core functions. Then expanded to a larger screen size, as many office workers process checks on laptops and desktops.

Mobile and desktop version of approve added check info screen.

Early versions of "approve check info" screens

Moving from Low to Mid Fidelity

Below you can see how the existing user dashboard changes to tighten up navigation and make better use of screen space.

Existing user home page iterations


Usability Testing

After going through a series of low-fidelity designs, I created mid-fidelity prototypes for mobile and desktop versions of the app with about half of the core features built out. It was time to gather feedback from users through usability testing.

Mobile and desktop screen in mid-fidelity showing check ticket

Usability Test Plan

Moderated Remote View Test Script7 participants who served in nonprofit finance-related roles used the desktop prototype for testing, but had the option to use a mobile prototype during the adding check task.

Analysis Methods

Affinity mapping took place to group data into these main categories:
Observations | Positive quotes | Constructive quotes | Errors | Other Features

View Miro Board
A rainbow spreadsheet consolidated these groupings and was used to visually display how many participants had similar experiences.
 Errors were identified by severity with Neilson’s Error Rating Scale and the frequency users had similar experiences.

Objectives & Key Findings

  1. Objective #1: Observe participant's approach and ease to navigating the app and completing a series of tasks.

    • Generally, participants were pleased with the simple clear appearance of the design, and knew how to get started in the account and were able to swiftly navigate the through task.

    • A recurring issue was finding the “add check” floating action button and using it as intended.

  2. Objective #2: Observe participant's approach and ease to navigating the app and completing a series of tasks.

    • 3/7 participants noted that the check number and date [which were not included in the design] are key identifiers when looking through checks.

  3. Objective #3: Determine which form(s) of adding checks is/are most common and through which device.

    • Of the 7 participants, at least 2 choose each of the 3 available forms adding checks.

Refining the Design

Using the prioritized list of changes from usability testing analysis. I redesigned the problem areas and then conducted preference tests of three before and after screens. Below is one example of these changes.

When asked to add a check, participants were clicking the "2. Add Checks" button on the right column instead of the + floating action button (FAB) on the bottom. In the updated design, I made the right "Getting Started" sections tabs to better show their purpose.

Original - New User Dashboard

Mid fidelity desktop original

Updated - New User Dashboard

Mid fidelity desktop original, updated

Learning Moment

At this point, I really thought having the FAB on the bottom left was sleek and intuitive, and that the above fix would work. Pretty soon after this redesign, I realized I really needed to listen to users who asked what the + FAB did. Adding a check is a key function of this app and needs to be clear, so in future designs I replaced it with a primary button on the navigation bar.

This has taught me to listen to users feedback from the get-go and to take what I think is "neat" with a grain of salt.

Design Continued

UI Design

When moving to high fidelity, I used Material Design 3 as my starting design guide. I kept in mind feedback from usability testing when creating the style guide, noted below.

Persona: Young woman holding coffee

”I picture the check marks being green. That would be so satisfying!”

Persona: Older man holding laptop

“Clean, very easy to look at. Not confusing in that sense.”


Shades of blue


Blues convey trustworthiness, confidence, and are calming. With a finance web app, we want to use color to convey that we are a reliable business that customers can trust with their valuable information.

shades of green


Green works on many levels for Check Express. First in America, it is a color that one relates with finance. It is also seen as secure/safe color. Additionally, when used in the right context it is a color that validates behavior, such as a green check mark.

View Style guide
Finished new user dashboardFinished add check screenfinished check ticketfinished existing user dashboardView Desktop Prototype


Current Status

Check Express has many established features in high fidelity prototypes, but is still lacking designs two primary features: add to quickbooks and add to donor database. Without a fully developed product it is challenging to say how well Check Express addresses the user check processing problems in a real-world context. Through usability testing we did find that users were mostly able to navigate the existing features smoothly with very few errors.

Constraints - Ask Developer

Future: Add Quickbooks + Database Integration

1. Consult developer and research competitors.
2. Design mid fidelity prototypes for these features.
3. Conduct usability testing and analyze.
4. Improve design and convert to high fidelity.
5. Test with check processing team.

Thanks for taking a look!

Back to top