<- Back to project list
Design System Redesign
platform
Hahow Good School, Web
Role
Lead Designer
Execution time
2022Q2 ~ 2023Q1
Responsible Project
Design Execution
Collaboration Process Optimization
Due to the early foundation and design of many product features, as the team expands and business goals change, the existing design system gradually becomes incompatible with the needs, and collaboration between design and engineering begins to generate ambiguities. However, like many resource-constrained startup teams, the majority of time and manpower are devoted to new features, with relatively limited resources allocated to maintenance, resulting in a gradual accumulation of unresolved development issues.
During my tenure as Design Lead, I consistently raised the importance of establishing a Design System for discussion, and secured resources to initiate the project.
Project Summary
專案目標
Our team wants to redesign the current Indeed job search experience for job seekers in Japan, and also restructure the product system architecture to increase flexibility for future product expansion.
02 | Roles and Outputs
In this project, I closely collaborated with the product manager and four engineers. I was responsible for the entire UX and UI design process and output, from defining the problem to delivering the final visual design results to the engineers.
03 | Project Challenges
There were many technical constraints in this project at that time, requiring communication and coordination with other product teams. We also needed to prioritize and handle many tasks to ensure that we could launch the first version of MVP on time.
04 | Project Results and Impact
We finally launched the MVP version within six months, and this overhaul significantly boosted our key metrics, especially increasing overall revenue by 12%. At the same time, we also received a lot of positive feedback from users.
Optimizable
Development Experience
Don't have a Design System originally?
Although the existing Design System also includes various stylesheets and components, due to the collaboration with the engineering end, there are gaps, resulting in seemingly the same design, but actually having diverse implementation differences in the product.
There is also a lack of clear and consistent design logic explanation in the design, and designers extend the design based on their own understanding, leading to gradually inconsistent experiences and inefficient development.
Although they should be the same component, there are several different styles and behaviors on the product, and I want to organize them but there are no resources.
I thought this was an existing component, but it turned out to not be shared on the engineering end, requiring repeated confirmation.
I need to extend the rules on the existing components to be used in new projects, but I don't know what the original design logic was?
designer
engineer
This was not componentized before, so it's complicated to change; it's faster to re-code due to the schedule constraints.
Components do not have established design rules, making maintenance increasingly difficult due to different development habits.
How can I get a clearer understanding of the reusable features available to help me assess preliminary development costs?
I understand the importance of not reinventing the wheel, but if componentization requires additional time, it may not fit into this project...
PM
▲ The original Design Guideline lacked a more complete application explanation, which easily leads to ambiguity in usage.
▲ Product cards developed by different teams at different times are generally similar yet filled with inconsistent details
▲ Lack of clear design rules, only gradually stacked with each demand, becomes complex and difficult to maintain
Key objectives
Goal 1: Lay a solid foundation
Continual and organic operation process
The Design System, like building a product, is not a one-time delivery project. The important goal of this task is to create a process that can operate continuously and be continuously optimized rather than being accomplished at once.
Actually, due to very limited manpower - only me and a front-end engineer are responsible for the project initiation, and we both have other tasks to carry out at the same time, it is not practical to renovate all the designs and functions at once. Therefore, the focus is on how to quickly launch in small steps, continuously adjust, collaborate with the team, collect feedback, and try out a more suitable way of operating for the company team.
Objective 2: Create Impact
Increase team introduction and improve efficiency, expand influence
The main goal of the Design System is to improve efficiency and enhance the development experience, so it is important to make each development team feel that the Design System is easy to use and adopt.
In addition to the basic infrastructure, we also prioritize the reconstruction of components with high business value, hoping to make relevant stakeholders more intuitively feel the differences and thus increase the possibility of obtaining more resources.
▲ Collect problems encountered by everyone during development
Design Principles
Hahow's company size at that time was about over a hundred, including about 5-6 project development teams. It is clearly unreasonable to simply copy the same approach, compared to other large-scale design systems that affect tens of thousands of people. Therefore, after studying various design systems, I understand that the most important thing is not how to design the system "correctly," but to find the best approach that suits the team.
Principle 1
Designing systems is about increasing efficiency, not adding unnecessary work
As using a design system will inevitably bring new standards and processes, sometimes extra work is unavoidable, so it is necessary to consider "Will this really bring long-term benefits?" instead of establishing rules just for the sake of it; or simply unifying styles, which may not actually be of greater help to the user experience.
Principle Two
The design system should also iterate along with the product's business objectives
The purpose of designing a system is to accelerate product development and provide a smooth user experience through consistency. However, as a new internet product, it often explores new business possibilities. Once it is discovered that the design system does not bring efficiency to new products, but rather more innovative constraints, it is necessary to consider the need for new products to use the design system, or adjust the application of the design system.
Plan Execution
As with the product design process, discovering problems, converging,
▲ Collect the problems encountered by everyone during development
design output
Establish design <-> style rules that are more consistent with engineering
Token Introduction Tool
We refer to the naming rules of Material Design, reorganize and consolidate existing style names, and consider the team size, making slight simplifications in complexity.
And introduce tools into the design process, with the design team naming styles according to their usage purposes,
Process:
Add style -> Export json file to engineers ->