Managing Payments on the Go

Dashboard Story Mapping

The dashboard was a brand-new feature that didn't exist on the web version of the platform. This addition was crucial for enabling users to manage payments on the go. We conducted a story mapping session with stakeholders to identify MVP features and functions for the initial release. During this session, we defined goals, activities, and user stories, and facilitated voting to prioritize must-haves, should-haves, could-haves, and won't-haves.

Release 1.0

To empower users to manage their finances seamlessly without being tied to a desktop, we identified key features for managing, tracking, and sending payments on the go:
  • Data Visualization: Real-time cashflow outlook, showcasing available cash and credit.
  • Approvals: Streamlined approval process for incoming payment requests, enabling users to approve or reject with ease.
  • Repeat Payments: Quick access to frequently used vendors, allowing for effortless repeat payments.
  • Payment Activity: Comprehensive view of paid, scheduled, and draft payments, with options to see totals weekly, bi-weekly, or monthly.

Managing Payments on the Go

Dashboard Wireframing & UI

Using the insights gained from the story mapping session, we meticulously wireframed the home/dashboard screen, ensuring that it addressed all user needs and business goals. After obtaining approval, we proceeded to design the screen, focusing on creating a visually appealing and highly functional user interface.

Managing payments on the go

Linking Cards & Cash on the Dashboard

We developed an onboarding checklist to enable users to fully leverage the dashboard's insights. This guided user flow walks them through connecting their credit cards and bank accounts via Plaid. By completing these steps, users gain a populated dashboard offering real-time visibility into their business's cash flow.

Confusing Fees

Auditing the Fee Structure

To provide transparency on currency conversion, fees, and discounts, we first needed to understand the various fees associated with each payment type: CHECK, WIRE, and ACH. Conflicting documentation across the platform necessitated a unified source of truth. We assessed the payment methods, whether CREDIT CARD, BANK, or FINANCE. Additionally, we factored in expedited payments and international transactions, integrating further calculations to provide users with accurate conversion rates. This feature ensures that users can see both what the vendor is being paid in their foreign currency and what the business is paying in their local currency.

Old fee structure that was confusing and lacked clarity on exchange rate.

Fee structure mapped out

Discounts mapped out

I collaborated with multiple teams to compile a comprehensive list of all applicable discounts as there was no documentation for fees.

Confusing Fees

Fees & Discounts Component

I translated our learnings from the fee structure exercise into a visual design framework. By breaking down the fee component into header, footer, and content variants, I created modular elements that could be easily stacked using auto-layout. This approach ensured consistency and flexibility, allowing for seamless integration and clear presentation of fee details across the platform.

Fees & discounts applied to designs

Collapsed International WIRE
Expanded International WIRE
Expanded CHECK w/discount
Expanded Expedited ACH
Real-Time Payment Tracking

Mobile-Friendly Payment Tracker

This tracker provided users with real-time updates on their payment status, enhancing transparency and reducing uncertainty.

Check
ACH & WIRE
New Features

Invoice Capture

Invoice capture enables users to simply snap a photo of their invoice, which the app then automatically crops and attaches to the corresponding bill. Users can easily add multiple invoices to a single bill for streamlined management.

New Features

Edit, Save or Delete Draft

The draft capabilities allow users to begin entering payment information and save their progress to complete at a later time, ensuring flexibility and convenience in managing their transactions.

New Features

Add Card with OCR

The integration of OCR allows users to scan their card, automatically inputting the information into their device for a seamless and efficient experience. The card image API then pulls in an image of the card, enabling quick and easy recognition.

Onboarding & Engagement

Welcome Screens in Onboarding Flows

Welcome screens are the initial touchpoint in an app's onboarding flow, serving as the user's first introduction to the app. These screens are designed to create a positive first impression, set the tone, and convey the app's core value proposition.

Purpose of Welcome Screens:

  1. Initial Engagement: Welcome screens capture the user's attention and provide a warm introduction to the app. This initial engagement helps in setting a friendly and approachable tone.
  2. Value Proposition: They briefly highlight the key benefits and unique selling points of the app, ensuring that users understand why the app is valuable to them right from the start.
  3. Branding: These screens often incorporate the app's branding elements, such as logos, colors, and taglines, reinforcing brand identity and creating a cohesive visual experience.
  4. User Guidance: Welcome screens can also provide a glimpse of what to expect in the onboarding process, preparing users for the steps ahead and ensuring they know what to do next.

By effectively utilizing welcome screens, apps can make a strong, positive first impression, guiding users smoothly into the rest of the onboarding flow and setting the stage for a successful user experience.

By effectively utilizing welcome screens, apps can make a strong, positive first impression, guiding users smoothly into the rest of the onboarding flow and setting the stage for a successful user experience.

Onboarding & Engagement

Dashboard Guided Tour

We implemented a guided tour of the dashboard to familiarize users with its features and functions. This step-by-step walkthrough highlights key areas and capabilities, ensuring users can quickly understand and utilize the dashboard's full potential for managing their business's cash flow efficiently.

View IxD Prototypes
Impact & Outcomes

High App Store Ratings & Revenue Success

Within a few months of launching the app in 2022, we achieved significant milestones, including $12M in monthly payments within months and high app store ratings (iOS 4.9★, Android 4.4★). The following sections detail the transformative impact and outcomes driven by our design system implementation.

Impact & Outcomes

Awards & Recognition

The app was recognized in the Capterra Shortlist 2023, Fast Company World Changing Ideas, and Forbes 2020 FinTech 50.

Impact & Outcomes

Athena Mobile DSM

By implementing the Plastiq design system, we achieved a cohesive, efficient, and scalable design process that not only improved the product's quality and user experience but also drove significant operational efficiencies and cost savings.

"I had the pleasure of working with Shelly at Plastiq as well as The Walt Disney Company. I recommended her to Plastiq after I arrived because of her strong work ethic and her unique ability to get the job done. There are very few designers that can match her quality of work and volume. She is a great co-worker and has a great personality, someone that makes the work day enjoyable. Shelly has been a critical piece to our teams and has spearheaded many critical company initiatives. She navigates ambiguity with grace and resolve. A true problem solver and professional. I enjoyed every moment that I worked with her."

– Omar Tavarez, Product Design Lead, Design Systems and Plastiq Connect

Hey

Let's chat about your next project.