Before beginning the project, it's crucial that we understand what constraints, expectations, and any other concerns are for the soon-to-be-developed design system.


As a result, for the first step of the project, over 4 weeks, we conducted multiple interviews with major stakeholders in addition to audits of current design systems and component libraries. To bolster our understanding, we also conducted secondary research by extensively investigating established design systems from major businesses with similar needs as Yodobashi.

With multiple isolated development teams operating with limited cross-communication, our project team realized the crucial necessity of a design system that can be seamlessly embedded into active development operations without incurring interruptions.

To realize such a design system, the project team developed a custom CI/CD (Continuous Integration - Continuous Delivery) system that automatically syncs and translates the defined components and libraries across diverse programming languages, allowing developers and designers to work seamlessly and liberating them from constant concerns with perpetual updates. This new CI/CD system also allows Yodobashi to launch new projects and development teams with reduced onboarding time and integration time, greatly improving the scalability of “Yodobashi 2040.”

Yodobashi Holdings, as a holding company, oversees a wide range of brands under its umbrella, of which Yodobashi is one. This intricate landscape necessitates a design system that could help Yodobashi Holdings develop products and services for its primary and specialty brands (such as Art Sports, Ishii Sports, and more).

To tackle this challenge, the project team adopted a multi-level controlling scheme powered by a systematic definition of design tokens. This controlling scheme enables the design system to make changes at scale rapidly while reducing the need for manual intervention and, consequently, the time and costs needed for development.

Yodobashi, as a retailer and a service provider, places a premium on ensuring that its users can focus on the products, their benefits, and other vital information required for effective transactions. Furthermore, with an extensive catalog of over 8 million products and a wide range of services for different sectors, Yodobashi further requires its design system to be flexible and adaptable for present and future needs.

To meet this demand, the project team adopted a function-first approach, crafting a design system with simplicity and unobtrusive aesthetic. This deliberate simplicity of the design ensures that users’ attention can remain on the products while making the defined elements easier to implement, enabling Yodobashi to highlight its vast offerings and maintain a distraction-free user experience.

Catering to both local Japanese clientele and international travelers, Yodobashi faced the challenge of offering its services and products in multiple languages. It’s no wonder then that the business expects its design system to be capable of working with multiple languages.

Understanding this linguistic requirement, the project team created a versatile typography system designed to seamlessly accommodate various languages, including Japanese, Chinese, Korean, and English. Starting from defining the best values for each language through multiple tests to measure the reading speed, reading accuracy, etc., for different values, and powered by the defined design token definition scheme, the project team succeeded in creating an adaptive typography system that allows development teams to quickly implement new languages in their design with just one additional command.

Serving a wide range of customers, Yodobashi’s services and offerings must be accessible, even for customers with special needs. This prompts a palette of accessible colors and a systematic combination of colors that ensures all accessibility regulations are met.

To achieve this, the project team conducted extensive tests using Yodobashi’s current services and products as the base to determine the range of the color palette in addition to user testing to ensure that all requirements are met.

Last but not least, the project team also drafted a set of motion principles to inject life into the Yodobashi Design System. Through extensive research and usability testing, our effort ended with two distinct groups of motion principles: functional and expressive. The functional group prioritizes delivering concise and practical feedback for users when navigating complex interactions. On the other hand, the expressive group focuses on enriching components with mechanisms to captivate users' attention.

By utilizing these two sets of principles meaningfully, designers and developers working with the Yodobashi Design System can quickly craft products that are not only vibrant but also functional while minimizing the time needed for experimental iterations.