Status
Shipped & Live 🔗
Suitcase.legal Webapp Redesign
Ground-up redesign of legal dispute workflows to boost clarity and retention
TOOLS
TEAM
UX/UI Design & Front-end devevloper — my role
Founder
Full-stack Developer
Back-end Developer
MY ROLE
I led the end-to-end redesign of the Webapp, rethinking the case registration process and core features from design to launch
The Background
The web app is a platform that allows users to sign up and register their legal disputes. Once submitted, Suitcase facilitates the mediation process by contacting the opposing party and guiding users toward a resolution.
The ultimate goal of the platform is to help users reach a settlement or payout efficiently, while minimizing the stress and complexity typically associated with legal disputes.
The Impact
THERE WAS A DECREASE IN …
Drop-off by 35% through a smooth dispute registration flow
Registration time by 40% thanks to streamlined workflows
Support tickets by 30% with a more intuitive interface
THERE WAS A INCREASE IN …
Completion rate by 25% as more users finish the case registration process
Settlement success by 15% through clearer guidance and mediation steps
User clarity & confidence in understanding next steps in the mediation journey
The Solution
View the live site: https://app.suitcase.legal/new
1 Product Overview
Suitcase.legal is a web-based platform that enables users to mediate legal disputes online, bypassing traditional court procedures. It supports users through key steps such as case submission, confidential bidding, and contract creation.
Users don’t need any legal expertise or in-person court appearances. suitcase.legal provides a secure and accessible way to resolve disputes and reclaim money owed, such as rental deposits, severance pay, or similar claims.
> CORE PRODUCT FEATURES
Case submission
Users submit the details of their dispute through a structured form, providing all relevant information to initiate the mediation process.
Multimodal bidding
Both sides of the dispute confidentially submit bids indicating the payout they are willing to accept. This step ensures a fair negotiation without revealing sensitive amounts to the other party.
Contract Generation
If bids from both sides overlap, a binding contract is automatically generated, formalizing the settlement.
Conflict Partners
Parties named in the dispute interact with the platform through the 'Case hub', where they are guided to participate in the mediation process and respond to bids.
Case overview
A dashboard where users have an overview of their cases and track the progress.
Case submission
Multimodal bidding
Case hub
Case overview
2 The Problem
The previous version of the Webapp struggled to provide users with a clear, intuitive, and trustworthy experience. While it contained the necessary features, the overall usability and visual design made it difficult for users to confidently navigate, understand the process, and complete their tasks.
PROBLEM #1
Misaligned assumptions about user behaviour
The homepage was designed under the assumption that users would manage multiple cases at once, featuring a calendar overview of disputes.
In reality, most users only used the platform once to open a single case, making the design feel unnecessarily complex and irrelevant.
PROBLEM #2
Lack of clarity and guidance
Critical information was not surfaced effectively. For example, tooltips containing essential explanations were easily overlooked, leading to misunderstandings about how the platform worked.
Users often reported not understanding the concept of the product, why bidding was necessary, or that their bids were confidential.
PROBLEM #3
Cognitive overload and weak hierarchy
Information was stacked without clear prioritization, and inconsistent use of colours created visual noise rather than clarity.
This made it difficult for users to focus on what mattered at each step.
PROBLEM #4
Trust and reliability concerns
Buggy features (such as contract downloads) and unclear flows left users questioning the professionalism and reliability of the service — a significant problem for a product meant to mediate legal disputes.
> DEFINING THE PROBLEM
"How might we simplify the case registration so that users clearly understand the product, complete key actions without friction, and feel supported throughout the whole digital mediation process?"
Video demo of old webapp design,
3 Goals & Objectives
The redesign was not just about fixing usability issues — it was about redefining suitcase.legal into a product that users could trust and feel comfortable using during a stressful legal process. Our goals were to:
Build confidence from the first interaction
Ensure that users immediately understand what suitcase.legal does, how it works, and why they can rely on it for resolving disputes.
Make complex processes feel simple
Turn legal mediation workflows into guided, step-by-step journeys where the next action is always clear.
Create a calm and focused experience
Reduce visual noise and cognitive overload by introducing a consistent hierarchy, simplified layouts, and a design language that feels approachable and professional.
Ensure reliability and trustworthiness
Design interactions and flows that behave in predictable, consistent ways, so users always know what will happen when they take an action — fostering confidence in the platform.
> GUIDING PRINCIPLES
Laws of UX
Rather than relying only on intuition, I leaned on established UX laws to guide my design decisions — turning abstract problems into clear, actionable principles.
Jakob's Law
Users expect familiar patterns from other platforms.
Hick's Law
More choices = slower decisions.
Millers's Law
People can only hold ~7 items in working memory.
Aesthetic-Usability Effect
Visually pleasing design builds trust.
4 Design Process
With limited resources and a small team, we focused on the fastest path to meaningful improvements informed by real user insights.
User Testing & Interviews
Synthesizing insights
Benchmarking & Inspiration
Redesign & Prototyping
Iteration & Validation
5 Research & Insights
We began the redesign by conducting multiple rounds of user testing and interviews (around 4 sessions in total). These sessions helped us identify where users struggled during the case filing process, and more importantly, at which points they were likely to churn.
The findings were systematically documented and translated into a set of requirements that guided our redesign decisions. These requirements were grouped into different areas of the app. (I.e. Case filing, Multimodal bidding, Casehub, Case overview)
Translating User Pain Points into Clear Design Decisions
📌 Fundamental Questions
Remove the blue sidebar, as it felt too dominant. ( → explored shadcn sidebar patterns for inspiration).
Reconsider the overall structure of the app (user groups, number of cases per account).
De-emphasize the “Account” section, since it is irrelevant for 99% of users.
Remove the calendar and notifications from the homepage, as email notifications are sufficient.
Ensure the web app works in two languages (German and English).
Make commitment clearer — some users thought it was just a non-binding first assessment.
Establish clearer hierarchies between types of information (e.g. bidding).
Highlight secondary/extended information better (e.g. “Our Suggestion”).
Use toggles instead of checkboxes for better interaction clarity.
Reduce reliance on emails for in-app communication.
📌 Case filing
Users often spent longer than 60 minutes filing a case, which sometimes triggered errors — this needed addressing.
Critically evaluate which information and steps are truly necessary for case filing.
Minimize the number of options (e.g. remove sidebar during filing).
Show users how far along they are in the process with continuous progress indicators (e.g. progress bar).
Provide extremely specific error messages so users understand exactly what went wrong.
Introduce a clear onboarding after registration that directly leads into first case filing (no distractions).
Improve contract previews.
Reconsider placement of the “Order Summary” (legally required only for B2C, not B2B).
Keep layouts consistent across user groups (consumers, businesses, lawyers).
Guide users more effectively when placing bids by applying insights from behavioral psychology.
Incorporate real past cases into the platform to strengthen settlement suggestions.
Clarify exactly what users are bidding on.
Ensure predictability in multi-modal bidding interactions.
📌 Case overview
Bids should be placed more prominently because they are the only action.
6 Visual Inspiration
I explored visual inspiration from digital products that guide users through multi-step processes clearly and intuitively. I focused on onboarding flows, progress indicators, dashboards, and bidding modals to see how they balance complexity with simplicity.
These references shaped the visual direction for the redesign of the Webapp, helping create an experience that is both clear and trustworthy.
Onboarding inspiration
Multimodal bidding inspiration
Case overview inspiration
7 The Redesign
These screens highlight the core changes of the redesign, showcasing the key user flows and functionality.
CORE CHANGE #1
Onboarding
OLD DESIGN
Users often felt unsure about what the next step was and struggled to grasp the overall concept of the product, which led to confusion later in the process
NEW DESIGN
The onboarding now introduces the product in simple, broken-down steps when users first sign in, followed by a clear overview of the entire journey—from case registration, to bidding, to conflict partner involvement, and finally to confirmation.
New Onboarding Flow
CORE CHANGE #2
Removal of jarring sidebar
OLD DESIGN
NEW DESIGN
CORE CHANGE #3
Fundamental change in tooltip component
OLD DESIGN
The tooltip was subtle and often overlooked, meaning users sometimes missed important information during case registration
NEW DESIGN
The tooltip is now more prominent and visually noticeable, ensuring users always see key guidance when completing the process.
CORE CHANGE #4
Multi-modal bidding face lift
OLD DESIGN
The bidding modal lacked information hierarchy, leaving users overwhelmed.
Checkboxes were overused everywhere—even for actions beyond their convention of ticking terms and conditions. This added clutter and confusion to one of the product’s core flows, where users set their desired payout.
NEW DESIGN
The redesign introduced clear hierarchy and broke content into sections.
Checkboxes were replaced with intuitive toggles, and supporting text was simplified.
CORE CHANGE #5
Casehub revamp
OLD DESIGN
The previous Casehub suffered from several core issues. It was designed as a low-barrier contact point for conflict partners but failed to communicate its purpose clearly.
The page included too many CTAs, leaving users confused and overwhelmed rather than convinced to join the mediation.
NEW DESIGN
The revamped Casehub aligns with the streamlined design of the case registration flow, creating a consistent and uniform experience. The product concept is explained through clear touchpoints supported by graphics,.
A carousel of customer reviews was added to build trust and better convince conflict partners to participate in mediation.
Old Casehub Flow
New Casehub Flow
