Case Study: Check Express
Simplifying check processing for busy nonprofits
Try it out Process
DesignUser Flows
Wireframes
Prototyping
TestUsability Testing
Findings
NextStatus
Constraints
Future
Overview
Scope
Concept Design
Course project
July 2021-Feb 2022
Roles
UX Researcher
UX Designer
UI Designer
Tools
Figma
Optimal Sort
Usability Hub
Miro
Discover
Background
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.
Between one person and five people could have a hand in processing a single check from start to finish.
Errors and delays often happen when exchanging of check information between these different roles.
Executives felt that having more people involved was important for fraud prevention, even though it can lead to more errors and delays.
Problem
Businesses are lacking a centralized system for check communication, storage, and processing.
Hypothesis
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.
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 bill.com 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
Personas
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 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 JourneyDesign
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.
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
Sketches
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.
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.
Test
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.
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
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.
Objective #2: Observe participant's approach and ease to navigating the app and completing a series of tasks.
Objective #3: Determine which form(s) of adding checks is/are most common and through which device.
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
Updated - New User Dashboard
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.
”I picture the check marks being green. That would be so satisfying!”
“Clean, very easy to look at. Not confusing in that sense.”
SATISFYING CLEAN CLEAR FAMILIAR EASY
Blues
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.
Greens
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 Desktop PrototypeConclusion
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
Taking photos with a mobile camera in a web app
Best methods for cropping uploaded images to check
AI image to text technology that converts PDFs and image files to text fields
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.
.png)
