Jenné Leigh

Dashboards

Role
Designer

Responsibilities
Research, UI, UX, Copywriting

Company
Rumbleship Financial

Dashboard Redesign

I did a top-to-bottom redesign of our customer-facing dashboards, onboarding and checkout flows

Clay mockups of the desktop and mobile views of the dashboard

Goals

  • Rethink the information presented and clarify the metaphors used to present data
  • Streamline onboarding and checkout and make the process more approachable
New orders list view compared with the expanded order view

Research

Unfortunately, there wasn't a budget for any sort of wide customer research or testing. But I was able to work closely with Customer Support and Sales to identify issues with our current system and brainstorm fixes.

Designs

The order list screen was cleaned up. This screen was where I spent the most time consulting with our customer support rep, to determine what information was most important to our customers, what was less important and could be shown only on the detailed view and what was completely nonessential and could be cut altogether.

Orders screens before and after

As you can see from the before and after, we cut quite a bit of extraneous information. The key insight was realizing we were using an invoice metaphor for our dashboards, which created confusion with our customers. Instead, I switched us over to using a banking metaphor, to eliminate that confusion.

I also went with an expanded accordion view for the order details, instead of a separate page, so that the orders could be seen in the context of the customer's order history.

More screens from the dashboard, including the banking, error and welcome screens

Because this project was used as a proving ground for the Gemini Design System, I also specced out and designed several features and screens that did not yet exist in our dashboards-sm so I could fully test and experiment with Gemini.

New checkout screens

The whole checkout flow was streamlined and cleaned up. I cut a giant block of unnecessary text and integrated the instructions into the flow itself. With the new side-by-side view (which my research showed is becoming standard for many checkout flows), the checkout process is now much more clearly laid out.

XYZ

Designed from the ground up to be more mobile friendly. The previous iterations of the all these products were supposed to have mobile stylings, but they were cut in favor of shipping faster. Surprising to us, considering our B2B focus, a large majority of our customers are mobile first.

Screens from the onboarding flow
Before and after comparison of the changes to the illustration library

I added illustrations to checkout and onboarding to help inject a little more personality into what are otherwise some very cold and sterile pages. We chose to license a library and then I customized it to better suit our branding and use cases