As more companies are establishing design systems, there is a growing interest in the differences in their approaches and methodologies. In this interview, we spoke with Makoto and Tadahiro from DMM.com, who are involved in the development and operation of the design system “Turtle” in the Platform Business Division. We discussed the background and objectives of launching the design system, as well as the changes that have occurred as a result of its implementation.

Makoto Omura – DMM.com

Makoto is a designer who holds positions in the VPoE (Vice President of Engineering) and CTO (Chief Technology Officer) departments. He provides technical support in the Frontend Group of the Platform Business Division and is primarily responsible for the construction of the design system.

Tadahiro Okamoto – DMM.com

Tadahiro is a front-end engineer in the Platform Business Division. With 10 years of experience, he has worked in startups, AWS outsourcing, and business companies before joining DMM in 2020.

Consolidating multiple services with a design system as the foundation

── Why did DMM.com decide to create a design system?

Tadahiro: The project for DMM’s design system, “Turtle,” started when I and another member of the company became aware of the problem. 

DMM has various businesses and services, but users perceive them all as a single platform, and we also want to behave as one platform. However, in reality, each business unit was developing independently, resulting in a significant inconsistency in the overall appearance and quality, giving the impression of phishing sites when moving between services.

At the time we wanted to solve this problem, there was also technical support from the CTO department, where Makoto is a member. This led us to start the launch of Turtle.

── What was on your mind when launching Turle?

Makoto: l believe our goal for launching Turtle, a design system is “systematizing thinking.” For example, instead of saying, “Feel free to use any color from this color palette,” we define usage scenarios such as “red for failure, green for success.” This is to ensure that the system does not rely on the thinking or skills of a single designer, which is crucial.
By doing so, we eliminate the need to design the UI from scratch for each project, and we can handle it even if not all designers are strong in UI design. Reducing the burden on individuals by systematizing and allowing them to use their brains for more creative tasks is the essence of a design system.

── The name “Turtle” have a specific meaning as well?

Makoto: One meaning comes from the Japanese proverb “The crane lives for a thousand years, the turtle for ten thousand years.” We wanted to express our desire to operate Turtle for a long time, and we associated it with the turtle, a symbol of longevity.

Another meaning comes from the concept of the “World Turtle” that appears in various mythologies. It suggests that the world rests on the back of an elephant, and that elephant stands on the back of a turtle. We wanted to convey the image of Turtle becoming a significant foundation that supports DMM.

Actually, initially, we thought of it as a temporary name, but as we organized our thoughts, we realized that it fit perfectly, so we decided to keep it (laughs).

Taking into account our company’s unique characteristics, we started with “color”

── What did you start with when launching Turtle?

Makoto: At DMM, we constantly have numerous projects in progress, such as new service development, campaign initiatives, and improvement measures. Therefore, it was necessary to create the design system in parallel with these projects, rather than applying it after the design system was fully developed.

Considering this premise, the most essential element in any project is the “screen,” and the most frequently used aspect is “color.” Bulk-replacing colors in the codebase is extremely challenging, as a slight deviation in the Hex value can make it difficult to find matches in searches. However, on the flip side, the benefits of unification through the design system are significant. So, we decided to start with colors, particularly focusing on neutrals.

Interestingly, before starting Turtle, there was a project that Tadahiro was involved in, which was put on hold, and the assets such as designs and code created during that time were left hanging. Utilizing those assets and setting rules became the first step for Turtle.

── How did you decide on the colors?

Makoto: As we assumed support for dark mode at DMM, we first worked on defining the colors for the background and surface, which are the two main axes.

The colors for the background were determined based on the core concept and practical considerations. We wanted to have some variation to avoid monotony, so we set three colors, taking that into account.

Makoto: Based on the optimal contrast ratio with the Background, we decided on the colors for the Surface and further investigated and determined the colors for borders and dividers. With Turtle, it becomes easy to switch to dark mode while maintaining the optimal contrast ratio.

Tadahiro: Since DMM has various services, each with its own unique characteristics, we intentionally designed Turtle to have minimal colors from the beginning, with a focus on extensibility. However, for services provided for the platform, usability is more important than uniqueness. By using Turtle, we can achieve that quickly and ensure quality.

