WORK

ABOUT

RÉSUMÉ

CONTACT

Ops & Ink

CASE STUDY 02
UX · Information Architecture · Client Experience
2025
CLIENT ACCESS ROUTER

I designed and later rebuilt a single-screen access router that helps law-firm clients reach the correct case portal, payment platform, financing option, or contact route without requiring them to understand the firm’s internal technology.

I designed and later rebuilt a single-screen access router that helps law-firm clients reach the correct case portal, payment platform, financing option, or contact route without requiring them to understand the firm’s internal technology.

ROLE

UX strategy, interface design, content, prototyping, and implementation

UX strategy, interface design, content, prototyping, and implementation

Routing strategy, production modal, and redesigned responsive component

Routing strategy, production modal, and redesigned responsive component

DELIVERABLES

HTML, CSS, JavaScript, WordPress, Framer

TOOLS
USERS

Current clients and people making payments

One clear entrance

to several disconnected systems.

One clear entrance

to several disconnected systems.

The firm had several client tools.
Clients saw one confusing website.

01

THE PROBLEM

The firm had several client tools.
Clients saw one confusing website.

Existing clients needed to make payments relating to their case, make a general payment, or apply for financing. Each task lived in a different external system.

Existing clients needed to make payments relating to their case, make a general payment, or apply for financing. Each task lived in a different external system.

Those distinctions made sense internally. They did not necessarily make sense to someone visiting the website while dealing with a stressful legal situation.

The design challenge was not to combine the platforms technically. It was to hide their complexity behind a short, understandable decision process.

01

Visible at scale

Subtle distortions became impossible to ignore in large-format production.

02

No reliable source

There was no clean master file, technical guide, or established process to fall back on.

03

Compressed timeline

The asset had to be corrected quickly enough to keep signage production moving.

01

Several desinations

Several desinations

case access, general payments, and financing were all handled in different places.

03

High-stress
context

High-stress context

The interface needed to remain direct and forgiving when attention and patience were already limited.

02

Similar technology

Clients could not be expected to know which company or portal handled each task.

02

Similar technology

Clients could not be expected to know which company or portal handled each task.

the first iteration

The first version solved the routing problem.
The redesign refined the experience.

The first version solved the routing problem.
The redesign refined the experience.

02

The first version established the routing logic through a short sequence of questions. It clarified whether clients needed case access, a standard payment option, financing, or additional assistance.

Functionally, the system worked. It reduced several disconnected links to one guided entry point and gave the firm a maintainable way to organize client access.

The original modal was created to solve an immediate operational problem: several common client tasks led to different third-party systems, but the website offered no clear way to distinguish them.

The original modal was created to solve an immediate operational problem: several common client tasks led to different third-party systems, but the website offered no clear way to distinguish them.

The first version established the routing logic through a short sequence of questions. It clarified whether clients needed case access, a standard payment option, financing, or additional assistance.

Functionally, the system worked. It reduced several disconnected links to one guided entry point and gave the firm a maintainable way to organize client access.

initial production version

Prove the logic before polishing the system

The first modal prioritized clarity and speed of implementation. Its numbered choices and multiple interface states made the sequence explicit, but the controls did not yet feel fully unified with the surrounding website.

The first modal prioritized clarity and speed of implementation. Its numbered choices and multiple interface states made the sequence explicit, but the controls did not yet feel fully unified with the surrounding website.

why i revisited it

A working utility can still feel disconnected
from the experience around it.

A working utility can still feel disconnected
from the experience around it.

03

01

Too procedural

Too procedural

Numbering and multiple interface states drew attention to the mechanics of the sequence rather than the meaning of each choice.

03

Separate visual identity

Separate visual identity

As the surrounding design system matured, the modal began to feel like an attached tool rather than a native part of the website.

As the surrounding design system matured, the modal began to feel like an attached tool rather than a native part of the website.

02

Mixed control styles

Mixed control styles

The launch button, destination buttons, navigation controls, and exit action did not share one consistent interaction language.

redesign goals

Preserve the successful logic.
Remove the unnecessary friction.

Preserve the successful logic.
Remove the unnecessary friction.

04

01

Create one visual language

The launch control, destination options, contact route, and exit action now share related proportions, transitions, and hover behavior.

02

Remove unnecessary steps

The sequential questionnaire was replaced with one scannable choice set, allowing users to reach a destination without moving through multiple screens.

03

