Vendor Payout

Task

Create a brand and identity, update the user-experience with the provided feedback and understand where features could be consolidated. Create an interface that is sleek, matches the new branding look and feel, and offers the user consistent patterns.

Company

Vendor Payout is a Shopify plugin that allows sellers to split order totals with their vendors easily and quickly.

*Note: Implementing the new interface is still in flight, owner has given permission to share mockups here.


Branding and Identity

I created a simple brand for Vendor Payout. They wanted the logo to be sleek and easy to identify. Most of all, they wanted a fresh look and feel to incorporate throughout their UI.

Sketches

When sketching and researching, I talked with the team to understand the most important aspects the team wanted from the rebrand:

  • Slick

  • Identifiable

  • Bold

Logo

 
vendorpayout-long-green.png
 

Asking “Why” and “Why Not” (UI/UX)

Vendor Payout contacted me primarily to give them a face lift in terms of look and feel. Along with that came a few asks to make the experience better (but not ridiculously different) from the first version, but first I wanted to figure out why.

User journey

I mapped out a user journey to better understand what a typical flow was in order to understand how to improve information architecture. I also read back through previous feedback offered from users to understand existing issues.

While messy, I got to talk through the journey with users and it’s a fairly simple app!


Wireframing

I quickly had the sense of what users were doing in this plugin and whipped up some low resolution wireframes to map out what direction to take in the UI. I went over these with users and the Vendor Payout team to make sure that all bases were covered. Here are just a few examples of the wireframes I created.

I learned that graphs may not be the best way to represent the information needed. Users responded more positively to numbers rather than a graph over time.


Creating Components

Though, a small project, I felt the need to create a set of components that would be reused in multiple places. This not only made my designs more consistent and allowed users to interact with similar patterns, but it also made it easier on the development team to implement.

The color palette is bright and vibrant to keep the user’s attention. We wanted to make sure the user interacts with similar patterns and UI to connect the dots throughout the app.


Where We Landed

Login Page

I created a login page that would invite users to the app, tell them a little bit about what they were getting into, with a sleek interface and friendly colors.

Orders Page

The Orders Page highlighted some key data in order to keep users in the know and be able to see important numbers at a glance. Below is an example of the filters dropdown.

Improvements were made to make the statistics more readable and scannable. The icons were added to make the stats easy to skim.

Reports and Settings

Keeping reports and settings as simple and clean as possible, we created two very elegant pages that were both user friendly and surfaced the most important things that users used most frequently.

Marketing Site

As a part of this effort, I helped the team with a very simple marketing page. The goal was to make the branding and identity shine through the marketing site as well as give users a glimpse of what the app would look like upon login.