Design system as a common language: fostering communication

── How has the internal response been since its launch?

Tadahiro: To be honest, the initial response within the company was not very enthusiastic. There was a lack of resonance, with some questioning whether it was worth making such a big deal out of it.

Therefore, we first introduced it experimentally in one service, and then gradually expanded it to the entire DMM by having other services we are involved in using Turtle. The utilization started gradually from the development team and is now slowly spreading to the design team.

── How developed is Turtle at the moment?

Makoto: We have a good collection of basic components such as colors, checkboxes, and buttons. Since Turtle is still in its early stages, there are still many components that are not yet available, such as breadcrumbs or steppers. Therefore, we have a practice of adopting newly created components from each project and adding them to Turtle’s repository.

Makoto: In December 2022, we launched “DMM TV” along with a new subscription member system called “DMM Premium Membership.” During the development project for this, a modal component that was not available in Turtle appeared. We reviewed it rigorously, considering accessibility, and created an excellent modal, so we decided to adopt it into Turtle. Enhancing accessibility is currently one of our main focuses.

Tadahiro: We also recently incorporated the coupon card created in the development project for “DMM Coupon” into Turtle. Similarly, help pages have been added recently following the same process.

──Then collaboration with the designers on the business side seems important.

Makoto: I am hoping that the designers on the business side can come up with ideas like “It would be great if this were available in Turtle.” However, I also believe that in order to foster such thinking, it is necessary to systematize our thought processes. As one approach, we are working on enriching the “logic tree” as a way to achieve that.

Makoto: By following this logic tree, anyone can systematize their thinking and make decisions on whether to create something project-specific or use Turtle. This is also an area that we want to cover as part of the design system.

──With the creation of Turtle, there have been changes in internal communication?

Tadahiro: We now receive casual opinions and have daily discussions about “what should be done as Turtle.” There are significantly more opportunities for discussions. We also often notice issues through internal inquiries, so we use GitHub Discussions to gather feedback and frequently update the inquiry channel on Slack.

Furthermore, Turtle has the aim of creating an ecosystem that supports the entire front end of DMM. To enable bulk updates, we manage it using a monorepo (a method of managing multiple projects in a single repository). With monorepo management, for example, when launching a new service, daily code reviews are required for about three months. This leads to closer collaboration with designers on the business side, and within that collaboration, we have seen the emergence of communication such as “It would be great if this were available in Turtle” or “This UI in Turtle doesn’t look quite right.” These incidental benefits create additional value. The creation of a common language, Turtle, has had positive effects on both design and engineering.

The app has meaning only when it is found and used

── When it comes to building and operating a design system, is there anything you keep in mind?

Makoto: We both have a tendency to “look at too many” design systems that various companies have published, almost as a hobby (laughs).

Among them, what I pay the most attention to is the structure of the documentation, especially how it is categorized. Even if the documentation itself is comprehensive, if it is categorized based on someone’s subjective sense and is difficult to search and discover, it will become unused.

Therefore, in Turtle, we not only focus on enriching the documentation itself but also prioritize its ease of reference and discoverability. Even if the content is somewhat challenging, as long as people can find their way to it, they can ask questions and initiate communication.

Currently, we don’t receive many inquiries from designers, so in the future, we would like to provide onboarding data on Figma and ensure that designers can easily find their way to the documentation from there, making it more user-friendly for them.

Tadahiro: We also want to continue valuing the extensibility, which is a characteristic of Turtle. For example, if the business side wants to express the uniqueness of a service by conforming the login screen to the specifications of a gaming console, we want to enable them to achieve that level of attention to detail and pursue expertise while ensuring accessibility. We would like to provide a certain degree of flexibility. To do that, it requires mutual understanding of each other’s expertise, and we want to communicate and explore best practices together.

Related Links
DMM.com group
Related articles about Turtle in Japanese, from DMM inside
Ecosystem Supporting DMM Platform Development
Experimentation in Defining Typography in a Design System