Focus iPad App Redesign for Align Technology

//iPad App redesign

Role: UX/UI and Visual Designer collaborating with the Product Owner (Director of Marketing, Ortho Channel)

The Focus App is a strictly iPad app, an internal app that is used by Align Technology's Territory Managers in EMEA in their sales process with Orthodontists or General Practitioners. The app is a visual aid in the selling process that helps explain and visualize all the products and features of Invisalign and iTero, as well as any commercial, educational, promotional extras.

Steps

1 - Gathered business requirements

The original app has been designed and built by an external agency and despite having this visual aid at hand, the Territory Managers did not use it. The issue was expressed by all the users: the navigation was too difficult to use, especially in the middle of a meeting/sales call with a doctor because finding a specific piece of information took dexterity, memory and some time. The UX was not fast and intuitive and the Territory Managers stopped using the app - despite it being, in perfect conditions, an extremely useful sales aid.

In short, all the content was presented in a slideshow format - ~over 100 slides with information + some tabs and if you wanted to reach slide 57, you would either swipe until you reached there or kept pressing on a thumbnail and trying to slide until you saw the thumbnail of slide 57 (if you knew/remembered how it looked like or could read the title in the thumbnail, there was no title text anywhere).

The second reason the business wanted to redesign the app was because they wanted to bring it in-house into a CMS system so it would be easy to update and add to the content - as opposed to the current costly and time intensive updates. Adding new useful features was a bonus.

2 - Researched the users

Our users were Align Technology Territory Managers who used the app in their sales process with doctors (Orthodontists and GPs). In a meeting with a doctor, they would talk about specific Invisalign features or iTero products that the doctor might be interested in and bring up the complete information on their iPads to show to the doctor (or talk about it in depth, if on a call).

I conducted live usability testing sessions and interviews with TMs to see exactly how the original app fared, what the pain ponts were, what worked well and what the users wanted out of the (new) app. The navigation was the most crucial problem to solve, followed by requests such as improving the toolbox (section with supporting materials such as whitepapers, videos, brochures etc) that had no filtering system and was practically a file dump.

The users however reacted great to the UI, especially the circle buttons as they were large and very obviously clickable, great for UX purposes.

3 - Ideation - created UX and UI mockups

I created multiple options for the navigation as rough wireframes but made them animated and clickable in XD in order to test them without the influence of UI. I tested them with our users and refined them until we had our final most intuitive navigation - a classic hamburger menu for the main menu and a navigation bar at the top of the screen. Our users required a navigation that was not only simple to use, but felt familiar. The fancy navigation options requested by the business were either not scalable or required more than just a simple click. Fast, easy and intuitive was what we needed and the final iteration had it all. I also built the UX for other features that were requested by the business, such as a toolbox with filtering and a favorites system.

The UI and visual design went through approval processes with the Product Owner and VP.

I also created the content template designs that our developers then built into the CMS for easy content creation in the future. After the entire content was prepared by our content creators from different departments, I was responsible to (re)design it in XD and prepare the assets for development/CMS. An XD prototype was our content source of truth.

4 - Prepared the design for development

XD prototypes have a fantastic "Developer mode" that I made available for our developers and I uploaded all the necessary files, guides and assets for development in Microsoft Teams files. The developers and I collaborated throughout the process

5 - Tested the mockups and developed app with the Territory Managers

I tested XD prototypes of the UX as I was building them. After the developers built a working prototype, we had a full day User Acceptance Testing meeting with the Territory Managers who tested the actual app following a script, as well as live usability testing 1-on-1 with me. We found a few bugs and some minor content and usability issues - overall it was a (surprising) success. Testing sessions don't usually go this well.

6 - Managed design assets in the CMS

We used Contentful as our CMS and I helped prepare and add content and visuals to the CMS, making also minor code tweaks so the text fits well in our templates and the final result is perfectly polished.