Modernizing legal case landing pages for AEQUIFIN

Role: UX/UI Designer & Frontend Developer
Client: AEQUIFIN
Outcome: A reusable, dynamic landing page template with interactive elements, integrated into AEQUIFIN’s backend

The challenge

AEQUIFIN, a growing legal tech company, needed to standardize and modernize their case landing pages. Previously, each page was:

• Manually designed and developed, leading to inconsistencies and a slow process.
• Built with outdated technology, making updates slow and difficult.
• Lacking interactive elements to engage potential sponsors.

Goal: A uniform template that could be automatically generated from their backoffice, with dynamic data and multilingual support.

Standardized display of key metrics (funding progress, budget, claim amount) and clear CTAs.

My process

Research & design

• Research and stakeholder interviews: Identified core content blocks (e.g., case description, financials, sponsorship details).
• Figma prototyping:
  • Designed a scrollitelling layout to guide users through the case.
  • Created wireframes for the interactive calculator, ensuring it was intuitive and visually distinct.

Design highlights:

• Prominent display of key metrics (e.g., Klageziel, Prozessbudget).
• Interactive calculator to let users explore potential returns.
• 5-step sponsorship process to simplify participation.

Interactive sponsorship calculator

To help potential sponsors understand their potential returns, I designed and implemented an interactive calculator using Svelte. Users can adjust their sponsorship amount and the expected process result to see their profit share and cash multiple in real time.

Frontend: Built with Svelte for reactivity and smooth user interactions.

Backend integration: Worked with the Symfony developer to ensure the calculator’s logic aligned with AEQUIFIN’s financial models.

UX considerations: Pre-filled default values and synchronized sliders/input fields to reduce friction.

Result: Users can now visualize their potential earnings, making the sponsorship opportunity more tangible and appealing.

The interactive calculator lets users adjust their sponsorship amount and expected process result to see real-time profit share and cash multiple.

Development & integration

• Frontend (Svelte):
  • Built the interactive calculator with real-time updates.
  • Ensured responsive design for all devices.
• Backend collaboration (Symfony/Twig):
  • Worked with a developer to fetch case data from the database.
  • Integrated the Svelte component into Twig, handling props and reactivity.
  • Implemented multilingual support for German and English.

Technical challenges:

• Svelte + Twig integration: Solved by passing data as props and using API endpoints.
• Dynamic data: Ensured the template could render any case’s details without manual updates.

The outcome

• Consistency: All landing pages now follow the same design system.
• Efficiency: New pages are generated automatically from the backoffice.
• Engagement: The interactive calculator helps users understand their potential returns, increasing trust and conversions.
• Scalability: The template is reusable for future cases and supports multiple languages.

Key features

Lessons learned

• Hybrid workflows: Combining design and development feedback loops saved time but required clear communication.
• Legacy systems: Integrating modern frameworks (Svelte) with older tech (Symfony/Twig) is challenging but doable with the right collaboration.
• User-centric design: The interactive calculator was a game-changer for engagement—small interactions can have a big impact.