On November 7, 2024, Mitsubishi Electric Corporation began making the Serendie Design System (SDS), a design system that improves the efficiency and quality of UI development, available for free. Along with a variety of design components, we have provided a smooth workflow in cooperation with the Figma design tool and the front-end framework React, in and out of the company. One of our goals is the acceleration of DX through collaborative creation.
In this interview, we asked the key members who developed SDS to talk about various topics, including the design philosophy and development background of SDS, and the value of DX promotion through Serendie®.
External disclosure---it's quite exceptional. This openness makes an Agile approach available to everyone.
What are your regular jobs and your roles in SDS?
IizawaI am with the System Collaboration Planning Department, DX Innovation Center at Mitsubishi Electric Corporation, and I am the product owner who is in charge of the whole project. My main role in the project is to set the direction of the project and make various decisions.
ItoAs a member of the Integrated Design Center, Mitsubishi Electric Corporation, I am working on UI/UX designs for industrial systems, and conducting a study on the visualization of large amounts of data stored in the company. In SDS, I play the role of “Scrum Master,” a facilitator who drives the project.
DeguchiI am from a design firm, Takram, and have been working on the SDS project for about a year. I have contributed to the project by leveraging my rich experience in design systems.
Could you explain what SDS is about, and what it aims to achieve?
IizawaSDS is a design system to improve the efficiency and quality of UI development. In addition, it also aims to accelerate value co-creation together with our external partners based upon our digital platform, Serendie®. The importance of UI/UX as a customer interface has been growing significantly from day to day. This is partly due to the need to unify UI/UX to improve consistency of brand identity, user accessibility and usability, and customer satisfaction.
Along with the development of the SDS, the Serendie® brand system was also discussed under the overall direction of the design company KESIKI, and the design direction of &Form. In fact, it is the people at Takram who have helped us set up the design system, where the brand system and UI/UX are consistent.
ItoWe believe that it is important to promote the concept of “Agile development” in order to co-create value in digital services with our customers. The key to this is the rapid development of high-quality prototypes. SDS is one of the systems that make this possible.
Then, I would like to ask for more detailed information about the specific design philosophy or concept of SDS?
IizawaMitsubishi Electric Corporation covers a wide range of businesses. The needs of our customers are, therefore, fundamentally different from those of general startups and tech companies that create one design system per product. As to how to deal with such a wide range of needs, a team under Mr. Deguchi's leadership discussed how our design systems should be structured, leading to the creation of flexible systems.
DeguchiAfter joining the team, I spent about a month interviewing various people. Through the interviews, I found that an engineer-oriented Monodzukuri culture is deeply rooted in Mitsubishi Electric Corporation. That's why SDS focuses on specific areas rather than abstract areas such as design principles. One of these is the UI Component, a collection of versatile parts. The combination of multiple parts has enabled us to focus on high efficiency, allowing us to build prototypes even without designers.
ItoIn addition, there is another concept, which is “being open.”
Deguchi It was decided that SDS should be open to the outside. This meant that almost everything we had discussed over the past year would be open. In Japan, we had no example of large companies, like Mitsubishi Electric Corporation, disclosing their own design system.
ItoWe expect that making this kind of external impact will help to raise awareness of SDS within the company as well.
I think that the main purpose of use is prototyping. So, the importance of prototyping is increasing, isn't it?
IizawaWhat we are now trying to achieve is the transformation from the existing business model of “selling products and providing after-sales service for them” to the new one of “providing new value forever by using the information generated by the products we sell.” This process puts our customer touch points at the center of digital services, making UI/UX more important. We believe that prototyping and design systems are at the heart of these activities.
Use a dress-up model to make the design available for different business areas
What kind of concept did you use to decide the direction of the appearance SDS should take?
IizawaThe decision took many months of discussion. We expected SDS to be used for prototyping in our co-creation space, Serendie Street Yokohama. With this in mind, we came up with five color themes in the end, based upon the concept of “embracing new possibilities,” in line with brand identity of Serendie®.
DeguchiThis is like a dress-up model that only defines its structure, allowing users to change themes as they wish.
IizawaOn the other hand, it is designed to make it easy to adapt the design separately. This is because a project whose branding has already been completed by another designer needs to be changed when the products are manufactured with prototyping.
SDS should cover a wide range of areas. What kind of ingenious ideas did you put into the system to make it widely used?
ItoWe prioritized versability and reproducibility to avoid specializing in any one particular business area. As for fonts, we have basically adopted those that are widely used in many applications and that users can use for free such as Google Fonts. The SDS design taste is, therefore, limited to the basics, and users can dress up the design, if necessary, when a project requires a particular taste.
The prototype can be developed without designers. This sounds like helping to speed up the development process.
DeguchiCommonly used screen layouts in SaaS, such as for a log-in screen and control panel, are available as templates, so you can easily create prototypes by copying and pasting.
ItoSome of the users in our company say, “I was able to make prototype screens very easily with just a few changes to the template.”
DeguchiOur templates are a combination of UI components provided by SDS, so they are like models of how to use SDS. I think this is one of the unique points of SDS.
IizawaWe have various UI/UX designers in the Integrated Design Center, but it is true that there are some products in which our UI/UX designers have not been deeply involved. With SDS, however, we can reach out to them with Mitsubishi Electric Corporation’s own designs.
ItoThere are one hundred and several dozen designers at the Integrated Design Center, but this number is too small to handle numerous projects and every hole and corner for the company, which has more than 30,000 employees. On the other hand, if a design system that ensures accessibility and usability to a certain degree is widely adopted, the quality of Mitsubishi Electric Corporation's products will surely improve. So, I became involved in the development of SDS, hoping to see this through as a designer as well.
What are strong points of SDS compared to other design systems?
IizawaOne of them is that SDS clearly describes what Serendie® is all about, while offering versatility. It looks like a normal user interface, but the design philosophy of Mitsubishi Electric Corporation is woven into it so well that you will only be able to see it slowly and gradually. I'm sure you will feel the open atmosphere that is unique to Serendie®, even if you use the system without thinking about it.
DeguchiAs I have explained already about the concept, another strong point is that it can be applied to various businesses. In fact, there are not many companies today that deal with a wide range of businesses from B2C to B2B, just like Mitsubishi Electric Corporation, and most design systems tend to be made specifically for one particular product. You don't see many design systems that need to be applicable to different projects and different products, like SDS. Even if there are some, they must be run by platform companies like Google or government agencies like Japan's Digital Agency. Regarding SDS, this feature is actually required as part of Mitsubishi Electric Corporation's business model, which makes it unique as a design system.
Shift to a design system to create communities
I see. Is there anything else about the system that you paid attention to as a design system used by a very large number of people?
IizawaFrom the early stage of this project, we have been always discussing how to “create communities through SDS.” In fact, I kept thinking about how to build a relationship with the people involved, including the staff at the Integrated Design Center, external experts such as Mr. Deguchi, and external people who would be interested in the system after it was opened to the public.
DeguchiProjects with design firms like Takram, of which I am a member, are basically work where the relationship ends when the delivery is completed. In the case of the development of SDS, however, we both agreed with the idea of creating a system that allows us to collaborate for a long time.
IizawaThis is one of the reasons why we have opened SDS to the public. We want to help build not only internal relationships, but also communities in Serendie Street.
ItoInternally, we have held orientation sessions for SDS, and boot camp events for design and for development. Each event attracted many participants, and we received comments such as, “I’ve already started using it for prototype development right away” and “I don’t have a project related to it, but I want to prepare so that I can use it properly if I need to.” These voices tell us that there are many people who are eagerly awaiting SDS. For them and future users, we have been promoting projects that enable us to build systems, such as running events and workshops on an ongoing basis. It is still early days, but we will continue to refine the system to make it more user-friendly, with input from participants and external people.
This is the last question. What does the future look like for the development of SDS?
IizawaWe plan to release not only UI kits but also code in the future. Once they are released, we will utilize feedback from inside and outside the company to develop the system and ensure its operation in Japan. Later, we also plan to expand its operation globally.
DeguchiIt is very difficult to have all the UI components necessary to satisfy all needs ready from the start. Therefore, we will discuss what should be added by checking the needs and opinions both inside and outside of the company. I think this kind of activity to improve the system will continue in the future as well.
ItoWhen it comes to spreading it around the company, we want to implement it in onboarding programs for new participants in Serendie Street. At the Integrated Design Center, we believe that knowledge accumulated in the company should be widely used to train new employees through SDS, so I want to expand such activities from now on.
