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.
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.
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 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.
First, I needed to better understand the users, their needs and the Julienpatane.com website.
I defined some research objectives and decided on the best research methods to achieve them:
1. Learn as much as possible about Julienpatane.com
Evaluation of the website
2. Learn as much as possible about the users
User interviews & usability testing
3. Understand current solutions and the competition
Benchmark
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.
The site has a mobile version, but does not respond to the different browser sizes on computer.
It is not easy to understand that the client is offering services.
Poorly aligned texts, not very readable font, poorly structured information.
Access to the form and pricing is complicated.
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.
Inquire about a group coaching session and contact the client via the website form.
Inquire about an individual coaching session and contact the client via the website form.
Find out more about kinesiology, and make contact for a session with the client via the form on the site.
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.
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.
Users need to understand the services sold by the customer, to be able to access prices and contact easily.
With user input and a redefined problem statement in hand, it was time to propose solutions and validate them.
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.
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.
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.
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 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.
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
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.
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.
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.
The benchmark gave me some good ideas.
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.
Finding prices was complicated.
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.
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.
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.
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 prototype is validated, time to choose the colors.
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?
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.
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.
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!
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.
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.
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 the developer Nicolas Maitre for his work. Do not hesitate to visit his website !