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:
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:
Inconsistent user interfaces created by designers lead to confusion among users, and developers need to exert extra effort to interpret and implement these designs.
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.
Designers have difficulties to communicate their intentions effectively to developers, and developers facing challenges in understanding and implementing designs without clear guideline.
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.
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.
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