Suitcase.legal Website Redesign – Putting Users First
Suitcase.legal Website Redesign – Putting Users First
Simplifying legal content, structuring information clearly, and increasing user engagement and conversions.
Simplifying legal content, structuring information clearly, and increasing user engagement and conversions.
TOOLS
Figma
Svelte
Javascript
Tailwindcss
Figma
Svelte
Javascript
Tailwindcss
TEAM
UX/UI Design & Front-end developer — my role
Founder
Full-stack Developer
ROLE
I led the redesign, from restructuring content and building a scalable design system to coding the site.
The Background
Founded in 2022, Suitcase Legal is a digital mediation platform that helps individuals and businesses resolve disputes efficiently. The platform simplifies complex legal processes by guiding users through mediation online, making dispute resolution more accessible to everyone.
The Impact
THERE WAS A DECREASE IN …
Overall bounce rate by 22%
THERE WAS A INCREASE IN …
Visitor-to-sign-up conversion rate by, 37% after clarifying CTAs and restructuring the information hierarchy.
Mobile engagement increased by 45%, driven by the responsive-first redesign.
Improved averaged session duration by 31%, showing stronger engagement with the content
(Figures tracked via Plausible Analytics)
Final design, view live site: www.suitcase.legal
1 The Problem
The original website was designed by the founder, a lawyer by training, and was not designed with users in mind. The site was dense with legal jargon, cluttered layouts, and long paragraphs that made it difficult for non-legal users to understand the service.
Content was available only in German, limiting accessibility. Random graphics added visual noise without supporting the message, and the lack of a design system led to inconsistencies across pages.
As a result, users struggled to grasp the value of the platform, trust in the service was low, and the business risked losing potential clients before they even tried the product.
The original website was designed by the founder, a lawyer by training, and was not designed with users in mind. The site was dense with legal jargon, cluttered layouts, and long paragraphs that made it difficult for non-legal users to understand the service.
Content was available only in German, limiting accessibility. Random graphics added visual noise without supporting the message, and the lack of a design system led to inconsistencies across pages.
As a result, users struggled to grasp the value of the platform, trust in the service was low, and the business risked losing potential clients before they even tried the product.
USER PROBLEM
Weak trust and motivation
High cognitive load
Confusing navigation and flow
Low clarity and scanability
Limited accessibility
Steep learning curve for a new concept
BUSINESS PROBLEM
Low conversion potential
Limited audience reach (Site was only available in German)
Inefficient user onboarding
Weak brand positioning
High drop-off risk
Founder-driven design constraints
2 The Context
When I first joined the project, the existing website had been designed by the founder, who came from a legal background rather than a design or user-experience background. As a result, the site was not structured with users in mind
When I first joined the project, the existing website had been designed by the founder, who came from a legal background rather than a design or user-experience background. As a result, the site was not structured with users in mind
> GENERAL OBSERVATIONS
Overly complex and text-heavy
Dense paragraphs made it hard for visitors without legal knowledge to quickly grasp the service.
Overly complex and text-heavy
Dense paragraphs made it hard for visitors without legal knowledge to quickly grasp the service.
Cluttered layout
Information was presented without a clear hierarchy, forcing users to carefully read through every section to understand the concept.
Cluttered layout
Information was presented without a clear hierarchy, forcing users to carefully read through every section to understand the concept.
Limited accessibility
The site was only available in German, excluding a large portion of the intended audience.
Limited accessibility
The site was only available in German, excluding a large portion of the intended audience.
Unhelpful visuals
Graphics were random and decorative, but did not support or clarify the content.
Unhelpful visuals
Graphics were random and decorative, but did not support or clarify the content.
New and unfamiliar concept
Since the service itself was novel, users needed simple, digestible explanations, which the old design did not provide.
New and unfamiliar concept
Since the service itself was novel, users needed simple, digestible explanations, which the old design did not provide.
Source: Old design done by the Founder.
3 Goals & Objectives
The redesign focused on making the website more user-friendly, trustworthy, and scalable, while addressing the issues with the old site:
The redesign focused on making the website more user-friendly, trustworthy, and scalable, while addressing the issues with the old site:
General observations
Establish trust
Create a professional and credible look and feel that reassures users about the service.
Establish trust
Create a professional and credible look and feel that reassures users about the service.
Help users find what they need
Organize content in a clear, logical flow so visitors can quickly get to the information relevant to their situation.
Help users find what they need
Organize content in a clear, logical flow so visitors can quickly get to the information relevant to their situation.
Ensure consistency
Build a unified visual language and reusable components so the design feels coherent across all pages.
Ensure consistency
Build a unified visual language and reusable components so the design feels coherent across all pages.
Simplify complex content
Present legal concepts in plain language, supported by meaningful visuals, to make the service easier to understand for everyone.
Simplify complex content
Present legal concepts in plain language, supported by meaningful visuals, to make the service easier to understand for everyone.
Design for scalability
Develop the site on a foundation of reusable design components, ensuring they are applied uniformly (e.g. avoiding multiple inconsistent versions of primary buttons or other UI elements).
Design for scalability
Develop the site on a foundation of reusable design components, ensuring they are applied uniformly (e.g. avoiding multiple inconsistent versions of primary buttons or other UI elements).
Information Architecture Planning
To support these goals, I restructured the website’s information architecture to improve the customer experience.
The new structure makes it easier for users to navigate the site and quickly find the information most relevant to them, rather than having to sift through long and cluttered pages.
To support these goals, I restructured the website’s information architecture to improve the customer experience.
The new structure makes it easier for users to navigate the site and quickly find the information most relevant to them, rather than having to sift through long and cluttered pages.
4 Design approach & Process
The redesign followed a user-centered approach, focusing on building trust and confidence in Suitcase.
The goal was not only to optimize the landing page to reassure users of the service’s credibility but also to create a structured site, where information about the services is clearly organized and users are progressively guided to the content most relevant to them.
To achieve this, I followed a structured, step-by-step process emphasizing clarity, intuitive navigation, and a consistent, scalable design system.
The redesign followed a user-centered approach, focusing on building trust and confidence in Suitcase.
The goal was not only to optimize the landing page to reassure users of the service’s credibility but also to create a structured site, where information about the services is clearly organized and users are progressively guided to the content most relevant to them.
To achieve this, I followed a structured, step-by-step process emphasizing clarity, intuitive navigation, and a consistent, scalable design system.
Wireframes & Layout Exploration
Developed low-fidelity wireframes to explore different page structures and content layouts.
Developed low-fidelity wireframes to explore different page structures and content layouts.
Content Strategy & Simplification
Transformed dense legal text into concise, plain, easy-to-understand language.
Transformed dense legal text into concise, plain, easy-to-understand language.
User Flows & Navigation
Mapped out key user journeys to make sure visitors could quickly find what they were looking for.
Mapped out key user journeys to make sure visitors could quickly find what they were looking for.
Visual & Interaction Design Iterations
Designed custom visuals and graphics to help users grasp key messages at a glance, making the content easier to understand even when skimming.
Designed custom visuals and graphics to help users grasp key messages at a glance, making the content easier to understand even when skimming.
Prototyping & Feedback Loops
Built the design into the website, gathered feedback from users and iterated until the design felt intuitive and polished.
Built the design into the website, gathered feedback from users and iterated until the design felt intuitive and polished.
Development & Testing
Developed the website using Svelte and TailwindCSS, building clean, reusable code that mirrored the scalable design system and ensured full responsiveness across all screen sizes.
Integrated Paraglide for language translations and tested thoroughly to guarantee performance, accessibility, and a smooth user experience.
Developed the website using Svelte and TailwindCSS, building clean, reusable code that mirrored the scalable design system and ensured full responsiveness across all screen sizes.
Integrated Paraglide for language translations and tested thoroughly to guarantee performance, accessibility, and a smooth user experience.
Challenges
One of the main challenges in the redesign was striking a balance between simplifying complex legal information and keeping it accurate. The site had to feel approachable for users without a legal background, while remaining credible and precise.
Another trade-off was how much information to show up front versus what to progressively disclose, ensuring users weren’t overwhelmed but could still dive deeper when needed.
One of the main challenges in the redesign was striking a balance between simplifying complex legal information and keeping it accurate. The site had to feel approachable for users without a legal background, while remaining credible and precise.
Another trade-off was how much information to show up front versus what to progressively disclose, ensuring users weren’t overwhelmed but could still dive deeper when needed.
AFTER
Structured layout with clear hierarchy and logical content flow.
Structured layout with clear hierarchy and logical content flow.
Simplified legal language rewritten in plain, approachable terms.
Simplified legal language rewritten in plain, approachable terms.
Ample spacing and clean visuals to make content easy on the eyes.
Ample spacing and clean visuals to make content easy on the eyes.
Scannable sections with headings and highlights so users can quickly grasp the key message.
Scannable sections with headings and highlights so users can quickly grasp the key message.
Result: pleasant to scan and easy to trust, guiding users toward the next step.
Result: pleasant to scan and easy to trust, guiding users toward the next step.
BEFORE
Cluttered layout with too many elements competing for attention.
Cluttered layout with too many elements competing for attention.
Dense legal jargon that was hard for non-lawyers to understand.
Dense legal jargon that was hard for non-lawyers to understand.
Overwhelming amount of text, forcing users to carefully read every line.
Overwhelming amount of text, forcing users to carefully read every line.
Result: cognitive overload → users struggled to understand the service and lost trust in the platform.
Result: cognitive overload → users struggled to understand the service and lost trust in the platform.
Tools & Collaboration
I designed the site in Figma, using it for wireframes, components, and interactive prototypes.
Beyond design, I was also responsible for coding and developing the website, which I built with the Svelte framework and Tailwindcss for styling. Throughout the process, I worked closely with the founder to refine legal content and align on business goals, while keeping the user perspective central to every decision.
I designed the site in Figma, using it for wireframes, components, and interactive prototypes.
Beyond design, I was also responsible for coding and developing the website, which I built with the Svelte framework and Tailwindcss for styling. Throughout the process, I worked closely with the founder to refine legal content and align on business goals, while keeping the user perspective central to every decision.
5 Final design
The redesign presents complex information in a clear and organized way, addressing the initial challenge of building trust with users who were previously uncertain about the service.
Thoughtful use of supporting graphics and refined UI elements gives the site a lighter, cleaner feel, making it visually appealing while conveying a modern, professional impression.
The redesign presents complex information in a clear and organized way, addressing the initial challenge of building trust with users who were previously uncertain about the service.
Thoughtful use of supporting graphics and refined UI elements gives the site a lighter, cleaner feel, making it visually appealing while conveying a modern, professional impression.
Key Metrics
40-50%
Site visits
Improved layout, clearer navigation attracted more visitors to the site.
Improved layout, clearer navigation attracted more visitors to the site.
42%
Time spent on site
Clearer structure, simplified language, and improved readability encouraged users to stay longer.
Clearer structure, simplified language, and improved readability encouraged users to stay longer.
2x
Users filing cases
Clearer CTA and trust signals led to more conversions.
Clearer CTA and trust signals led to more conversions.
