RC
Romeet ChatterjeeAI Product Designer
Hire me
Overview
Case study12 GridsSole UI/UX Designer2026

Edge CRM — Add Case

Redesigning a mobile case-management flow to cut cognitive load for B2B sales teams.

Information-heavy UIUsability testingB2B SaaS
Faster case logging
40%
3–4 min to under 2 min
Field error rate, before
80%
Same mistake, every session
Old time-to-answer
~52s
Across the full old flow
Screens redesigned
3
Add Case · List · Detail
Intro

A rep, mid-call, on a form that fought back

Edge CRM is an AI-driven platform that helps B2B sales and support teams log, track, and resolve client cases every single day.

Field sales reps at 12 Grids open it many times a day. Often mid-client-call, in high-pressure moments where every second counts.

Every case starts on one screen: Add Case. It was the entry point of the whole flow, and where most reps gave up.

Before
Before
After
After
The design question

How might we?

Reframing the problem
How might we help reps log, scan, and understand the full context of a client case, fast, without navigating across multiple screens?
HMW
The single question the redesign had to answer.
Inflection Point

Every step added time, effort, and doubt

By the time a rep had an answer, the client had already lost confidence.

Timing the old flow end-to-end showed how the seconds stacked up. A heuristic audit showed why.

Time to answer a client

Every step added time. ~52s from open to answer, before the redesign.

~8 sec

Opens app to find the case

14% slower
+14 sec

Scrolls entire list to locate the case

22% slower
+11 sec

Taps into individual case detail

31% slower
+19 sec

Scans wall of data to find information

~52 sec total
~52 sec

Answers the client with information

Friction 01
Entire form, no end
One endless scroll with zero progress indicator. The rep can't gauge how long it will take, so the brain defaults to avoidance.
Friction 02
Dropdown vs text field
Every field looks identical: an underline with a chevron. You can't tell a dropdown from a text field until you tap. One mistake per field, across the whole form.
Friction 03
Important fields hidden
Required and optional fields look the same. A red asterisk is the only signal. No grouping, no hierarchy, no sense of what is critical.
Rising Action

Tracing why reps kept failing

I traced the rep's real path through the flow, step by step, to pinpoint exactly where time, effort, and confidence were lost.

The form wasn't missing features. It asked too much, too soon, with no way to tell what actually mattered.

No end in sight

Reps scrolled to the bottom to estimate effort before filling anything.

Too much asked at once

The entire form sat on a single screen.

Text field or dropdown?

Impossible to tell before tapping.

80% error rate

The same mistake, from every rep, every session.

Brainstorming & Ideating

Turning every pain point into a design direction

To translate every pain point into a concrete design direction, I worked out what to fix, what to remove, and what to rebuild.

Finding

Unstructured long form

Reps scrolled to the bottom to estimate effort before filling anything.

Action

Convert into a 3-step flow

Clear progress improves completion confidence.

How I'd solve it

Add a step progress bar at the top so reps immediately know how much of the form remains.

Break the long form into clear sections like Overview, Case Date, and Business Details.

Add section labels at the top of each step so users always know the context of what they're filling.

Finding

Fields looked visually identical

Impossible to tell a dropdown from a text field before tapping.

Action

Introduce clear field differentiation

Make every field say what it is.

How I'd solve it

Replace underline inputs with card-style bordered fields to show where interaction happens.

Add a chevron icon on dropdown fields so users instantly recognize selectable lists.

Finding

Validation feedback was unclear

Users refilled the entire form repeatedly.

Action

Introduce explicit error guidance

Tell users exactly what failed and how to fix it.

How I'd solve it

Display a clear error banner at the top summarizing what needs fixing before submission.

Use specific messages like “Please add a case subject” instead of generic validation errors.

Highlight failed inputs with a distinct red border to draw attention to the problem field.

Climax

One flow, broken into steps reps could trust

The fix was clear. Stop asking for everything at once. Break the form into steps. Make every field say what it is. Pre-fill what the system already knows.

Re-designing

Turning decisions into a flow reps could trust

To turn those decisions into a working interface, I restructured the form, clarified the inputs, and gave reps a flow they could actually trust.

Before — the problemAfter — what it became
The old Add Case form: one long scroll of underline fields
Before
The redesigned Add Case screen: stepped, grouped, and validated
After
Change 01
Stepped flow + progress bar
One long scroll, now clear stepped sections.
Change 02
Notification section
Flags any issues before reps submit.
Change 03
Grouped, pre-filled fields
Grouped card fields, known values pre-filled.
Change 04
Full-width primary CTA
One full-width button, always in reach.
User Testing

Testing the redesign with real reps

To measure whether the redesign actually reduced time, errors, and confusion, I put it in front of real reps and watched them work.

The redesigned Add Case tested with reps, with the two friction points flagged
Finding 01
Completion time down 40%
Reps who took three to four minutes now finish the form in under two.
Finding 02
Progress felt invisible
The thin progress line didn't tell reps how many steps remained or which step they were on.
Finding 03
Pre-filled fields went unnoticed
Reps didn't realize Line of Business and Business Unit were pre-filled, and tapped to change them.
Solutions & Action Items

Refining the design after testing

To address the usability gaps that surfaced in testing, I refined the design once more before final handoff.

Before — the problemAfter — what it became
The tested Add Case, with the two friction points flagged
Before
The refined Add Case: stepped tabs, pre-fill ticks, and a product hint
After
Fix 01
Stepped tab flow
Overview, Type, Assignee with directional arrows showing reps exactly where they are and what is next.
Fix 02
Green border + tick on pre-filled fields
Line of Business and Business Unit read as visually distinct, so reps instantly see what the system filled.
Fix 03
Contextual hint on Product Name
"Select the product related to this case" tells reps what the dropdown contains before they tap.
Final Design

The redesigned Add Case screen

A stepped, scannable Add Case screen where structure, field types, and validation are unambiguous. A rep can log a case in under two minutes.

This case study focuses on Add Case, one screen in a three-screen redesign of Add Case, Case List, and Case Detail.

The final redesigned Edge CRM Add Case screen
Next in the Edge CRM redesign
Case List
Read next
The screen every rep opens each morning — ten or twenty cases that all looked the same. Up next: how reps scan, triage, and act at a glance.
Want a flow like this?
I redesign information-heavy B2B products end to end, from research to handoff.