Redesign of a website

A better user experience and more sales for the customer
duration: 2 m
Year : 2022
Role: UX/UI Designer

context, sports coaching and alternative medicine

Julien Patane is a client offering several services: Sports coaching, kinesiology, reflexology and cardiac coherence. He has been practicing since 2017 and shares his website via business cards or on the Superprof platform. Having made his own website, he asked me to completely redesign it. It was not only a question of painting it, but also of rethinking the architecture in order to gain in clarity and understanding.

Nouveau site Julien Patane

The challenge

Users get lost when they see the different services

The client offers several different services and the user gets lost. This is due to a poor tree structure and information architecture. We no longer understand if the client is selling a service, or if it is a blog.

the Mission

Design a better user experience and increase the number of customers

Julien Patane came to me to completely redesign his website so that his users could better understand his services and attract new customers. So I took on the role of UX and UI designer for this project.

The process

Use the design thinking approach to define and solve the problem

The team included a developer and myself. As the sole designer, I was responsible for conducting research, designing sketches, wireframes, mock-ups and a prototype, and undertaking usability testing. I worked directly with the client to understand their environment and purpose. I also interfaced with the developer to plan and conduct acceptance testing of the website.

Design thinking method


First, I needed to better understand the users, their needs and the website.

The Research Plan

Set research objectives and establish a plan

I defined some research objectives and decided on the best research methods to achieve them:

1. Learn as much as possible about

Evaluation of the website

2. Learn as much as possible about the users

User interviews & usability testing

3. Understand current solutions and the competition


Evaluation of the website

The site evaluation revealed usability issues

The goal of the evaluation was to quickly and easily find usability issues that a user may encounter. I went through the site like a user looking for a service. Here are the main issues I found.

Mobile first

Non responsive page !

The site has a mobile version, but does not respond to the different browser sizes on computer.


Blog, or services sold?

It is not easy to understand that the client is offering services.

Architectural design

Questionable UI

Poorly aligned texts, not very readable font, poorly structured information.

User exp.

Too many clicks to get the job done

Access to the form and pricing is complicated.


Who are they, and how can we better understand them?

My goal was to find out how the user feels during his journey on the site. First, who are the users? With the help of the interview with the client, we were able to define 3 personas.

As the number of contacts was not sufficient to have a representative sample, I extended the users to a group of about twenty people from 20 to 40 years old. I divide them into 3 groups, each with a specific mission.


Group 1

Inquire about a group coaching session and contact the client via the website form.


Group 2

Inquire about an individual coaching session and contact the client via the website form.

Alternative medicine

Group 3

Find out more about kinesiology, and make contact for a session with the client via the form on the site.

usability testing

User usability tests revealed weaknesses

Each user had to answer a SUS, UEQ and sentence completion questionnaire that I set up. For some of them, I was also able to have a face-to-face or telephone interview. Here are some feedbacks.

Navigation is not intuitive

Some pages are not optimized for mobile.

It lacks a dedicated Rates section

The form is impossible to find.

It would give us more confidence if we see Julien on the main page.

It is complicated to navigate between the pages of the site.


Find solutions, get rid of bad ideas

The benchmark allowed me to analyze competing sites. The objective was to understand how their services were sold, and if some of them offered several identical services to my client's.



At this point, it was time to redefine the objective and narrow its scope based on the information gathered from users.

Problem statement

Users need to understand the services sold by the customer, to be able to access prices and contact easily.

Ideation, Prototype, Test, Repeat

With user input and a redefined problem statement in hand, it was time to propose solutions and validate them.


Card sorting, to better understand the user

Card sorting is one of the methods used to build an information architecture by involving end users. With the help of 2 people, I will perform an open card sorting that I will animate. I will have previously listed on green post-it notes the content of the website that the client wants to keep.

Photo tri de carte
Step 1: Write on each post-it the content that the customer wants to keep.
Photo tri de carte
Let users categorize content with blank yellow post-it notes.
Photo tri de carte
Review with users their approaches, then agree on a common categorization.

The tree structure before

The first step was to analyze the existing tree structure. Why doesn't it work? Where could I make improvements? I started by drawing the tree structure for more visibility. 

Arborescence avant
At each floor a choice is mandatory to know more. This results in too many clicks and a lost user.

The tree structure after

