Hostari Design System

My Role

Results

Lead the design of components and defining the foundation guidelines

3 foundation guidelines
15 components as of Jan 2023

Background

Hostari aims to provide appealing games and match the features of competitors while offering top-notch server hosting. Despite a small team, we prioritize releasing games that users desire and maintaining consistency in website elements for ease of use.
This is why we created the Hostari Design System.

Capitalize on patterns that are already in use. Identify what’s common and less common(which can be turned into variants).
Make sure to standardize naming conventions, accessibility requirements and file structuring
Components range in complexity. Reduce components to a single function, button or dropdown
Your technical approach doesn’t matter as much as creating a living, breathing system that’s flexible, maintainable, stable, scalable and successful in the long-term

Process

Some key things I had to remember when creating a design system:

How we created the design sytem:

We created a visual inventory of the existing components in our website. This was made faster by using CSS Stats.

Next, we decided on the fundamental elements and components that were essential to our design system. We came up with 3 fundamental elements and 15 design components. We also prioritized adding design tokens for each visual specification so that our front-end engineers could easily label them and we could easily update any component in the future.

After planning the contents of our initial design system, we began designing the guidelines and components.

We also consulted our engineering team if the components we have made are feasible, and started to test them on existing designs and features we were planning to build.

For the final step of our process, we published the guidelines and components on Zeplin and we are currently collaborating with our engineers to export to Storybook.

The process repeats itself as our platform and the need for new components grows. A part of my role is to maintain this system and make sure all our components work great. We will continue to maintain and improve our design system as our platform and needs evolve.

Search suggestions appear slow and are not intuitive to user’s needs

We discovered that when a user types a keyword, the suggestions were rather slow in appearing. This is because we show suggestions under a job title, company and location. We also saw that the list of suggestions that appear are unrelated to the keyword that the user typed. For example if the user types "J”, other words without the letter ‘J’ also appear in the suggestion list.