Redesigning a mobile case-management flow to cut logging time and cognitive load for B2B sales teams.
ROLESole UI/UX Designer
TIMELINEJan - Feb 2026
DELIVERABLESMobile Redesign & UX Architecture
Case Logging at Deal Speed
Reps can now log complex cases in under
2
minutes with 0 errors
When our Product Manager flagged that field sales reps were experiencing severe friction with mobile case creation, I shadowed reps during live client calls.
Reps were spending 3 to 4 minutes per case, repeatedly making field selection errors while on live calls, resulting in dropped context and missed deal deadlines.
In high-velocity enterprise sales, every second of data-entry friction pulls the rep's attention away from the customer.
About
Edge CRM is an enterprise B2B sales execution platform, and I designed its high-pressure mobile case creation experience.
Field sales representatives rely on the mobile app daily to capture customer issues, manage active pipelines, and log escalations on-the-go.
Audit records
Capturing structured issue histories and account context.
Frequency
Opened dozens of times a day during high-stakes calls.
Communication
Direct pipeline between field reps and core operations.
Discovering the root friction
Quantitative session timing revealed that case logging accounted for over 60% of total app session duration.
Through contextual inquiry and live call shadowing, I isolated the exact structural breakdowns.
Problem Statement
Sales reps were forced to parse 14 identical input fields in a single infinite scroll with no visual hierarchy, resulting in an 80% initial error rate and widespread form abandonment.
How might we?
To anchor the redesign around rep velocity and clarity, I framed the core challenge into a focused problem statement.
This guiding question ensured every interaction design decision directly eliminated data entry fatigue.
How might we help reps log client cases in under 2 minutes without mental friction?
A single question that the Add Case redesign had to answer.
Turning the triage problem into a design direction.
I broke the screen down into three main failures: visual hierarchy, information architecture, and interaction design.
Eventually, I walked each one into a concrete direction.
1. Unstructured long form
The form felt overwhelming because reps had no clear sense of progress or where one information group ended and another began.
What actions do I need to take?
• Break the long form into clear, manageable sections.
• Give users a clear sense of progress and context.
• Make each stage easy to scan before filling.
Progress bar
Add a step progress bar at the top so reps immediately understand how much of the form remains.
Clear labels
Add prominent section labels so users always understand what type of information they’re entering.
Break the fields
Divide the long form into focused sections like Overview,
Case Details, and Business Details.
Case Details, and Business Details.
2. Fields looked visually identical.
Different field types looked the same, making it difficult for reps to understand how each field should be interacted with before tapping it.
What actions do I need to take?
• Visually differentiate fields based on their interaction type.
• Make interactive elements recognizable before users engage with them.
• Establish a consistent visual language for different field types.
Distinct field styles
Replace the existing underline inputs with bordered, card-style fields that clearly define where interaction happens.
Clear hierarchy
Use spacing, labels, and field treatments to create a stronger distinction between different types of inputs.
Dropdown indicators
Add a chevron icon to dropdown fields so users can immediately recognize selectable lists.
3. Validation feedback was unclear.
When errors occurred, reps had to repeatedly scan and refill the form because the interface didn't clearly explain what had gone wrong.
What actions do I need to take?
• Tell users exactly what needs to be fixed.
• Surface errors where users can immediately see them.
• Reduce the need to rescan or refill the entire form.
Error summary
Display a clear error banner at the top that summarizes what needs to be fixed before submission.
Specific guidance
Replace generic validation messages with actionable feedback like “Please add a case subject.”
Error states
Highlight invalid fields with a distinct red border so users can immediately locate the problem.
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
14% slower
- 8 sec
Opens app to find the required 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
Eventually creating frictions at three areas :
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.
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.
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.
Climax
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.
Turning decisions into a flow reps could trust
I did four key design changes, that will be make the scanning and filling the form faster
I have included the before and after screens.
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.
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.
Completion time down 40%
Reps who took three to four minutes now finish the form in under two.
Progress felt invisible
The thin line didn't tell how many steps left or which step they were on.
Progress felt invisible
The thin line didn't tell how many steps left or which step they were on.
Refining the design after testing
I did four key design changes, that will be make the scanning and filling the form faster
To address the usability gaps that surfaced in testing, I refined the design once more before final handoff.
Change 01
Stepped tab flow
Overview, Type, Assignee with directional arrows showing reps exactly where they are and what is next.
Change 03
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.
Change 04
Contextual hint on Product Name
“Select the product related to this case” tells reps what the dropdown contains before they tap.
What were the success metrics?
Speed, Accuracy & Rep Velocity
Case creation time was cut by 40%, reducing total logging duration from ~3.5 minutes to under 2 minutes while slashing validation error rates by 80%.
For a high-pressure mobile sales workflow, our core UX objective was making case creation feel effortless and foolproof during live client calls. By replacing infinite scrolling with clear progressive disclosure and unambiguous field types, reps now complete the entire flow without second-guessing.
40%
Case creation time reduced by 40%, cutting logging from ~3.5 minutes down to under 2 minutes.
80%
Validation error rate plummeted by 80%, eliminating repeated form refills and accidental duplicates.