OTTO is a device-agnostic application for connecting patients to providers for video consultations—helping patients save time and money by avoiding waiting rooms altogether. Telehealth is a popular industry and there are a lot of applications which perform similar functions; what makes OTTO unique is the ability to offer secondary features to practices like scheduling and other practice administration tools. OTTO’s key selling point is the ability to offer consultations to practices as a continuation of care they’re already offering in their clinics.
I was brought onto the OTTO team to help them get to a 2.0 release of the application which focused on improving the design and underlying front-end code. I touched all parts of the application including brand-alignment, improving user experiences and helping unify the user interface. I was also part of a team of developers working on the front-end. My core contributions included developing the CSS for the application and creating a large portion of the React components and views.
Logo and Brand Development
The overall approach I took to the brand-alignment was to focus on what was working and to smooth out the edges. I wanted to bring a human touch to an austere industry focusing on an easy-to-use UI that had personality. The two primary typefaces I chose for the project were Source Sans Pro and Nunito—a lovely rounded sans-serif that added a nice disposition to the brand.
The re-working of the logotype focused on the geometry of the letterforms and added roundness to the edges—which disappear nicely at small sizes. The iOS app icon keeps things simple transforming the ‘O’ in OTTO into a container for a secondary brand element—a smooth gradient blend of the two primary highlight colors.
Primary and secondary logotypes.
iOS app icon introducing a gradient treatment of the two primary highlight brand colors.
Color became a priority in the application to help differentiate key action-based UI elements. I came up with a broad palette to handle multiple scenarios and to offer good differentiation of information on elements like calendars. Additionally, the two colors associated with the original brand—orange and purple—were updated to feel consistent with other color additions.
While a majority of the interface in the application is white and gray, color plays a big role with action-based UI elements. It was important for any secondary colors to feel as warm and natural as the selection of typefaces.
One of my favorite aspects of UI design is coming up with branded icon sets. For OTTO’s set I focused on bold shapes with the borrowed roundness of the logotype. All icons were designed at a base size of 32px making scaling to relative sizes easy within the application.
OTTO’s icon system borrows from the softness of the logotype and general clarity of form—even at small sizes.
One of the first tasks I undertook when reviewing the original application was to conduct a UI inventory and walk through each user flow—looking for inconsistencies in how common tasks were completed and reducing as many unnecessary views as possible. We have four distinct user types—patient, provider, practice and superuser—with a few key areas of the application overlapping.
A majority of the users would be engaging with the application via an iOS application so it made a lot of sense to focus on mobile-first user patterns when redesigning the application. I borrowed a lot of aspects from the iOS vernacular. Elements were scaled to be easy for aging users to use and the contrast ratio of UI elements and typography within the application were considered accordingly.
The most common tasks within the application include finding new providers, making appointments, conducting consultations and scheduling providers and patients. A large majority of the application involves interacting with various form elements to query results—it was paramount that we saved users as much time as possible. A good example of the type of patterns designed include smart inputs that narrow search results when users start typing, segmented controllers instead of radio buttons and selects, as well as contextual navigation to present secondary options for various elements.
For first-time users we reduced a lot of the friction of finding a new provider by helping narrow the search query and showing providers who are available soonest with the next available appointment.
For users who like seeing the same providers consistently, we grouped saved providers into a Care Team—enabling a broader amount of appointment availability.
If users want to learn more about providers they can view their profiles. Additionally it’s easy to view upcoming appointments and reschedule or cancel an appointment.
The core of the application is the one-to-one connection providers and patients make through video consultations. On the provider end of the call information about patients as well as an ability to take notes during the consultation are available. Notes integrate with external EMR systems making OTTO versatile within existing healthcare environments.
For busy practices scheduling multiple providers for consultations is easy. Having an overview of the upcoming week is very helpful.
Practice administrators can add or edit provider availability as well as schedule new patients.
I played a pivotal role in the development of the application. I was a member of a small team of developers focusing on completely rewriting the front-end code for the application. We chose React as a framework and I loved having an opportunity to get my hands dirty with the technology. I found a lot of overlap between React and Jekyll so building out components ended up being a breeze.
I was responsible for writing all of the CSS for the application and because I had created the design system I wrote a majority of the components used. I was also responsible for writing a large portion of the views and assisted with API integration prior to launch.