nova, the design system that transformed An enterprise cloud product
In my previous article I’ve discussed why organizations that build enterprise level applications, specially for web and mobile should consider using an existing design system or take a step forward and create their own design system.
In the recent past most of the well-known popular digital products out there are designed and developed ground up with the help of a design system. The sole reason for this is because the system is designed with a set of commonly agreed design principles, with a set of unique and consistent style guides and with a collection of reusable components maintained from one single repository.
We at Cloud Solutions International, understood that the enterprise grade Healthcare application that we were building will definitely need a design system a.k.a “a backbone” to hold the 20+ modules together as one within the application. We realized, if we didn’t have a Design System and since the product was rich with features and modules, when multiple UI/UX designers, UI engineers and Front-end developers start to work parallel, it would cause problems within the development process.
We at Cloud Solutions International understood the importance and gravity of the use of a Design System within our application and started to create our very first design system back in 2019 with a bunch of talented Leads, UX designers, UI Designers, UI Engineers, UX Writers, Front-end Developers and BA’s and that’s “nova”.
What was our main challenge?
The challenge was quite clear to everyone and it was pretty much straight forward, that was;
“How can we develop an application that could use reusable components and also at the same time keep the User Interface (UI) & User Experience (UX) consistent and simple.”
And why did we need a Design system in the first place?
As you have heard and learnt by now, A design system is not just a set of components or UI elements; it’s the “backbone of the application” which consists of;
1. Design principles and guidelines
2. Reusable components/elements
3. UI patterns
4. UI styles
We as the UI/UX team of the organization, challenged ourselves to identify the above-mentioned aspects with continuous brainstorming sessions with Design Thinking practices until we found the right balance in creating the base foundation for nova.
The Foundation for “nova”
The foundation was basically how the layout architecture, color patterns, typography, spacing and icons would gel with each other.
Creating a set of rules and design principles
This is where the UI/UX designers played a crucial part in running a few design sprints on how the application should function considering our end user personas based on their problems and needs, identifying the psychological aspects from defining the main layout structures to bits and pieces like
“how the popups should load in the application, where should you scroll and where you should not” …etc.;
Once the rules and principles were defined with the layout architecture it was the job for our UI designers to identify the UI basics such as use of typography, use of colors, icons to support the components.
Once the UI and UX designers did their magic around, it was up to the UI engineers to make sure the elements that were designed to be converted with semantic UI conversion best practices such as the use of SASS, reusable variables, HTML elements that are coded with Block element methodology — BEM.
With the support of front-end engineers, our UI engineers created the nova components and patterns library that was lightweight and fast in rendering that supported the core front-end Angular framework. This way we understood that it’s easy to sync and manage front-end components within the application modules.
That’s all for now…
We have made significant progress ever since we initiated the design system back in 2019. It was never an easy process to build a design system from ground up to where we are now. But ultimately what we figured out was by not having a solid design system from the application point of view, it required a lot of resource and technical effort to maintain consistency and standards.
Last but not least NOVA is not 100% perfect. The end users are the people who will be using the application that’s built on top of NOVA, hence we as the core design team continuously work towards understanding the end users’ problems and goals, figuring out solutions and best possible approaches through design thinking practices to cater them through NOVA.
So until next time with an update of NOVA… :)
