May 10, 2019

Crafting UX/UI for a Compliance Management Platform

Steve Rado
Project Manager

Simplifying Cannabis Compliance

Who is Green Check?

As more states across the country continue to legalize medical and recreational cannabis, the legal cannabis industry is flourishing. However, many business owners in this thriving sector are struggling to set up bank accounts for their companies, as banks and credit unions are still wary of working with cannabis-related businesses and taking on the associated risk and regulatory burden.

Green Check, a New Haven-based startup, aims to make it easier for cannabis-related businesses and financial institutions to build relationships. Their automated compliance platform simplifies complex regulations and provides increased transparency.


Challenge

When we connected with Green Check last Fall, their engineers had already built an impressive technical demo, and their team was preparing to schedule demonstrations with prospective clients. They wanted Checkmate to revamp their app’s UX and UI, with their primary goals being to improve navigation and usability, and to implement a cleaner aesthetic.

One of the requirements for Green Check to succeed was the ability to easily integrate into existing technology and workflows for both cannabis businesses and banks and credit unions. Tool fatigue is a real problem for these businesses that interact with complex systems on a daily basis. Adding to the complexity could make users reluctant to adopt Green Check.


Solution

User interviews

The first step of our process was to begin talking to our core users — dispensary owners and compliance officers at banks and credit unions. The interviews allowed us to understand the unique problems these potential users were experiencing, and give feedback and recommendations to the Green Check team for what features should be prioritized. Any company that has kept most of their work and planning internal to their own team can quickly start working off of untested assumptions. Speaking with outside sources can help to get fresh, unbiased perspectives.

The Green Check team already knew managing cannabis accounts was difficult for financial institutions. During user interviews, we found that the biggest concern for banks and credit unions was getting transparency into their cannabis business accounts. Transparency minimizes the perceived risk that comes with banking legal cannabis money, so we designed a system with Green Check that gives banks extensive insight into their cannabis businesses. With every transaction logged and analyzed, cannabis accounts can become most transparent accounts in a bank’s client portfolio.

A consistent brand

We wanted to create a cohesive brand throughout the application. We accomplished this by using consistent components and custom iconography throughout the app to reinforce the brand aesthetic.

After conducting an in-depth review of Green Check’s demo, one of our first steps was to refresh the app’s basic layout and color palette. While Green Check’s engineers had assembled a relatively effective design using a library of Material Design components, we knew that a cleaner, purpose-built interface would help their product to shine.

In contemporary digital design, interfaces typically consist of a set of light, neutral tones ranging from white to a medium gray, with splashes of their brand color highlighting actions and important information. The high contrast between the light background and the colorful buttons or titles draws the user’s eye.


Green Check’s demo build featured a mix of white, black, and green elements throughout. The use of black in several spots, like a black bar running across the top of most pages, made the interface feel messier, distracting the eye from the more critical information contained below. We opted for a predominately light theme, using mostly white backgrounds with Green Check’s lively green as an accent color. Lighter shades of gray help to delineate separate sections or items without being obtrusive, while a bright red makes notifications and alerts pop out.


Alongside the fresh color palette, we also updated Green Check’s branding. We created a series of icons in green and gray to fit the color scheme. The icons are made out of outlines and simple designs that aid in conveying necessary information without confusing the user. Additionally, we designed two 404 page illustrations that fit with Green Check’s mission in the event of the platform being unavailable.


Onboarding

Onboarding is a crucial part of every app. If a user gets frustrated or overwhelmed during this process, they may abandon the product and never come back. With this in mind, we crafted an onboarding process that would be as straightforward and stress-free as possible. A card-based navigation menu splits the process into four sections, with a progress percentage displayed on each. Users can save their progress and come back at any time, so they won’t feel pressured or rushed to gather up legal documents. The copy here is helpful and transparent, building trust with users from the beginning.

Additionally, cannabis business users can start uploading their sales data and verifying their transactions before they finish the onboarding process, letting them experience the value of Green Check’s compliance tools immediately.

When a cannabis business does decide to apply for an account with a bank or credit union, we realized that allowing for some in-app interaction between the businesses and their potential banking partners would make for a better experience. In the original version of their UI, there was no way to resolve a scenario where a business might upload an incorrect or incomplete document. To prepare for such eventualities, we implemented a simple system where financial institution users could review all documents submitted by applicants, and leave comments explaining what was missing or incorrect.


For users at banks and credit unions, we wanted to make sure the experience was similarly intuitive, but would also provide some necessary configurability. Different financial institutions may want to see different documents from their applicants, so rather than trying to force them into a one-size-fits-all system, Green Check wanted to give them flexibility. We designed a simple interface which allows banking users to specify any document that they want. Any applicants coming through Green Check will see that the bank has requested those documents.


Financial Institutions - Banks and Credit Unions

One of the main tasks that users on the banking side need to accomplish in Green Check is filing necessary reports. To help employees at banks and credit unions keep track of their filing responsibilities, particularly when they have several accounts, we came up with a way to show the reporting schedule visually.

Every reporting period is represented as a progress bar which illustrates how many days are remaining in the current period. The color of the bar changes from green to yellow to red as the filing deadline approaches, giving users an immediate sense of how urgent each report is. Missing a report or filing late could have serious consequences for the user or their employer, so it was important to make all reporting deadlines clear.

To allow for flexibility, users also have the ability to easily create additional reports beyond those that are required as a default.


Cannabis-Related Businesses

When a CRB user opens up Green Check, the first thing they see is the dashboard. Our goal was to pack the dashboard with as much useful, easily legible information as possible without overwhelming or confusing the user. A graph and summary section show the company’s total sales, how many of their sales have been verified, and what funds can be deposited at that time. While Green Check’s demo initially used green and red to distinguish between verified and unverified sales, we decided together to instead use a lighter shade of green to represent unverified revenue. Staying away from red here, which tends to convey a sense of urgency or alarm, fits better with Green Check’s philosophy of helping honest cannabis businesses find opportunities to improve.


One of the ways that Green Check helps cannabis business owners is with compliance guides included in the platform. The guides are written in plain English, and cover important topics like the sale, distribution, and transport of marijuana. Our role was to make sure that navigating these guides would be an easy and rewarding experience. A card-based starting screen lets users quickly find the category they’re looking for. Then, a side menu shows specific topics while a dropdown menu lets users view older versions to understand how regulations have changed over time. Keeping different types of navigation isolated to separate sections and methods helps avoid user confusion.



Results/Next Steps


“Checkmate helped bring our mission to life and created a visual identity we can be proud of.”

- Mike Kennedy
Director, Product


As Green Check’s design partner, we’re still actively refining their UX/UI as they begin to build a client base. We’ll use feedback from their users to guide our next steps as we continue to make Green Check as easy and satisfying to use as possible.



Similar reads

Subscribe to our newsletter.

Get monthly email updates about product design and entrepreneurship events, as well as news about the Checkmate Team.