Invisalign Go Website Redesign [Align Technology, medical devices]
Role: UX/UI Designer. Built the user journey, information architecture, UX, UI and all Visual design. Collaborated with the Brand Manager for Invisalign Go, the Product Owner and the two Front End Developers.
Main challenge: Building a clear and effective user journey.
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. Feedback sessions were conducted with the EMEA GP Marketing team.
Steps
1 - Gathered business requirements
Management's goal was simple: to launch a website that would be easier to navigate and convert better than the current one, that unfortunately did not perform well, despite ample amounts of traffic.
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 that proved extremely valuable for this project.
I am not at liberty to disclose numbers, but Hotjar revealed useful information such as:
- 60% 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 had trouble finding the 4 points of the Discover Go and kept 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. I had a lot of assumptions based on our data from Google Analytics and Hotjar, a lot of behaviors that I wasn't sure why they even took place and there's no better way to find out but to create the opportunity for the behaviors to happen and enquire when they do.
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, they were absolutely fascinated with the cases.
We had quite a lot of 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 website
Our 2 main challenges were:
- Making the object of the website as clear as crystal
- Building a smooth and clear user journey
According to our users, it was simply not obvious what they were looking at when they landed on the website - they wasted time browsing for information. The first step was obvious: change the stylish doctor hero images with a more clinical and clear video of an aligner and how it moves teeth. Second was to build a user journey that informed, attracted and guided users toward becoming providers - smooth but certain build from "What am I looking at?" to "Okay, I want in".
I set on building the information architecture and the user journey. The research and testing showed what type of information was most important to doctors, so I split it into sections and subsections, easy to navigate through from the menu: About Invisalign Go (patient figures, clinical info, practice growth, results), Certification, Doctor Stories (campaigns & testimonials) and Events.
I showcased the About Invisalign Go subsections directly under the hero - clicking on either one took you to the About Invisalign Go page that has all the important information in tabs, very easy to browse through, and the main CTA at the bottom of each tab.
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.
I also improved the sign up page, UX copy included - no unnecessary images and text, just a clean form that in the least amount of words tells you why you're completing the form (since in the previous version it was unclear what you were signing up for): "Simply complete the form to receive more information about the sign up process to one of our Invisalign Go certification courses". Territory Managers would receive their information in SalesForce and call the GPs who submitted their data.
The new form requested the minimum possible information. However, the minimum is still 12 lines to fill, so instead of overwhelming the user, I split the form in 2 digestible steps and added UX copy at the top: "The form takes about 1 minute to complete."
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. The user journey was smooth, the information easy to understand from just scanning. I had to make adjustments to some pages as they were not as obvious as expected, 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. The sign up page was also clear and easy to understand, raising no questions.
5 - Prepared the design for development
I 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 shared drive. Collaborated with the developers throughout the process until the website was launched. The UK website was launched in December 2019 with local versions for Iberia, France, DACH and Italy launched in Q1-Q2 2020.
7 - Results
Sign ups for the websites increased between 32% (France) and 79% (DACH) compared to the previous website. To me, this was bound to happen based on user research because the previous website was lifestyle-focused and displayed usability problems, while in this new version I put the focus on clinical cases and clear benefits while trying to simplify the flow and make the entire website more user friendly. Of course, while monitoring, I spotted new and shiny usability issues and some odd unexplained behavior, which only means that the work is never done. There's always more to research and something to improve.