Invisalign Go Website Redesign

//B2B Website redesign

Role: UX/UI Designer. Collaborated with the Brand Manager Invisalign Go and the two Front End Developers.

Invisalign Go is an Invisalign branch dedicated to General Practitioners who offer clear aligners to their patients. The aim of the Invisalign Go website is to inform and guide GPs to become Invisalign Go providers.

Steps

1 - Gathered business requirements

Management's goal was simple: to launch a new website that would be easier to navigate and convert better.

2 - Researched the users

Our team pulled data from Google Analytics while I used HotJar and 1-on-1 user testing sessions and interviews to gather insights. I also had access to fantastic research from our Global team about behaviors and preferences of US Orthodontists and GPs and I took it into account.

I am not at liberty to disclose numbers, but Hotjar revealed extremely useful information such as:

  • A large number of desktop visitors didn't scroll below the fold and we'd lose yet another 8% before reaching the Discover Go section - the crucial informative part of the website.
  • The users have trouble finding the 4 points of the Discover Go and keep going back and forth between the 4 points and Home. The 4 are not in the hamburger menu - which according to the recordings, they only visit when they start scrolling the Home erratically as if they are confused.
  • Too many clicks were made on unclickable items - many people tried to click on the dates and places of the upcoming trainings (or other random parts in pages, for that matter) - which lead them nowhere.
  • Some users who landed on the Become a Provider page would read, but never scroll down to the form (you had to scroll over an image and some text), which cost us some sign ups.

I conducted usability testing with GPs from 3 countries who had little to no knowledge of what Invisalign (let alone Invisalign Go) is. We had a lot of assumptions based on our data from Google Analytics and Hotjar, a lot of behaviors that we weren't sure why they even took place and there's no better way to find out but to ask when they exhibit that behavior.

Testing with actual users is always fascinating - it's not only extremely valuable, but also unexpected and sometimes hilarious.

”Come on, doctors don’t care about patient stories.” - a GP during testing

Some findings:

  • They all had trouble figuring out what the website was about exactly, they had to take time and browse the website. Ideally, that should have been crystal clear the second they landed on the website, but the home page then was a lifestyle shot of a (famous) GP on a hill - one of the tester GPs actually said "He's handsome, but I'd rather see some teeth". The main object of the site wasn't clear, let alone the value proposition.
  • They think it's something for Orthodontists, not for GPs, even after spending more time on the website.
  • They were not interested in the blog or patient stories, but I kept losing them to the Gallery of clinical cases.

We had quite a lot of hard data and user insights to analyze and in the end it was clear what we needed to focus on: we had to improve the navigation, simplify the sections and show more aligners/clinical info and fewer fashionable doctors.

3 - Ideation, created versions of the extension

In collaboration with the Brand Manager, we set on the wireframes and the user journey on the website and I started creating the high def design. I went through a few rounds of design and feedback in which we involved the entire GP EMEA Marketing Team and we eventually had our website design, for desktop & mobile, complete with custom illustrations. I took into account all of our research in order to improve the navigation, to concisely (and very quickly after landing on the home page) answer the crucial "What, Why, How" questions and I focused on a sleek dark aesthetic that gave off a modern vibe, more anchored in the digital world.

Among others, I changed the information architecture and website structure to better fit their information needs and our goals, changed the navigation to make information easier to find and sections easier to browse, I ditched the hamburger menu on desktop in favor of a classic header with clearly spelled out items and, of course, created an aligner video for the home page with fitting, clear copy. Confusion should be the least of our worries now.

4 - Tested the design with first time users

I gathered users from the target group to test out the XD prototype remotely and see if they understood the object of the website, if they had any trouble finding information or navigating between sections. We had to make adjustments to some pages, but overall the information was clear, easy to find, and they had no problem at all in explaining what they thought the website was about after only seeing the hero image and reading the text.

It seems it's better to smack doctors over the head with your product/service than to dance around it and hope they like your dance.

5 - Prepared the design for development

WI created desktop, tablet and mobile versions of the website, made available the XD prototypes for development that allows developers to see useful bits of code and uploaded all the assets on our drive. Collaborated with the developers throughout the process until the website was launched. We're currently gathering data to see how it performs - the UK website was launched in December 2019, only a few weeks before the time I am writing this case study, and the developers are preparing to launch local versions for Iberia, France, DACH and Italy in January and February 2020.

invisalign-go.co.uk