Allurion

Allurion Technologies specialises in non-surgical weight loss solutions, notably the Elipse Balloon—a swallowable gastric balloon promoting a feeling of fullness. Their innovative approach offers an accessible and effective alternative to traditional weight loss methods.

The client wanted to optimise the user experience of the Clinic Locator to link users to both online and offline Allurion approved advisors / partners for potential conversion.

Type
Website
Deliverables
UX Design, UI Design
The Brief

The primary objective of the project was to increase user experience and customer journey of clinic locator in order to positively impact and increase the number of qualified leads.

For B2C users:

  • Establish trust among users and brand credibility, by seeing all our partnering clinics globally

  • Leverage it to generate more leads through our contact forms

  • Incite customers to make bookings with their desired clinics through our Customer Care Managers (CCMs)

  • Increase our search ranking and website traffic via SEO

For B2B users:

  • Build relationships with our partnered clinics and contribute to their visibility

  • Provide per priority more visibility to our Centers of Excellence (CoE), who belong to the top tier of our Loyalty Program

Process

Once I was briefed on the project, I began by reviewing the documents supplied by the client and checking the expectations, requirements, and scope. Then, I conducted a UX audit on the clinic locator page.

I identified several challenges, and among them, two major insights stood out.

Firstly, the page was not mobile-friendly. The client emphasised that it needed to be 'thumb-friendly,' as approximately 70% of users access the page from mobile devices. However, I discovered a scroll frame within a scroll frame in a list card, making it extremely difficult to navigate the page. Additionally, there were numerous elements at the top, causing small device users to be unable to see any list card upon landing on the page. And in the map view, there were no CTAs like 'Book an appointment,' requiring users to go back to the list view to proceed further.

Secondly, this 'Centre of Excellence' was causing confusion. The list featured two types of centres: one categorised as a regular centre and the other as a Centre of Excellence. However, there was no explanation provided anywhere to inform users about the meaning of 'Centre of Excellence' or the criteria for selection. This lack of clarity could potentially make other regular centres seem inferior, leading users to hesitate in choosing centres closer to them. Furthermore, the list displayed Centres of Excellence at the top, even including those located 100 km away. This arrangement pushed closer regular centres further down the list, possibly giving users the impression that there were no nearby centres. This could impact user decision-making as they may assume there are no convenient options available.

Before creating wireframes, we felt that we needed more clarification, especially regarding the Centre of Excellence. At this stage, we found out that Centres of Excellence are those that paid more, and the client agreed to ensure they are shown at the top. While the client understood that this was causing confusion, they insisted that Centres of Excellence should appear before regular centres and expressed reluctance about explaining what Centres of Excellence are to users.

With these clarifications into consideration, I researched comparators, store locators, property apps, booking systems, and maps that would generate lists of results with locations on the map. Then I started to create a few potential options.

I initially explored an option to separate Centres of Excellence from the main list. This approach aimed to convey to users that there are two distinct types of centres without occupying too much space. Additionally, it could resolve the problem of proximity, ensuring that the closest centres are not buried further down the list, as they would be in separate sections. However, the client expressed concerns about this approach, fearing that centres hidden in the carousel might not be pleased with the lack of visibility. Therefore, instead of separating them, we decided to keep them in the list but narrowed down the number and range of Centres of Excellence shown.

The client clarified that while they have centres in many countries, some areas have no centres nearby. In such cases, they display the closest centre, even if it is a few hundred kilometres away or outside of the country. Conversely, in densely populated cities like London, where numerous centres are available, more than 10 Centres of Excellence may appear at the top of the list, even if they are not the closest.

To enhance the user experience, we decided to implement a refined result logic. Specifically, we opted to display only the three closest Centres of Excellence. If the nearest Centre of Excellence is beyond the maximum search boundary (100km), no Centres of Excellence will be shown, and regular closest centres will be displayed instead. In cases where there are no centres within the specified range, a message will appear, stating, 'Sorry, there’s no clinics within 100km, but here are the closest.'

In the process of deciding result logic, we began to wonder how users searched for results. Do they use 'locate me'? Do they enter their postcode? Do they type in the city instead? In order to potentially find that out, we had a look at Google Analytics.

Although we were unable to extract that information from the Analytics, we did discover that the majority of users prefer the map view over the list view. With this insight, we suggested to the client to set the map view as the default when users land on a page. However, despite understanding the rationale, especially for Centres of Excellence visibility, we had to keep the list view as the default.

With these insights and aligning with business requirements, I created wireframes and refined them. After presenting prototypes to the client, I successfully obtained approval for the wireframes and proceeded to the UI phase.

List card - Before & After

Repositioned information based on importance and enhanced overall visual hierarchy.