Unifying Our User Interfaces

Datto has a lot of great products in its arsenal that only keeps growing as we acquire more businesses. Because of this, integration is very important and a key item of that is user experience. To accomplish this, we knew we had to streamline our user interfaces. As product designers, we are advocates for the user and have a proclivity for good aesthetics. So for us, this was not only a time to stretch our visual design muscles but to also improve the usability across our products.

Colors, font choice, and other visual elements are highly important to the user experience of a product. Humans tend to make quick judgments after seeing a screen for the first time. If the visual design does not connect with them positively, they may leave one product for a better looking one thinking they will have a better experience. This is because people tend to believe that attractive products are more usable, this is known as the Aesthetic-Usability Effect. However, as product designers, we want to make sure the visual design is not just smoke and mirrors to cover up for potential usability issues. Therefore every one of our visual design choices was thought out, purposeful, and provided a meaningful improvement to the user experience.

We started by revisiting overlooked problems that undermine product value, such as accessibility issues, varying look and feel, and inconsistent interaction patterns. Take the two screenshots below, if the Datto logo wasn’t present in both, they would look like they are from different companies. There are many color variations, interactive elements have assorted identifiers and there are at least ten different typography treatments on the BCDR screen alone!

SaaS Protection Home
Datto SaaS Protection Home Page
BCDR Status in the Partner Portal
BCDR Status in the Partner Portal

From there we were able to identify quick wins, affordable changes with high-impact. For example, by limiting the amount of font variations and establishing typographic rules for each product to adopt, we can clearly and visually define the information and content hierarchy on any given screen. The screen becomes easier to navigate and scan for relevant information. In addition to the typography changes, we will be debuting a refined color palette that meets Web Content Accessibility Guidelines, with the help of contrast checker tools.

Typography Style Guide
Typography Style Guide

Interaction patterns, like forms fields, toggles, and button behavior are also a part of the refresh. These interactive components will look and behave similarly as users jump from product to product. In the screenshots below the visual similarities are obvious, interactive elements are easily identified as an accessible variation of Datto Blue, and share components like the backup success indicator. The familiar visuals and behaviors will increase the learnability of our interfaces as partners add new Datto products to their fleet.

SaaS Protection Home (Concept)
BCDR Status in the Partner Portal
BCDR Status (Concept)

To make this refresh possible we are working closely with engineering to tighten up our design to dev handoff process and introducing Design Tokens to our toolbox. We are excited for our Unified UI to debut, this is just the beginning!

About the Author

Abbey Jo Leyendecker
LinkedIn   Twitter   Abbey Jo's website

More from this author