AffiniPay’s products are built on fragmented design systems and legacy technologies, leading to inconsistent UX, inefficiencies, and scalability issues across platforms.

The vision is to consolidate AffiniPay’s legal practice management (LPM) software into a unified LPM super-app—MyCase.

This includes integrating specialized workflow modules from products like Docketwise (immigration law) and CASEpeer (personal injury law) into MyCase.

By standardizing features and UI patterns, MyCase will seamlessly support diverse practice areas while ensuring scalability and a consistent user experience.

To support the vision of consolidating all LPM software into MyCase, I audited its UI to identify key issues as a foundation for modernization.

I focused on the most-used components, evaluating their accessibility, consistency, and interaction patterns.

Mapping MyCase’s Information Architecture (IA)

To modernize MyCase, I created a comprehensive site map to evaluate its IA, covering navigation, content hierarchy, and feature organization.

The site map revealed areas of complexity, redundancy, and usability issues, forming a foundation to align the design system with user workflows.

Evaluating MyCase’s Current Technology Stack

Frontend engineers audited MyCase’s technology stack and identified a mix of React Bootstrap and Rails ERB, leading to inconsistent components between pages.

Additionally, the existing design library—MyCase Bootstrap-Focus theme—is poorly maintained by both engineers and designers, falling short of accessibility standards and underscoring the need for modernization.

PAIN POINTS

Existing components are outdated, inaccessible, and inconsistent

NEED

The Call for a More Scalable and Concise Information Architecture

NEED

The Need for a Better Designer and Developer Experience

Designers and developers struggle to create consistent UI due to an outdated component library and lack of guidelines. Developers also lack training to map design components to frontend code, resulting in custom solutions, inconsistencies, and technical debt.

I’m not sure which component to use because there are no clear guidelines.

— MyCase Full Stack Engineer

I try to follow the existing patterns for consistency, but I know they’re often outdated or incorrect.

— MyCase Product Designer

EMPOWERED DESIGNERS

A Solid Theme Foundation With Built-In Accessibility and Scalability

This theme foundation provides a scalable tokenization system with semantic colors, accessible text contrast, shadows, spacing, and standardized typography, enabling consistent and accessible design across themes and modes.

EMPOWERED DESIGNERS

Component Library

The Arch Design Library follows atomic design principles, offering around 50 UI components—from basic atoms, molecules, organisms, to templates like the layout component.

Each component has configurable properties and usage guidelines, allowing designers to easily locate and configure them to suit specific use cases, ensuring efficiency and design consistency.

EMPOWERED DESIGNERS

Component Usage Guidelines

Usage guidelines include use cases for each variant, anatomy, labeling and messaging standards, best practices, dos and don’ts, interaction patterns, examples, and accessibility standards.

To engage a broader audience like PMs and engineers, I introduced the “Component of the Week” initiative to promote best UI practices and foster alignment around guidelines.

USER-CENTERED EXPERIENCE

Side Navigation

The side navigation supports scalable IA with vertical scrolling and a streamlined global header for search and quick actions. Removing redundant filter views simplifies the site map, creating cleaner, more intuitive navigation. Features like page pinning and recent page views enhance workflows and ensure quick access.

USER-CENTERED EXPERIENCE

Progressive Disclosure Interaction

Progressive disclosure is central to Arch’s interaction pattern, letting users preview information directly from tables, cards, or panels without leaving the current view. This streamlines workflows by enabling users to verify details before taking actions, then seamlessly proceed to detailed views or steps, ensuring accuracy and minimizing navigation.

STREAMLINED COLLABORATION

The New Tailwind Technology Vision

Shifting from Bootstrap to Tailwind CSS offers MyCase greater flexibility, expanded components, and tailored customization. Aligned with Figma properties, the new frontend library ensures seamless design-to-code consistency, supported by detailed guidelines.

Interaction Pattern: Testing in Context

I integrated new interaction patterns into ongoing projects to test user preferences in context. In the MyCase reporting project, I added a side panel for report configuration and randomized user exposure to different patterns, simulating A/B testing. This approach enabled real-world testing while preserving workflows, ensuring informed interaction design decisions.

Side Navigation

To gather quantitative and qualitative feedback, I conducted a survey to understand MyCase users' views on the current navigation, their preferences for the new navigation, and how they would transition to it.
‍
The survey has two tasks:
1. Navigate to a page with an unchanged location in the new hierarchy.
2. Navigate to a page moved to a new location in the redesigned navigation.
‍
These tasks helped assess the usability and adaptability of the new navigation system.

Increasing Visibility for Getting Support

The side navigation survey revealed that users struggled to locate support resources in the updated hierarchy. To address this, we elevated the visibility of support options by placing them prominently in the global header.

To further ease the transition, we will introduce an in-app product tour, highlighting changes and guiding users to the new locations.

Dashboard Personalization & Workflow-Based Modules

Office Visit & In-Person Testing

To gather feedback on dashboard personalization vision, the design team visited law firms to observe real-world customer workflows. A card-sorting activity was also facilitated to understand how users would organize their dashboard and utilize workflow-based modules.

My Seattle Office Visit

Ease of use rating: 10/10
Satisfaction rating: 10/10
Key insight: Layout template by role would be better than by practice area.

I like it. It's easy to use, again, it's very user friendly. You don't have to have training to figure it out for your workflows.

— Katrina, Family & Immigration Law Attorney

Gathering Feedback from Our Main Users: Designers

To understand the designer experience, we used Smart Spend, a smaller AffiniPay product, as a testing ground. Designers used the Arch library to design Smart Spend, providing feedback on component usability, use case insights, and collaboration with engineers.

Weekly critique meetings helped refine the library to ensure it is intuitive, adaptable, and aligned with real-world workflows.