Thanks to the card sorting workshop, the users' feedback and my analysis, I draw the new tree structure. Objective: To simplify the user's path, and better structure the information.

Arborescence aprés
Arborescence simpliée avec moins d'étages = Moins de cliques. Ajout de nouvelles sections claires et rapidement cliquables.


Wireframes, the solution

Mobile first! The tree structure being validated, I start with the mobile version. The challenge at this point is to make the user understand quickly and clearly that the site contains different services. I will validate my ideas with the client throughout the project in order to progress step by step.

I'll start drawing the home page. The choice to split the screen in two for more dynamism.
Listening to user feedback, they quickly wanted to know who the coach was.
The choice to present the services in blocks was made at the beginning.


Refine the solution through usability testing

I designed a mid-fidelity prototype to validate the initial design solution. I wanted to know if the redesign had solved some of the clarity, flexibility, and navigation issues.

Photo prototype cliquable


Always listen to users

So I sent the prototype to my user group to test this new version and hear their feedback. Here are some feedbacks.

The pricing section is not clear

The route is more fluid

Access to the contact is easier

It is no longer possible to see opinions and give your own

There is a missing FAQ

We understand better the purpose of the site


Use the information gathered to iterate on the original solution

Using the insights gained from usability testing and design critiques, I iterated on the wireframes and visual design. The following sections highlight the main improvements to the site and user journey.

A quick overview of the services offered

I wanted to make sure that when the user arrives on the site, he will understand that several services are offered, and that they can be complementary.

Ask to make a choice

On the original site, the client asked the user to make a choice between sports, kinesiology or the contact section. A click that would prevent us from quickly finding out what services were offered behind each choice.

Page accueil site original

An easier way to get in touch

The benchmark gave me some good ideas.

Access to immediate contact

As seen in the original site's tree structure, making contact is difficult. The user who can't make contact will leave the site quickly. Only 20% of the testers found the form and admitted to me that they did not leave the page because it was a test.

Ancien formulaire

A dedicated pricing section

Finding prices was complicated.

Tarif ancien site

Confused users

The test users confided to me that they were lost. They read the information about sports and alternative medicine, but no prices. However, this information existed...

The existing form - besides being difficult to find - was filled in 2 steps. One more click that takes the user away.

An attractive form

Formulaire ancien

First click to continue sending the form. And the green filling color "pollutes" it.

Second click. Moreover, the form does not fit in a page, we have to scroll down to send it.

Formulaire ancien

Keep the essential

A form should contain only the important information. In the original, the customer was asked to check the service he was interested in. But the user can also describe his request in the "message" field with more information.

Navigating between the different sections was complicated.

Intuitive navigation

Confusing navigation

We had to use the back arrows of the browser to be able to change section and discover other services. Moreover, the labels like "contact / useful info" are not clear, what do we find behind? The navigation is affected.

The final design

The prototype is validated, time to choose the colors.

Part UI

The prototype comes to life

As seen during the interview, the client wants a warm blue, and as energetic colors yellow and orange. I suggest several color palettes, while refining a few questions: What color should be used for the header and footer? A color for the words in bold? Any other particular preferences?

Palettes de couleurs

final design

The construction of the site

The project is sent to the developer, and we work hand in hand to finalize the project. A few weeks later, the website is finished.

Nouveau site Julien Patane


A better site for users

Ease of use, ease of contact and understanding of the services sold were 3 key metrics that were measured during the research phase and the second usability test. I could see that the redesign had a positive impact on users.

Easier to use

I asked users how easy the new site was to use. 100% of users agreed that it was easy to use, compared to 30% originally!

Easy to get in touch with

Thanks to the "contact me" button on the front page and in the navbar, 100% of users found it very easy to get in touch.

Understanding of the services offered

Users have reported to me that now the purpose of the website is understood. I believe that these improvements will result in a higher contact rate and consequently, more new customers.

and then?

Next step

Contact the client again in 6 months to see if the number of clients via the site has increased. If not, reiterate the process. I also asked the client to:

Thanks to


Thanks to the developer Nicolas Maitre for his work. Do not hesitate to visit his website !

En cliquant sur "Accepter tous les cookies", vous acceptez le stockage de cookies sur votre appareil pour améliorer la navigation sur le site, analyser l'utilisation du site et contribuer à nos efforts de marketing.