Hello. This is Wadiz Front-End Development Team.
We’d like to share the challenges and experiences we encountered while building theWadizdesign system.
The design system defined Wadiz is a comprehensive framework that encompasses design principles, specifications, reusable UI patterns and components, and code.
What prompted you to decide to build a design system?
- Rapid expansion of services and the launch of subsidiaries
- Growing workforce
- A Growing Legacy
- Inconsistent UX/UI
- Communication issues that arise every time due to the lack of clear guidelines
I decided to go ahead with it for that reason, but I had a feeling it was going to be tough 🙄
The Design Team in Agony
Let's give it a shot anyway! First attempt
The design team and the front-end development team have joined forces.
From the very start of the project, I designed components with the design system in mind. My plan was to naturally build the design system using the components created as the project progressed… but 😅 with a schedule that was already tight enough just to complete the project, designing and developing components while keeping the design system in mind proved to be an incredibly difficult task.
As the project deadline approached, we found ourselves rushing to implement features without sufficient review or design. This was a complete departure from the design system we had planned. So, we sought out a new approach.
The first process
"I... I need resources! Persuading and Demonstrating the Need for a Design System"
Building a system is no easy task—it’s like creating something out of nothing. That’s why it requires ample resources and careful consideration. Above all, the company’s support and understanding were essential.
First of all, we had a huge backlog of work on the business side. As the company was growing rapidly, our services had to keep pace. So, it wasn’t an easy decision to allocate resources to long-term projects like a design system right away.
Nevertheless, the design team and the front-end development team were convinced that a design system was absolutely essential. We put in a lot of effort, including presenting a detailed case for why a design system was needed and the benefits we would gain from building one. And finally, we won them over. We secured the necessary resources and were able to move forward with it as an official project. 👏
Excerpts from the presentation materials
Second attempt
We assembled a project team comprising members from the design team and the front-end development team. Since this was a long-term project, we focused on laying a solid foundation. We then held regular meetings to establish processes and planned to set up a dedicated development environment to ensure a smooth and efficient development workflow.
Once our processes were somewhat established and things settled down, we started to notice some inefficiencies. Since many of us were attending regular meetings, we found ourselves switching tasks frequently, leaving us with little time to actually develop the components.😹
So, we decided that only a select few would attend the meetings. We changed the process so that the development PM would first communicate with the designers, summarize the results, and then share them with the rest of the team. For each component to be developed, we paired one designer with one developer to see the project through to completion.
As a result, we were able to significantly reduce the costs associated with meetings and switching between tasks, allowing each team member to focus on developing their assigned components. We were also able to set up a dedicated development environment, making component development more convenient and efficient.
The second process
The Wadiz Design System, Created in This Way
Internally, we refer to it by the nickname "Waffle." We are continuously developing and maintaining it while expanding its application to a wider range of services. Our goal is to steadily build up design assets, just as we are doing now, and establish them as a unified common language.
We’re unveiling part of the Wadiz Design System!
Wadiz Design System Website
You can view the definition of Wadiz Design Wadiz and the component guide.
Zeplin Guide
We define the component guide as described above and begin development.
Storybook
We collect, manage, and use components that have been developed.
Future Challenges
Currently, Wadizis primarily a web-based platform, but we are expanding our presence in the native app space. As part of this effort, we hope to introduce a design system for both iOS and Android.
Furthermore, we plan to expand the components we’ve developed so far to apply the design system to a wider range of modules and layouts. This will enable us to create services that deliver a consistent UX more efficiently.
We need more team members to tackle the challenges ahead. Wadiz, we’re actively recruiting team members who are eager to work with us to address and solve these challenges!
Wadiz Regulars
