UX/UI Design Case Study: AXIS MUNDI’s website revamp
It would be an euphemism to say that the past few months have been hard for everyone. Owkay, we got to work from home and at the beginning it sounded fun but quickly we had to find a balance between work responsibilities and personal life and this, led to stress…
In this context, I had the opportunity to work for AXIS MUNDI, a company dedicated to the well-being of employees at work. It felt important and meaningful to me to work on this subject because we all are impacted. That’s why I’m quite pleased to present you the UX/UI Design work I did for them!
AXIS MUNDI: well-being and performance at work
AXIS MUNDI was created in the early 2000s to promote well-being and performance at work. The recognized professionals of AXIS MUNDI (psychologists, psychotherapists, coaches…), accompany organizations through programs like PAE (Programme d’Aide aux Employés), group or individual coaching or trainings, towards optimizing the potential of their human resources and contributing to psychological well-being.
AXIS MUNDI has been present in companies to support them and their employees in situations like crisis, lay-offs, promotions… But lately, they’ve seen a boom in solicitations for assistance 🙏
Indeed, a study conducted in february 2020 stated that 88% of french people are stressed, from work (1st) , financial problems (2nd) and personal life (3rd). France is even ranked 3rd among European countries, where employees feel stressed on a daily basis.
But the Covid crisis enhanced those numbers since 35 % of confined people were diagnosed with psychological distress and the numerous lockdowns increased those symptoms.
Sources: Opinion Way for the Fondation Ramsay Générale de Santé / February 2020 / The Lancet
The problem today for AXIS MUNDI is that their help is widely needed but their website is not helping. Instead of guiding the users to understand the offer and get in touch easily, the website is unclear 😕
- The content is very institutional (written by psychotherapists for (?) psychotherapists);
- It’s not updated;
- It doesn’t respond to — or mention — nowadays problems;
- Finally, since nothing is clear and updated, the website can not even be used as a prospecting tool.
- We can also mention the UI Design that is ageing, and doesn’t convey a sense of reassurance or expertise.
From that brief and my first research, I headed to a 5 days work to revamp the website. My process was to empathize with the users to get to know — beyond AXIS MUNDI’s needs — what would be the website’s users needs. Who are they and what are they looking for when coming to this website ?
HRs — the multi-skilled position in search of help 🤯
Thanks to the Stakeholder interview that got me here, I learned that the users of the website are not employees, as I first assumed. I thought that employees who are living difficult things in their work, would be the ones getting in touch with AXIS MUNDI for help or advice. But they are not!
HRs (Director of Human Resources, Office managers…) are the ones who have that responsibility. Thanks to the several researches I conducted, I got the following insights:
- The company’s employees ask for help directly to the HRs, or to their manager
- 42% of interviewees estimate that their company value Quality of Worklife (QWL) only at 3 on a scale from 1 to 5 (5 being the highest)
- Only half of them have enough time available to deal with QWL
- Their first means to find a provider are from recommendations, then the Internet
- Their criteria to choose a partner are price at 86%, quality at 83%, contact at 59%, and rates at 50%
- and 65% of them are faithful to their current partners
Sources: 4 User interviews, Online survey conducted upon 10 people from this field and insights from the corporate magazine “ Le Forum de la Qualité de Vie” #1 et #2.
To sum up this research, let’s meet our persona to better understand what work should be done in AXIS MUNDI’s website revamp!
Let’s meet Laurence 😃
Revamp of www.axismundi.fr 💥
With all this information in mind, I now had a clearer view on the features to include in the website, and how to conduct my revamp. Indeed, Laurence needs (updated) information, she needs to know that — facing the current situation — AXIS MUNDI will be a reliable partner to help her employees.
Also, conducting a quick competitor’s analysis, I gathered ideas of elements / features to add to the website along with the information I found with my user research, such as:
- Presentation videos
- Leaflets to be downloaded
- Contact CTA present and visible
- Relevant presentation of the company and their solutions
- Turn-key tools (like the “Espace Ressources, a product not really shown on the website, yet very appreciated by the clients who use it)
- Key numbers to reassure the HRs (key strengths, rewards, client references…)
Review of the sitemap
To get clearer information on the website, I first decided to merge somes pages who have so little content to have an interest left alone, but great to present a service, all combined.
In the sitemap below, you can see in red the pages I deleted, and in purple, the ones I added.
I started with some Low-Fi wireframes and quickly moved to Mid-Fidelity wireframes that could be presented, discussed and tested.
Mid-Fi and Features
The header for example changed a lot. First I wanted to create a header with all the information needed (schedules, address, contact…) but then, it felt overloaded and confusing. Also, to get it more modern and lightened, I opted for a full-width header.
Presenting the revamp in Mid-Fi, the client got excited and creative, so they decided to add a new section “Blog” to get more content and provide further expertise to their clients.
The same happened with the addition of an FAQ.
After many iterations with the client, I followed my work with a last day of UI Design.
Conception and High-Fidelity Wireframes
I first started by thinking about the company’s brand attributes and what Laurence could be looking for in AXIS MUNDI, and I found: Human, Corporate, Confident and Expert.
This led me to this moodboard:
- Soft colors, blue for corporate and a tint of warmth to remind the Human aspect
- Humans in all the visuals because this aspect is very important, we are not talking about a software or an online platform
- Touch, Warmth and movement are all present
My constraints were:
- Using the blue of AXIS MUNDI;
- Using a typo close to the one they used in print (Century Gothic) that would be a Google Fonts for better integration;
- Decline the main color into a new graphic charter and 1 color for each service
Here is the style tile created:
The wireframes was very well adopted by the client! They agreed on almost every element except for the EXO typeface. They would much prefer staying neutral on that and only keep the Poppins typo, since it’s going to be used for their print documents also.
Responsive design
Of course, the website was created mobile first:
To conclude
This project was my first work on my own as a freelancer 🚀
I had the chance to practice #UXDesign and also #UIDesign which is not my strength YET, and I’m getting there, so don’t hesitate to leave me your comments on my work!
I am very pleased with the result and the good undertsanding and relationship I had with the client. I’m looking forward to see now when it will be developed and I’m very happy to continue working with this client in the future! So stay tuned to see what’s coming next 😀
