Golden Gate
Building the bridge between Datto Products
What is Golden Gate
It's not just an iconic bridge in San Francisco anymore! Golden Gate is Datto’s new style guide for our products’ user interfaces, bridging together the different Datto products. Golden Gate is more modern and visually pleasing than what exists in our products today. Every visual design choice was purposefully thought out and provides a meaningful improvement to the user experience.
As Datto’s arsenal of products continues to grow, integration and a sense of commonality between these products is very important in establishing a unified user experience. Golden Gate addresses inconsistent interaction patterns, accessibility issues, varying look and feel. Having familiarity of visuals and behaviors across product lines will increase the learnability of our interfaces and encourage the addition of new Datto products to partners’ fleets.
Process
My Role
As a member of the product design team, it was my job to help with the creation and implementation of Golden Gate, our new product design system. As part of the development and validation of our new system, I conducted user interviews and I played an important role as a coordinator between the design, product, and engineering teams.
Process
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.
1. Consistency & Accessibility
We started by revisiting overlooked problems that undermine product value, such as accessibility issues, varying look and feel, and inconsistent interaction patterns. There are many color variations, interactive elements have assorted identifiers and there are at least ten different typography treatments on the BCDR screen alone!
2. Quick Win & High Impact
Next, we identified quick wins, affordable changes with high impact. For example, by limiting the number 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.
3. Interaction & Learnability
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.
User Feedback
User Feedback
To encourage users to provide feedback, we included a link to a survey in the product. In the survey, we compared a current screen to the same screen in the Golden Gate design. We asked them which one they preferred and to describe the new screen in three words.
“The current status page just seems old now, the overall look. This is a new look and definitely a welcome change.”
Making it Happen
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.
View Next: Command Center