At Druva, we believe in creating a delightful user experience by not only providing good visual design, but also building a robust UI (User Interface) architecture and adhering to the best practices for front-end development. In part one of this blog we discussed how important it is to offer a consistent user experience across products, user interface, and refined UX components, as Druva introduces new products and capabilities. This blog continues the journey of the evolution of Druvas’s UI architecture experience.
Once we decided to move from AngularJS to React, we had two options for a migration strategy – either a complete rewrite of our front-end or a progressive transition. Although we saw great potential in React and our experiment with inSync Client was successful, we didn’t want to bring in a big-bang change at once. Instead, we came up with an approach unique to Druva’s navigation system—to transition from the earlier app one “page” at a time. This approach utilized client-side routing to redirect to the React view if the page was already transitioned to React; otherwise, the user landed on the old page without any change in the user experience.
Fig. 4: Our migration strategy – one page at a time
As part of the Druva Cloud Platform initiative, we wanted to create a consistent user experience across Druva’s product family—inSync, Phoenix, and CloudRanger. The behavior of components across these products needed to be consistent. The idea was to create a design system consisting of design guidelines, a Sketch UI library and React-based UI components that would serve as a central repository for all UI components, which can be used by different products.
The task of having common components across products was certainly not easy. There were subtle differences in the component instances, which required us to rethink about the component styling and its behavior. This led us to create a UX design guideline built out of the core concepts of the grid system, typography, and color palette. We then progressively built the complete set of UI components in Sketch based on these guidelines.
(a) Sketch components hierarchy
(b) Set of core UI components
Fig. 5: The Sketch UI library
The componentization approach of React was extremely helpful in meeting the requirement of the UX design guidelines. We extended the idea of having a common repository of components to create Orion—a common library of Druva’s React components. Each component in this library follows the design principles defined in the UX guidelines and is engineered after defining its look and feel and the user experience in detail.
In the process of rethinking and modernizing our front-end stack, we had invested a good amount of time in exploring different technologies and took a deep dive into some of the promising front-end frameworks. Over the last couple of years, we have:
In the near future, as Druva introduces new products and capabilities, we will be able to offer a consistent user experience across products, performant UI, and refined UX components built to meet the highest standards of user experience.