Design System
Hubilo
Creating design system for Hubilo’s community website and mobile app.
“One of our main goals was to create a modern design system that reflects the latest trends and best practices.”
Design System (DS) creates reusable components that allow designers and developers to work more quickly and efficiently. Design system includes atoms, colour styles, typography, grids, spacings, components, icons and much more. The library is created by designers that help other designers to reuse or combine assets to create unique designs. It’s a good approach to collaborate with UX Designers and visual designers, across organisation, to keep the design consistent.
At Hubilo, we are always looking for ways to improve the user experience. One of our main goals was to create a modern design system that reflects the latest trends and best practices. As part of our efforts to create a more consistent experience across our platforms, we wanted to update the design of the community side across the Hubilo website and app. This was the beginning of a larger initiative to provide a more unified experience to our users.
Context
Hubilo is an event tech platform. Hubilo provides a virtual venue for organisations to provide an engaging and interactive event experience to their global audience and transform the way people connect and host events. they are experts in holding Webinars, Virtual Events, Hybrid Events and In- person events. There are two aspects of any event: Organiser and the Attendees.
Similarly, we had two dashboards, one was for organisers where they could set up what goes in the event which had bundle of features, we called it Organiser Dashboard. And, the other was for attendees or audience of the event, we named it Community dashboard. It was the face of Hubilo since, everyone attending any event would experience it first. We were loaded with features like- live sessions, Broadcast studio, rooms, lounge, exhibitor booths, engagement options for attendees like contests , polls, event feed.
I worked on the community side designs. Whether it’s designing new features or upgrading an existing one. When I joined Hubilo, I was introduced to design system which was currently followed. But, over the time it had become redundant and with many designers working, it had somehow lost it’s need to be followed (importance).
Atoms and components were outdated. We definitely needed to update our Design System. Fortunately, me along with my team member were assigned this task. I needed to plan out how were we going to execute the creation of new design system.
Breaking down the process
-
Brand colour guidelines help ensure that everyone uses the same colours in their designs, which makes them more consistent and recognisable.
-
Spacings and grids (spacial system), helps us create a visual rhythm, which is a key part of any design system. Grids provide rules for layouts. It gives our design structure and help designers to coordinate spacing, sizing and white space.
-
Many design systems use rounded cards or sharp corners. When soften the corners of the edges, it gives a gentle feeling to the design. Where as, sharp corners of cards gives a more intense and sharp look. It might sound a small issue but they play a vital role in creating an effective design language. For the same reason, there was a need of guide, for proper Radius on buttons, cards and modals.
-
UX design trends keep on changing. Staying up-to-date, help create a better user experience, provide more value, and give businesses a competitive edge in the market. Staying current on design trends helps to keep your audience engaged, helps grow your audience, and helps avoid potential issues that could arise from not keeping up with these trends.
First, to figure out what was really the problem with current DS and what needed to be changed. I started studying the whole community website and app, jotted down the issues that existed. Few of the major issues are listed here.
Studying the platform to determine issues in current designs.
Design philosophy.
I looked for inspirations on creating a new Design System and found ‘Brad Frost’s Atomic Design’ that fit our process and requirements. We followed it’s methodology but the new Design System was going to have its own unique qualities:
Thus, considering all these issues we made the decision to start over and build a fresh Design System, based on latest UI/UX design trends. It was going to help designers across teams to create their works seamlessly, saving their time and effort while also ensuring consistent designs.
-
It should perform well even with less or large variations and with less cost involved.
-
Visual uniformity as well as in it’s behaviour. They should look and work as the parts of one bigger component. Consistency creates intuitiveness for users.
-
Usability describes the level of ease with which a system allows a user to get to his/her goal. Success of a website or app depends on usability. Users can achieve a task accurately or rather wander here without having any sense of the process.
-
Apart from minimal colours and proper use of white space, I wanted to have few numbers of variations of each atom. less variation led to less ambiguity.
I made a list of all atoms that needed to be updated (it was almost all atoms), as the priority since, developers were going to start working on them soon. I decided to pick those which were being used in first few screens of our community website, like text fields, buttons, radio, menu and avatar. But, before that I had to design the foundation on which whole Design System was going to be based.
Creating Design Foundation
After some researching and documenting methodology it was time to start creating the Design foundation which consisted of colour system, typography, grid system, spacings and icons.
a) Colour System- Our community platform has dynamic colour system which is chosen by the event organiser while setting up the event page look and feel. There are five colours that needs to be selected by organiser, these are: Primary colour, Primary font colour, accent colour, secondary font colour and background colour. For these colours to work in sync, we made few modifications in the logic of these colours in respect of how it was derived and used.
b) Typography- Earlier font type used was Helvetica Neue, we switched to Poppins for a crisp look and also to freshen up look of the website.
c) Spacial System-
-
For desktop I opted 12 columns grid with width set as auto, margin 16px and gutter 24px. For mobile, it 4 columns grid with width set as auto, margin 20px and gutter 16px.
-
There was a debate whether to for spacing in multiple of 4 or in multiple of 8s. We chose the latter one. To better align our components on website.
d) Icons- We opted Flex icon set by Streamline from Figma community. Find it here
Creating Components.
Tool I used.
Web Grid System
Mobile Grid System
Post creating atoms, I moved to creating components like buttons, inputs and lists. By combining atoms together we can create components such as navigation, search field and footer links. Components can be combined into more complex organisms like header sections or footers. This approach helps us create effective interface.
It provides integrated component libraries for designers and developers to share and use components for their design projects. It also provides code components that designers can reuse in their projects, and test the functionality of them without having to recreate them from scratch. This helps reduce the component library size and streamline the existence of different components in a digital product. Furthermore, it allows designers and developers to work together more efficiently by providing shareable UI elements to create digital products faster with better usability design. All this were saved in a common file which was published as library file and any designer who was working on community side designs just needs to add this library to their project and it was ready for use.
Components
The new design system was created on Figma app. With feature of using auto layout, our job was much more easy and (scalable) also for other designers who wish to make any changes in future. We made a copy of DS file and shared them with the engineering team for their reference. Doing so will keep our original DS file intact and avoid any accidental changes made to the file.
