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.

With the launch of Yodobashi 2040, the company’s product and service portfolio began expanding rapidly—introducing platforms such as Yodobashi XTreme for both B2B and B2C users, along with new services for sub-brands like ISHII Sports and ArtSports. While this growth significantly enhanced Yodobashi’s competitive positioning, it also introduced a new challenge: brand fragmentation. As each service evolved independently, inconsistencies in design and user experience began to surface—diluting brand equity and undermining the cohesiveness of Yodobashi’s broader identity.

To address this, Yodobashi needed a unified design language—one that could provide visual and experiential consistency across its growing ecosystem, while also supporting the rapid development of future offerings. The answer was a flexible, scalable, multi-brand design system. But building such a system wasn’t just about aesthetics—it required our team at ZOOOM Productions to gain a deep understanding of the distinct needs, constraints, and workflows of various product teams across the organization.

To address the core challenges of consistency and speed, our team partnered with CreationLine Inc. to design and implement a robust CI/CD pipeline. This infrastructure allowed development teams across Yodobashi to integrate the new design system with minimal disruption—ensuring that even as the system evolved, product teams could continue building and shipping without delay. Updates to the design system could be deployed incrementally, enabling a seamless rollout across products and services without the need for manual reintegration.

With the pipeline in place, we turned our focus to building the multi-brand design system itself. The key principle was modularity. We structured the design library into interchangeable segments built on a shared foundation, allowing teams to swap in brand-specific components without disrupting the overall system architecture.

To support this vision, we adopted a token-based structure, organized into clear tiers—Global, Alias, and Component. Each layer was designed to be distinct yet interdependent, enabling developers to localize the design system per brand while preserving overall design integrity. This approach ensured the system was not only flexible and scalable, but also future-proofed for continued expansion across Yodobashi’s growing portfolio.

With the overall structure of the design system in place, our next challenge was to define the visual core—ensuring that, even with a flexible token-based architecture, the components would remain aesthetically consistent and refined across all brands.

To achieve this, we established two key directions:

First, we defined a universal design foundation—the essential elements that must serve all products and services across the Yodobashi ecosystem. This included a broad, versatile color palette, a typographic system centered on Noto Sans (chosen for its multi-language support), and a neutral, adaptable icon set. These core elements were designed to meet a wide range of functional and brand-agnostic needs while maintaining visual harmony.

Second, we identified which aspects of the system could be used to express brand individuality. From brand-specific colors to subtle details such as component borders or shadow treatments, we structured the system so these expressive layers could either override or complement the universal foundation. This balance allowed each sub-brand to maintain its unique identity while still benefiting from a cohesive, shared design language.

While the primary goals of this initiative were to accelerate product development and establish a unified design language, we also saw an opportunity to address a long-standing gap in motion design and interaction quality across Yodobashi’s digital ecosystem.

Historically, many of Yodobashi’s products and services were built using open-source libraries, resulting in inconsistent or poorly executed micro-animations. These disjointed motion patterns not only diminished the user experience but also negatively impacted overall usability and perceived polish.

To solve this, our team introduced a systematic motion framework as part of the Yodobashi Design System. We defined a clear set of motion principles, including tokenized values for timing, easing, and transitions, creating a consistent foundation for micro-interactions across all touchpoints. This motion layer was designed as a modular add-in, allowing teams to easily adopt it without disrupting existing workflows.

The result: a more cohesive, engaging, and intuitive user experience that brings the brand to life—subtly guiding users through interactions while reinforcing a sense of polish and care in every product.

Yodobashi 2040 was an ambitious and transformative project—one that would not have been possible without the dedication and collaboration of countless individuals. I extend my heartfelt gratitude to every team member at ZOOOM Productions, Yodobashi, and our partner organizations. Your collective expertise, creativity, and perseverance brought Yodobashi Lifestyle to life, turning a bold vision into a groundbreaking reality.

Thank you for being part of this incredible journey.