Furthermore, 25% of the market's whitespace is occupied by law firms seeking payment and simple management solutions without learning a full-blown management system like MyCase.
‍
Therefore, we want to build a Pro version of LawPay with the most needed practice management features to attract this segment of law firms and provide an upgrade option to current LawPay users.

We want to find something that can put everything together that we don't have to go to different places."

— Nancy, Attorney

USER NEED

Users need a seamless and efficient way to access important data insights as soon as they log in to LawPay Pro.

Glance Critical Financial Numbers

The main objective of using LawPay Pro is to receive payments quickly and easily. Therefore, displaying the numbers clearly and concisely provides essential insights for law firms.

Quick Actions Directly From Dashboard

Besides displaying critical numbers, users need quick access to complete frequent workflows like collecting payments and creating time entries from the dashboard.

USER PAIN POINT

LawPay Pro development is based on MyCase workflows. However, MyCase's overuse of modals for all workflows makes them hard to use.

Calling for a New Interaction Pattern

MyCase modals frequently involve complex workflows with lots of input fields and information requiring scrolling. This interaction can make navigation challenging for users because the information is not well-organized, and the buttons scroll with the modal, making it difficult to locate them with lengthy forms.

As MyCase's features expand, this modal pattern has been overused, causing usability problems throughout the system. Therefore, I must design a new interaction in LawPay Pro to ensure these workflows are efficient and scalable.

The target users of LawPay Pro are small law firms, attorneys, and staff whose primary goal is to save time. A consistent, efficient, and streamlined experience for them is critical to reducing the learning curve and increasing user adoption.

INFORMATION ARCHITECTURE

The Magical Number Seven,
Plus or Minus Two

A growable structure that follows the Magical 7 rule

An average person can only hold about 7 (plus or minus 2) items in their working memory. The sitemap I designed follows this rule and limits the cognitive load needed for people to navigate the LawPay Pro system.

I also minimized the number of navigational tabs on each level to leave room for feature additions in the future.

Group by money you need to ask for vs. money received/scheduled

"Billing" contains time entries, expenses, invoices, and trust requests, all the money you need to bill your client to get paid.
‍
"Payments" contain received and scheduled money you don't need to chase your client for.

DESIGN SYSTEM

A reusable and efficient design system with built-in accessibility and consistency.

Setting the foundation for an efficient development and design process

Developed 30+ UI components with detailed documentation, reusable Figma components, and collaborated with developers for accurate implementation.

DATA VISUALIZATION

Choosing the right chart type with the right set of data.

Ideating With Different Data Set

I reviewed data on invoices, online payments, and transactions, creating around 50 visualization charts for feedback. Collaborating with the PM, we prioritized data to display and selected chart types accordingly. For example, a pie chart was used to show payment method proportions for transaction visualization.

DATA VISUALIZATION

Creating efficiency with semantic status colors.

Using Colors With Purpose

Colors enhance SaaS efficiency by conveying messages quickly through their semantic meanings. By structuring typography and providing text explanations, I ensure visualizations are clear and accessible, avoiding decorative use of colors and always including legends.

INTERACTION DESIGN

Using slide-out side panel for progressive disclosure.

An Uninterrupted Experience

Side panels are similar to modals in terms of demanding users' attention. However, they do not cover the entire screen, and users can dismiss them by clicking outside the panel without losing their progress in the application. Slide-out panels are an effective method of providing users with additional information.

INTERACTION DESIGN

Streamlining workflows with progressive disclosure.

Organizing Data into Modules with Appropriate Actions

Users can perform simple workflows within each data module with the side panel interaction. In the timesheet calendar example, users can view the time entries created today, edit, or create new time entries without leaving the context of the calendar.

SIMPLIFY WORKFLOW - PAYMENT

LawPay Pro is building a new payment flow based on MyCase. However, the current MyCase flow is disorganized and confusing.

MyCase's payment flow is challenging due to unfiltered invoice displays, confusing field order, and a lack of emphasis on the final charge amount.

SIMPLIFY WORKFLOW - PAYMENT

I reorganized the payment flow by grouping the information into sections and displaying them in the correct order.

Streamlining Workflow on One Page

I prioritized contact and case selection before invoice choice to streamline options and reduce search time. Once an 'Apply to' item is chosen, related details appear progressively, all on one page, allowing easy changes. This design auto-fills information, saving time and reducing errors.

A Well-Organized Information Architecture

I have organized the information into different sections and arranged them to align with the user flow.

SIMPLIFY WORKFLOW - PAYMENT

Building efficient workflow with scannable layout.

In early design, I created a side-by-side layout that allowed for more space to display receipts in a readable manner. However, internal feedback suggested that the visual hierarchy of the receipt should be lowered as it was causing a more complicated perception flow.

As a result, I focused on improving the scannability of the receipt and redesigned it to have a more streamlined reading flow that can be quickly glanced over.

SCALABLE

A scalable system that is set up for success.

A Well-Structured IA Foundation and Design System

I designed the site map of LawPay Pro and introduced a scalable design system to improve development and design efficiency.

EFFICIENT

Showing the right data in the right way.

Glanceable Data at Every Permission Level

I crafted glanceable data visualizations for both admin and staff permission, ensuring users can capture meaningful numbers and data right off the bat.

STREAMLINED

Connected workflows with progressive disclosure.

A Core Interaction Pattern Throughout the System

I introduced a new slide-out side panel interaction to streamline information access, reduce users' cognitive load, and prevent errors.