Creating the first Moov wallet @ Moov Financial

About Moov

Moov is financial software startup, backed by a16z + Bain Capital Ventures. Built by and for developers, the Moov API allows customers to issue, store, accept, and disburse all on a single platform, rather than the current norm of stitching together multiple vendors just to move money. With direct connections to the card brands, The Clearing House, & the Fed, Moov is an all-in-one modern acquirer processor, issuing processor, & program manager.

Selected case study

Wallet & Ledger

Design timeline
About 3 weeks

Role
Lead designer

Team
Two PMs and seven
engineers (2 FE, 5 BE)

Outcome
Wallet launched in October 2022

Moov’s customers

Moov’s customers are businesses who build their payments on Moov, facilitating money movement using Moov’s API, and customers of those businesses, who are moving money through that business’s platform. Users of the Moov Dashboard platform are support personal (including Moov’s support team), financial stakeholders or engineers building payments into their product.

What’s a Moov wallet?

Every business using Moov has a Moov wallet. This functions similar to a bank account or PayPal balance. Customers can top-up their wallet, cash out, and use the funds to facilitate payments. Their wallet is also where they will collect fees on their merchants’ transfers (money movement).

The Problem

Customers can currently see their wallet balance and can cash out or add funds. However, they can’t see any detail on why their balance is going up or down. It would be like seeing your Venmo balance but having no idea who paid you or which person you paid!

Constraints

This was a greenfield project so there were a lot of unknowns and a lot of “figuring it out along the way.” I was also constrained by the backend team’s timeline - we wanted to ensure that designs were ready to be built on the frontend as soon as the backend was done. Designing for both light and dark mode was also an added layer of complexity.

Introducing new data

Transactions affect a customer’s wallet balance. These can be fees they collect on money their merchants move or on card issuing transactions. They can also be refunds, payments, wallet top-ups, etc. In fact, this project introduced 16 new transaction types.

Not only did customers need to see their transaction list, but also the type of transaction.

We also needed to show pending vs completed transactions so customers knew how their final wallet balance was being affected.

Backend mapping

In addition to the list, we also wanted to show customers a transaction detail which would essentially show them where the transaction came from and any fee breakdown that would provide information on gross + net differences.

Updating the current wallet widget

The wallet widget was the first thing customers saw on their Dashboard Overview. Since this project was coinciding with brand updates, I needed to give the widget a small update to include visual changes and additional navigation to the new wallet page.

Ultimately, I went for a simple approach with this update. I didn’t want to alter the current widget drastically because of the time constraints on this project.

Establishing navigation to the wallet page

As a product team, we decided because Wallet was an important part of the Dashboard experience it should be a top level navigation item.

Sidebar navigation in the Dashboard

Problems & decisions

The PM and I got together with our frontend engineers and discussed the feasibility of having two separate tables for pending and completed transactions. We wanted a way to differentiate the two, but decided this was not going to work because:

  • On average, the daily “pending” transactions could be in the hundreds or thousands

  • If a customer is searching for a transaction, they won’t know if it’s completed or pending - wasn’t in scope to build out a global search so users needed to be able to filter + search all transactions in the table.

Mid-fidelity screens pulled into FigJam for easy note-taking with engineers.

Final designs

Dashboard Wallet Widget

Wallet page & filtering

Transaction detail modal

Introducing the wallet was key in winning new business.

In a more perfect world, our team's collaboration would have included more user insights or interviews. The lack of real user input before launch is something I saw as a bit of a flaw in the process, but I was proud of what we built despite this.

See more on Moov’s website
Read the documentation

Being able to sell the wallet capability unlocked the opportunity to partner with a whole new market of potential customers who required a way to store funds for their use cases. Our existing customers were super pleased that they could now self-serve transaction management from the Dashboard.

Other notable work at Moov

  • Capabilities, Risk, & Underwriting

    Lead designer across multiple features
    Read the docs↗️
    While at Moov, I led designs for internal and customer-facing tools, including account management, capabilities enablement, and risk and underwriting tools. Collaborating closely with the Director of Risk Operations, I gained a comprehensive understanding of Moov’s Capabilities API and account verification for financial capabilities.

  • Transfer groups

    Lead designer | One PM, 7 Engineers
    Transfer groups blog post↗
    Complex money movement made simple. This feature established a child/parent relationship between money transfers, allowing developers to associate multiple transfers together and run them sequentially. Design work required a deep understanding of backend infrastructure in order to translate events into a simple timeline for Dashboard users.

  • Disputes

    Lead designer | 2 PMs, 5 engineers
    Read the API docs↗️
    A cross-functional effort to add disputes UI to the dashboard so businesses and Moov personnel could manage card disputes lifecycles and statuses. Required a deep understanding of how card networks manage disputes, the dispute lifecycle, and events triggering each dispute status in order to translate this into easy-to-read UI for Dashboard users.

  • Moov Drops: Embeddable UI

    Lead designer
| VP of Product, 2 engineers
    Read the blog post I wrote↗️


    Moov Drops are pre-built, embeddable UI components that save countless design and development hours. Drops empower customers to launch secure onboarding and payments in minutes instead of months. I designed and launched 4 initial drops - onboarding, payment methods, credit card link, and card issuing, along with a comprehensive theme library.

  • "Drop themes are still one of my favorite things I've worked on at Moov. So simple, so flexible. All thanks to Morgan's attention to detail 💪"

    Frontend Developer, Moov

  • "Kicked off exploration of an embedded onboarding flow with Morgan and it looks KILLER (her doing, not mine)."

    VP of Product, Moov

  • Thanks for making our clients happy, Morgan!

    CEO & Founder, Moov