About Utopia VR
Utopia VR is a company that utilizes virtual experiences, whether in VR, desktop, or mobile, to improve virtual collaboration and boost productivity for businesses. The team creates and manages private virtual spaces for clients, and designs tailored experiences for their needs.
Note: Utopia VR's products are paid services. I have been asked to refrain from disclosing details about their offerings. Therefore, I will provide limited product information and mockups.
The Challenge
I was Utopia VR's first designer. The company had gotten to the point where they were comfortable with its tech stack and business model. With my hiring, they wanted to start building customer-facing products with consistent flow and visual language. So we needed to create a design system.
Adopting a Design System
It didn't make sense for us to start a design system from scratch. So we decided to adopt one. Upon discussing with the product team, we needed one that has:
A clean, simple, modern look and feel
Both web and app components
At least desktop and mobile viewpoints
Can easily integrate with Tailwind CSS
After some research, we decided do go with Flowbite.
Flowbite's visual language is simple and modern, and more importantly, it's tech-y and adaptable into different styles if needed.
It has both web (last image) and app components, and covers desktop, tablet, and mobile views.
Furthermore, the design system is built to be compatible with Tailwind CSS' classes. Developers can also get the code directly from Flowbite for each component.
Adding Our Branding
Once we purchased the design system, I began making it our own by adding our branding elements (namely, colours, fonts, and logos) to the most used and atomic elements. I ensured that the styling would propagate through the design system (atomic design).
Creating More Components
As we started to create and push out products, in was inevitable to encounter elements we didn't have. When creating new components, I would ensure
They are components we would re-use
I consider how many states/variants they require, depending on how users would interact with them
They are consistent with the atomic structure that already exists
Building Our Products
With the adopted template and our own components, I was able to efficiently create high-fidelity mockups to push out our MVP.
