Case Study

Defining a completely new experience for the legal industry

During Jurispect's debut into the market, I worked with their team to help define the UI, UX and Visual Design of their platform.

Project Summary

Jurispect (now Compliance.ai) is regulatory change management software that is designed to mitigate risk, reduce costs, and increase confidence in compliance status for the entire enterprise in the banking, financial services, and insurance industries.

I was hired as a contractor to create a brand, style guide and define the UI/UX of the platform.

Problem

The regulatory space is a living organism; constantly moving. A long, bureaucratic process that requires constant attention if a business wants to mitigate their risk and stay on top of changing rules that could have huge impacts on their bottom line, legal & more.

The current solution of manually tracking rules, documents and dates requires extreme diligence and organization. Even overlooking a single word could cause impacts to a business, making them noncompliant and subject to fines and fees.

Their needs to be a solution that automatically aggregates rules and their related documents, communications, and empowers and allows businesses to easily stay on top of ever-evolving news.

Process

Research

The goal was essentially to produce an MVP. They had just finished their seed round and needed to show a proof-of-concept product and build a brand that would attract additional investment and new customers.

I began going through previous research (potential-customer testimony, zoom recordings, data collected by the CEO) and distilling all of that into a feature spec sheet that supported the bare-bones of the idea.

Here’s what I landed on:

  1. Automatically aggregate rules and documents
  2. Allow users to follow rules, and bookmark the most important ones
  3. Basic notifications and collaboration

Design

Knowing the market for this solution would span small to large businesses, those who are tech-savvy and those who are not, I needed to build an interface that was approachable, but had a visual aesthetic that felt secure and professional.

The information we provided is very technical and can come from government agencies, so we needed a brand and visual style that users would trust as having the permissions and authority to present this kind of information.

I needed to design a UI that simplified what can be a messy, disorganized and complicated pile of information.

Layout
Documents and large amounts of text are best experienced in a narrow view, so the user isn’t easily lost when finishing one sentence and moving to the next. This was helpful in that I had a second, fairly spacious column to work with for displaying Recent Activity.

As mentioned earlier, regulations are constantly evolving, so always having access to changes, updates and edits to rules, comments from your team, etc. was just as important as the rule details.

Always hiding them behind a tiny icon wouldn't allow important information to surface easily.

Cards vs Table
Rules could have dozens of words, hundreds of characters in their titles, and it was important to not truncate titles because every word really matters.

This need didn’t lend itself to a table view of short rows, so I opted for card views that allowed the titles to grow vertically, making them easier to read.

Instead of a masonry grid of cards, I chose to keep them uniform, as masonry layouts tend to cause the user’s focus to jump around.

Post Mortem

Looking back at my work on this, I definitely see several areas for improvement:

  1. My use of color in the comments meta information is not very accessible and is easily lost against the white page. The colors were meant to represent the overall feeling of comments, but I should have explored other ways to convey that information that was more accessible.
  2. The mechanics of Following and Bookmarking/Collections should have been questioned more and investigated. It’s not clear what exactly separates them (from a user’s perspective).
  3. I should have spent more time on the IA. This ties in with the Following mechanic issues. The organization of information and why you would choose one organization method over the other is not clear and I feel better IA would have made that more apparent.

Continue Reading

View All Posts
Design
8 min read

Case Study

Auditing and redesigning the UI of the Convex platform

After Convex's Series B, it was time for our brand and visual style to mature beyond the libraries and frameworks of our youth.
Design
8 min read

Case Study

Designing a new feature to solve an old problem.

Like most startups in their early stages, Accountingfly was building the plane while it was in the air; using what tools we had already built to fulfill the needs of the customer.
Design
8 min read

Case Study

Questioning the efficacy of a legacy process

For an online job application, why do we force users to enter so much information?
Design
8 min read

Design

How to Animate a Hidden Menu with Invision Studio

In this beginner tutorial, I walk you through step-by-step how to create an animated hidden menu for use in your mobile or web prototypes.
Design
8 min read

Design

Macbook Pro Mockup - Figma Resource

A high-res mockup ready to accept any design. Pixel perfect dimensions of an actual MacbookPro screen.