Axelsons
Made for: Axelsons
2023
Role: Brand design, researcher & UI designer
Brief: How could we increase Axelsons low conversions through a redesign of their website?
Some months Axelsons top over 100.000 visitors on their homepage and 30.000 to their education pages and their main issue was a lack of conversions. Many people are visiting their pages but are not booking their services.
Intro
Axelsons Institute provides courses in health and wellness and is the leading massage and chiropody school in the Nordic countries.
Axelsons aims to educate therapists so that massage and chiropody is readily available across Sweden and make the country as healthy as it can be. During this 11 week project Axelsons entrusted us, a team of 6 UX-designers to use our expertise and help better elements of their website.
Qualitative
During the research phase the team used different qualitative methods and the two that showed most was:
Usability testing
Interview with the customer service department
Usability Testing
To truly get the idea of what a user thinks of a website one should use user testing as a method. In total we conducted 20 user tests. 10 on desktop and 10 on mobile.
Findings:
Both platforms shared multiple pain points for the user, mainly;
No clear typographic hierarchy
Too many choices
Overwhelming amounts of information
Information that appears twice
Event calendar is difficult to understand.
Interview with the customer service department
An interview with the customer service department showed that users call in to ask for information that is present on the website which showed us the obvious problem ‒ there is so much text that the user can’t find or doesn't bother looking for information.
Ideation
Through deskresearch, qualitative, and quantitative we unveiled the UX and UI issues that Axelsons had. Some correlated their difficult time with conversions and others were more general but they added up.
Research
Issues we uncovered:
Slow loading time
The website is not satisfying for the eye
Bad colour contrast at certain places
Annoying chatbot that is in the way
Scattered content
Unreadable calendar
Messy course information
Lack of testimonials
Unsatisfying banner at certain pages
Strong brand but little use of it
Card Sorting
We took these issues and sorted them into categories to get a feel of what we felt were the most prominent issues.
Four groups of issues:
Narration
Navigation
Information and content
UI/UX
Narration: Axelsons is a strong brand but this is not an element that they use on their website. If you can brag about your diploma being one of the strongest within massage and chiropody in the Nordic countries, why not do it?
Navigation: Provide clear labels for boxes in order to streamline navigation while seeking course information.
Information and content: Most of the information is mentioned twice or can be more effectively communicated. There is also a lack of information that fosters trust such as testimonials or a section to present the team.
UI/UX: there are several issues and recommendations for improvement that can enhance the overall user experience. Currently the user was provided with an unsatisfactory experience that would annoy them, and not meet Axelsons need of enhancing their conversions.
From here the team took different areas to focus on whilst still staying connected and collaborating. I took the lead of defining the brand and forming the aesthetic for the UI of the desktop user experience.
We wanted to get an idea of how the entire page was going to look when the new elements had been added and old ones removed
Lo - Fi mobile version:
Post-Usability Testing Persona
After the usability testing of the Lofi-version of Axelson's’ website for both desktop and mobile version we decided to construct a persona that matches up with the identity of Axelsons’ potential users. This approach was meant to build a persona based on users’ frustrations and goals with Axelsons.
Insights from Usability Testing:
Usability testing showed that 70% of participants shared Erika’s confusion over unclear curriculum details, influencing the creation of her persona to prioritize clarity in our educational offerings.
Persona’s Impact on Business Goals:
Targeting Erika's needs, we aim to boost user satisfaction by 30%, anticipating higher enrollment due to a more intuitive website experience.
Design
I want to preface this part by saying that Axelsons website is not bad. They do not need an entire redesign. We worked with their design and aimed to improve what already existed. We did this by not creating a normal design system but working through atomic design.
We wanted to get an idea of how the entire page was going to look when the new elements had been added and old ones.
Hi - Fi
Lo - Fi version of Course page:
On the left you can see their previous hero image on the massage course page. Whilst it conveys the message of what page you are on there is not much more to it. On the right is our redesign which presents their flagship course “The Swedish classical Massage”, a small bio and a read more button. We also made the banner a bit bigger so the image could take its space and really show the picture of Swedish massage.
User Persona
Brand Design
Axelsons also had articles from previous students that they wanted to use so we decided to add them as testimonials for social proof and trustability to the brand. There is one testimonial on the bottom of the massage page from a company. The testimonial is filled with text and does not really tell the story of how and why a course at Axelsons will give both knowledge and perhaps a new occupation. Axelsons also had articles from previous students that they wanted to use so we decided to add them as testimonials for social proof.
Typography & Button Design: A Fresh Take for Axelsons
Revitalized Typography: We've overhauled the typography on Axelsons' website with legibility and brand personality in mind. The new font selections are not just a nod to modern aesthetics but also to improved readability across all devices.
Intuitive Buttons: Accessibility and appeal go hand-in-hand in our redesigned buttons. For desktop, we've chosen a color scheme that complements the brand,
Course cards
The course cards took up too much space on the site so we aimed to make them smaller with less text and add important information so the user could easily see the relevant information on pricing and length of the course.
Buttons
The old buttons were very chunky and didn't have that much padding even if their parent containers were a bit bigger. We made two sets of buttons, one smaller and one bigger and on both we added more padding so that they would fit the parent container better and not feel so small.
