New design system for

HiChee.

Introducing the "HiChee Design System" – a system we built to improve website consistency and team collaboration, saving time for design and implementation.

Company

HiChee

Role

Product designer

Service

Design system

Year

2023

Challenge

When I started working with the HiChee team, we didn’t have a proper design system. This caused many problems for us. Our website and products were not consistent, and it was hard to make things bigger when we needed to. We also wasted a lot of time making changes and delivering things to the developers.

Goal

Create comprehensive design system, which aims to bring uniformity to our designs, ensuring usability not only for designers but also for developers.

My role

I was responsible for the creating of a design system within the company. My role involved a lot of collaboration with the whole team, including product manager, designers and developers.

( 01 ) Emphasize users

During user research, my goal was to gather comprehensive insights into developers' and designers' experiences:

Interviews

Interviews with colleagues

Both designers and developers express frustration with the lack of standardized components and clear communication, leading to inconsistencies and a lot of rework in the product.

Competitive audit

I analyzed design systems of the best companies (Google, Shopify, IBM, etc) and identified successful practices such as a comprehensive component library, detailed documentation, and collaborative features.

Workflow analysis

Observations in the study found that designers face challenges in clearly communicating design intentions to developers and scaling issues. This leads to delays in implementation and requires additional rework.

Website analysis

The website has a lot of inconsistencies, including varying font sizes, inconsistent colors for buttons serving the same purpose, and insufficient content on the mobile version. Additionally, there were significant accessibility issues.

( 02 ) Define problems

Designers and developers face many significant problems:

Inconsistency

Problems from the design side

Inconsistent user interfaces created by designers lead to confusion among users, and developers need to exert extra effort to interpret and implement these designs.

Increased workload

Problems from the design side

Designers need to recreate similar components for different projects, which increases their workload and limits their focus on more creative aspects. Meanwhile, developers spend more time interpreting and adapting these designs, which slows down the development process.

Communication issues

Problems from the design side

Designers have difficulties to communicate their intentions effectively to developers, and developers facing challenges in understanding and implementing designs without clear guideline.

Onboarding difficulties

Problems from the design side

New designers struggle to understand and adhere to the existing design conventions in the absence of a design system. Onboarding new developers becomes more challenging without standardized components and clear design guidelines.

Maintenance problems

Problems from the design side

Making design updates without a centralized system leads to inconsistencies and difficulties in maintaining a cohesive user experience, and implementing design changes requires manual updates across various screens, increasing the risk of errors.

Missed accessibility standards

Problems from the design side

Without predefined accessibility guidelines, designers overlook important considerations for users with disabilities, and implementing accessible features becomes challenging to developers without clear design standards for accessibility.

( 03 ) Ideate solutions

How can I create a design system that is simple, scalable, and understandable by designers and developers?

Consistency

Establish standardized components and guidelines to ensure a consistent user interface across different products.

Workload

Streamline design processes by creating reusable components, allowing designers to focus on more creative aspects rather than recreating similar elements for different projects.

Communication

Develop a common design language and clear guidelines to enhance communication with developers, ensuring a smoother collaboration.

Onboarding

Document and communicate design conventions within the design system, making onboarding for new designers more straightforward and efficient.

Maintenance

Implement a centralized design system to facilitate easier updates, reducing inconsistencies and challenges in maintaining a cohesive user experience.

Accessibility Standards

Incorporate accessibility guidelines within the design system to ensure that designers consistently address the needs of users with disabilities.

( 04 ) Design solutions

We chose the atomic design concept, because the approach addresses our goals:

Structured workflow

Provides a well-organized and systematic process for designing and implementing components.

Flexibility

Allows for adaptability and easy modification of design elements to suit different project requirements.

Clear hierarchy

Establishes a transparent hierarchy of design elements, simplifying their relationships and interactions.

Atoms represent the smallest, indivisible elements such as colours, grids, or icons:

Molecules are combinations of atoms that work together as a functional unit:

Organisms bring together atoms and molecules to create cohesive and interactive sections:

( 05 ) Test solutions

Following valuable insights from the teams we developed an annotation library.

Feedback from designers and developers help not only update the design system, but also generate some new ideas like an annotation library, which makes it easier for designers and developers to talk to each other and get things done faster. Since we started using it, there have been fewer questions from developers and fewer mistakes when putting things into action.

( 06 ) Get results

The design system is dynamic, evolving with future improvements, and we've already achieved some wins:

Reduced time investment in coding and design crafting by 38%;

Efficient handoff process, requiring less explanation for element descriptions;

Minimized iterations during QA, streamlining the feedback loop;

Enhanced coding ensures a significantly more consistent design implementation.

( 07 ) Consider next steps

With the growth of the design team, I would seek feedback on how the system positively influences designers' workflows and onboarding experiences. I am interested in gathering insights on how to refine the design system to better align with the team's needs, focusing on optimal documentation and guidance presentation.


As the design system is gradually implemented, I anticipate assessing its impact on maintaining design consistency. I plan to conduct surveys to understand the team's daily interaction with the design system, gauging its influence on their work speed and productivity.


Additionally, I am planning to focus on accessibility guidelines for both developers and designers to improve the user experience.

HiChee website redesign