CSI

Corporate Spending Innovations

This high-growth B2B fintech company is used by thousands of corporate clients globally to issue vendor bill payments with virtual cards. They asked Mayday to design and build a new dashboard experience that visualizes payment data and offers guidance on how best to optimize vendor management.

Services

Strategy
Visual Identity
User Experience

link

thirdmonthamania.com

User Research

We kicked off the project with a deep-dive user interview phase where we discovered the reporting needs of current and prospective CSI clients. Our research uncovered the opportunity to create a more human dashboard experience that offers less charts and more plain-language guidance for how to better leverage CSI's core platform.

Jordan Wang
CFO, 44 y.o.
We don’t pull CSI into our
reporting, we just use the rebate
number.
I need to identify card-accepting vendors with favorable payment
terms.
Farrah Nevergreen
VP Finance, 41 y.o.
We don’t have capital expenditures.
We have payroll costs.

We lost 50% of one of our largest
clients, the rebate helped us offset
that loss.
Frank Stevens
CFO, 39 y.o.
Our reports materialize as
number-heavy documents that are
hard to digest and piecemealed
from various platforms.
Our data doesn't show
opportunities for growth.

User Experience Design

We imagined our dashboard experience to mirror the relationship a CFO may have with a great a personal assistant. An excellent assistant would distill the most important information into easily digestible pieces. They would automatically take care of low-level and repeatable tasks. They would offer researched options for how to solve more complex issues. And they would offer a daily synopsis of what needs to be tackled, what's working, and what's not. We designed a digital dashboard with those human qualities in mind.

Automated Actions

Many dashboards are solely built for interpretation, not action. We took a different approach for CSI, where automated optimizations would be executed based on pre-defined conditional statements. New vendors can be onboarded. Better vendors can be sourced. Requests to switch to card payments can be made. All automatically delivered based on what vendor payment methods best service CSI's customer.

wireframe

We developed fully responsive prototypes to distribute to early beta users and existing CSI platform customers. Through iteration, we improved the workflow and matched customer needs to product features.

Visual Design

We designed a distinctive "dark mode" visual system that brings a polished consumer feeling to a B2B web application. Bold numbers and bright CTAs clearly set off action items from the black and grey background.

Spend & Rebate

The dashboard provides customers with detailed, real-time information on vendor spend, how they were paid, and what rebate CSI delivered from virtual card payments.

Reporting

Our user research uncovered that its difficult for CSI customers to generate reports to distribute internally. We fixed that by building a reporting wizard into the tool dashboard to instantly generate and distribute live reports through a unique URL.

UI kit

Dropdowns, inputs

Month

January

sun	mon	tue	wed	thu	fri	sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

choose month

Choose brand
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum

7 days 1/24/19

•••••••••••••••••••

Sort by: Branding

Jan
feb
mar
apr
may
june

Colors

Iconography

Cards

We found card-accepting suppliers you’re not paying with card

Show me

50.1m Total spend

22 Certified
Woman-Owned
Suppliers

Diversity Opportunities

show me

12 digital

A social media platform founded by women and themselves a champion of diversity in the workplace.

Development

We built a scalable component library in REACT that could future proof and grow with the expanding feature set of the product. The components integrate with custom APIs we developed to sync data from the core CSI payment platform.