Prioritize user goals

Every option describes what the client wants to accomplish. Vendor names remain secondary to clear, task-based labels.

04

Preserve a clear fallback

A direct office-contact route and restrained close control give users a way out without competing with the primary destinations.

redesign goals

The destination logic stayed intact.
The intermediate model became simpler.

05

The destination logic stayed intact.
The intermediate model became simpler.

Before

Initial production modal

  • Sequential questions

  • Numbered options

  • Multiple interface states

  • Mixed control treatments

After

Redesigned component

  • One screen overview

  • Direct destination choices

  • Unnumbered action labels

  • Unified interaction system

The original modal was implemented on the firm’s production website. The version shown in this case study recreates and refines that workflow for the portfolio while preserving the underlying routing strategy.

why i revisited it

Present every relevant route
without exposing the underlying complexity.

Present every relevant route
without exposing the underlying complexity.

06

The original modal revealed destinations through a sequence of questions. During the redesign, I found that the number of routes was small enough to present clearly on one screen.

The information architecture remained; the user no longer had to move through it step by step.

The original modal revealed destinations through a sequence of questions. During the redesign, I found that the number of routes was small enough to present clearly on one screen.

The information architecture remained; the user no longer had to move through it step by step.

one entry point

Client access

case information

Secure client portal

standard payment

Payment platform

financing

Financing application

fallback

Office contact options

one entry point

Client access

case information

Secure client portal

standard payment

Payment platform

financing

Financing application

fallback

Office contact options

design decisions

The interface explains the task
without explaining the technology.

The interface explains the task
without explaining the technology.

07

01

Use actions instead of platform names

Use actions instead of platform names

Labels such as “View my case” and “Make a payment” describe the client’s goal. The names of the underlying services appear only when necessary.

Labels such as “View my case” and “Make a payment” describe the client’s goal. The names of the underlying services appear only when necessary.

avoided
Open Clio Client Portal
used
View my case

02

Make the full choice set scannable

Make the full choice set scannable

Because the number of destinations is limited, the redesigned modal presents them together. Users can compare the available routes immediately without creating visual overload.

Because the number of destinations is limited, the redesigned modal presents them together. Users can compare the available routes immediately without creating visual overload.

case
payment
financing
contact

03

Always provide an escape route

Always provide an escape route

Clients can close the modal or contact the office when none of the listed destinations feels correct.

contact the office
x close
Implementation

The code maps each choice
directly to its destination.

The code maps each choice
directly to its destination.

Each option maps directly to a client destination. Centralizing those links inside one component makes the interface easy to maintain without restructuring the surrounding website.

Each option maps directly to a client destination. Centralizing those links inside one component makes the interface easy to maintain without restructuring the surrounding website.

REPRESENTATIVE EXCERPT

<motion.button

ref={closeRef}

type="button"

aria-label="Close client access window"

onClick={closeModal}

onMouseEnter={() => setCloseHovered(true)}

onMouseLeave={() => setCloseHovered(false)}

onFocus={() => setCloseFocused(true)}

onBlur={() => setCloseFocused(false)}

whileHover={{ y: -2 }}

transition={{

duration: 0.2,

ease: "easeOut",

}}

style={{
position: "absolute",

top: 16,

right: 16,


display: "flex",

alignItems: "center",

justifyContent: "center",


width: 44,

height: 44,

padding: 0,


color: closeHovered ? goldHover : gold,

background: closeHovered

? "rgba(231, 183, 99, 0.12)"

: "transparent",


border: `2px solid ${

closeHovered ? gold : "transparent"

}`,

borderRadius: 6,


boxShadow: closeHovered

? "0 4px 10px rgba(0, 0, 0, 0.25)"

: "none",

outline: closeFocused

? `3px solid ${white}`

: "none",

outlineOffset: 3,


fontFamily,

fontSize: "1.4rem",

fontWeight: 500,

lineHeight: 1,


cursor: "pointer",

}}

>

×

</motion.button>

what i would test next

The next step would be measuring where users hesitate,
choose the wrong route, or close the modal.

With analytics or moderated testing, I would examine whether clients understand the distinction between standard payments and financing, whether the option labels are scannable enough, and whether the contact fallback is visible without distracting from the primary routes.

I would also test the modal with people unfamiliar with the firm’s software rather than relying only on internal understanding.

previous project

Evidence Workflow

Automation

next project

Legal Brand

System