Yodobashi Design System - Digital eXperience
Yodobashi Holdings, a major Japanese retailer, faces a critical juncture in a rapidly evolving market with new technologies and increased competition from both overseas and domestic contenders. To avoid being overshadowed, Yodobashi launched the "Yodobashi 2040" initiative, aiming to transform and expand services for B2B and B2C customers. The success of "Yodobashi 2040" hinges on a carefully designed system, and Yodobashi has enlisted the expertise of ZOOOM Productions, its lead creative agency, to ensure a bespoke and meticulous approach to the transformation.

*Due to the nature of the project, critical information (such as detailed models, information flows, etc.) that may reveal vulnerabilities in the system is filtered.
Project Duration
October 2021 - October 2022  
Team Size
7 Members
Primary Role
Lead Designer & DesignOps Manager
UX Research, UI Design, DesignOps Management & Leadership
/ 00
Key summary
The project in numbers
components developed
interviews with major stakeholders
tests conducted with end-users and major stakeholders
audits conducted across services and products
available languages
estimated reduced development time
/ 01
The Problem
Various constraints and expectations
Interviews with stakeholders
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.
/ 02
The Foundation
Developing for scalability
A bespoke CI/CD system
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.”
A multi-brand design system powered by tokens
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.
/ 03
Creative Development
Simple, flexible, and functional
A function-first approach
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.
An adaptive typography system
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.
An accessible color system
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.
And motion principles to bring life to products
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.
/ 04
A special thanks to the project team