Designer
Avocat Michel
UX/UI Design, Web Design
Web Design project for a French law firm for which I created a clean and intuitive interface that prioritises the most important features. With an emphasis on elegance and professionalism this project aims to capture the essence of the firm's values, while establishing a strong visual identity that resonates with the clients.
​
Design Toolkit
​
Figma
Adobe Illustrator
Adobe Photoshop

Project Overview
To contact a lawyer for the first time it's sometimes a delicate matter for people who don't know how to approach or to choose their attorney, for fear of having to face excessive costs and long legal procedures. The new platform should enable direct bookings while user feels confident thanks to detailed informations.
Problems
People who don't know how to choose their proper lawyer, unclear pricing, unfriendly user interface.
Solutions
Clear explanation of the expertise areas, pleasant and easy user interface, transparency of procedures and costs.

Competitor Analysis
The first step was to analyze the competitors and get familiar with the existing law firm websites, their pros and cons. The purpose was to see the competition on the market and understand what is the value they offer, what can motivate the user to choose them from their platforms.
My Role
I designed the user experience and interface of the website performing the following tasks:
-
Ideation and User Research
-
Sketching and Wireframing
-
Prototyping with Figma
Features
​
-
Introduction
-
Expertise
-
Team page
-
Contact form
Weak points
​
-
Missing appointment form
-
Missing pricing informations
-
No translation of the pages
-
No possibility of online payment
-
Wrong use of color palette and contrast

Persona
Hélène, 41 years old, is a divorcing woman who is seeking legal advice and support during this challenging time.
She is determined to navigate the complexities of the divorce process and secure the best possible outcome for herself.
Pain Points
-
Limited financial resources to invest in legal support
-
Lack of knowledge about legal rights and options
-
Feeling emotionally drained and exhausted
Objectives
-
Financial independence and stability
-
Greater emotional resilience and well-being
-
Successfully navigate the divorce process
User Journey

User Flow
Online Booking
NO
Select Service
Select date and hour
Was the payment succesfull?
Fill out the payment form
Fill out the information form
YES
Confirmation
and reminder

Wireframing
The website structure has been built with Figma to have a schematic view of the software, flow and concept. This fundamental step will be followed by the prototype.
Style Guide
It's an ecosystem of tools, guidelines, shared values and principles which help to have a more efficiently consistent design.
Fonts
64 px. Caudex
48 px. Caudex
32 px. Caudex
30 px. Avenir
24 px. Avenir
18 px. Avenir Light
​
Colors
Components



Prototype
This last step permits to test the product with the users to be aware of our mistakes and come up with a solution. This usability testing is about trial and error and the capacity to improve the final design.
Through usability testing we fixed the foreground color and the button's interactivity, changing color when the mouse moves over for some of them.