Co-creation work with Figma, cutting across job categories

The business impact of the co-creation experience

While Figma is often spoken about in the context of web design, its value goes far beyond that. This case study looks at SmartHR, which introduced Figma across the entire company and is using it for a variety of operations besides design, including communication, management, and HR development.

In terms of how the use of Figma has spread, we first asked Mr. Masaki Ueda (handle: wentz, referred to below as “wentz”), General Manager of the Labor Product Design Department, Product Design Division, Product Design Headquarters, about the background to its introduction in product design.

wentz explains: “SmartHR is a company that provides human resources and labor-related systems and services. Our mission is to eliminate social issues related to labor and to create a society in which everyone can work in a way that best suits them, based on the word ‘well-working.’ Our company had been gradually updating its development systems from around 2020, and since I joined the company in April 2021, agile development structures such as Scrum, in which development is performed in teams that include PMs, product engineers, QA engineers, product designers, and UX writers, have become mainstream. However, at that time, we still used desktop app design tools, so we had to use multiple tools in order to share data with people other than the designers, which was quite complicated.

At around that time, just a few of the designers were starting to use Figma. I had used Figma before I joined the company and felt that it facilitated collaboration, so I wondered if it could solve this issue. I felt like I was spreading awareness of Figma as its unofficial ambassador (laughs).

At that time, a proposal was adopted to publish the SmartHR UI component library in the Figma community. This project is based on our “SmartHR Design System” philosophy of reducing the process of “reinventing the wheel” in society by making information available to the public, with a view also toward increasing recognition. While the library itself was available internally in the past, web-based tools were better suited to open-source publishing, given the need for collaboration between internal and external stakeholders. After the library had been established in Figma, word of mouth about its ease of use spread among our in-house product designers, and we ended up using Figma as our main design tool.

The migration to Figma was incredibly short, taking around only two to three months. I feel that experiencing the appeal of collaboration firsthand facilitated the migration. As the designers assembled to review the UI design and create a mob design together, the co-creation experience of gathering together their respective cursors on a single canvas and instantly creating multiple patterns surely had a great impact.”

I asked wentz about what had changed since the introduction of Figma.

wentz commented: “First of all, I feel that it's become quicker to achieve practical application. With Figma, designers can create design data in parallel, and then quickly pass the data on to the PMs and engineers. When exchanging data locally, many steps need to be taken such as sending data, opening it, and communicating, but with Figma, the process can be completed simply by looking at the canvas synchronously and communicating. Even if not synchronously, all you need to do is add a comment to the file and send a single URL. People with differing timelines have also felt that it has become easier to make decisions.

The establishment of the ‘SmartHR UI’ on Figma has also had a significant impact on speed, as it has eliminated the need to adjust the different contexts of designers and engineers respectively. We believe that the goal is not to create so-called pixel-perfect design mock-ups, but rather to have them implemented as components in the code base. As long as the contexts are in alignment, the appearance does not necessarily need to match. It's sufficient to simply know what components are being used, so communication can be performed quickly. I feel that such ease of collaboration and communication is incredibly helpful in creating better products at a faster pace. In addition, by making it open source, we have been able to collaborate with product designers at our group companies, and I think that this has also contributed to an improvement in the development efficiency of other general users.

Another tangible benefit is that it's easy to create mock-ups. Our use of mock-ups is broad, and these can be useful in various phases of development, including conducting user surveys, taking them to business opportunities to ask about requirements, and having reviews performed at business-side functional briefing sessions. We can quickly work on a prototype using Figma's design data and create something that roughly works in as little as one day. The ability to move speedily and with agility is important in moving development forward quickly.

I also feel that Figma has contributed to design in a broader sense. With a 1:9 ratio of designers to engineers, our company has a far greater weighting of engineers. There were cases where we would spend a lot of time waiting for designers to make decisions, and there was also a need for engineers to be able to design in order to achieve quick releases. For this reason, we've established a support system that enables not only designers but also other people to perform design work using Figma; this has included creating tutorial sheets for designers aiming to design screens using “SmartHR UI” and providing opportunities to carry out mob design with the involvement of people from other positions. Anyone can start creating designs on Figma in their browser as long as they have been issued an account. I believe that by lowering the barriers for non-designers to participate in design, we can create a world where anyone can be involved in design.”

A platform that can handle a variety of work and work styles

SmartHR has also introduced Figma at its Communications Design Center. We asked Mr. Yutaka Sekiguchi (handle: sekig, referred to below as “sekig”) of the Communication Ops Unit, Communication Ops Department, Brand Development Division, Branding Headquarters about how it is being used in communication design areas that are not direct product design organizations, such as UI design.

sekig explains: “The Communication Design Center that I am a member of is not technically product design itself, but rather is a cross-organization of design professionals on the marketing side that supports the delivery and branding of services. Each member has a completely different type of expertise because they each have different outputs across online, offline, and media. This means that different people use different tools for their work – some use Adobe software, others use video production software, and not everyone is using Figma as a design tool. More often than not, I think it is used as a tool for compiling master data or as a whiteboard tool. For example, FigJam makes it possible to collect master data in an easy-to-view format. When it comes to video production, you can organize a variety of data from project overviews to storyboards, video materials, and reference videos on the same canvas, which makes it possible to see the latest status at a glance. When you would like a review or to ask for advice, you can share this with a single URL and communicate with members from various positions through the use of voice chat or cursor chat; this is also a popular method of use.

The implementation began with the operation of the design system. Figma was an excellent tool for distributing assets, such as the illustrations and color schemes used by the business and marketing side in sales materials, etc. Since our company is focusing on SSOT (Single Source of Truth), the deployment of Figma has progressed in the process of creating a mechanism in which our common assets can be found in Figma.

As I said earlier, different individuals of our team have differing expertise, and the challenge was that the production process was susceptible to becoming closed. In addition, we have some people remote working, while others come to the office every day. Figma is very useful as a place for people who work in a variety of ways, such as in terms of what they do and how they work, to be loosely connected. We can produce large-scale website projects, but we can also use the same scheme for casual conversations such as “I made a banner,” or, “To what extent should we keep it consistent with the campaign from three years ago?” In short, members with undefined work can connect on the same tool, Figma, when they want to have a casual conversation or reach a firm agreement. It's not our objective to completely master the Figma tool, so the value of its "soft layer," such as ease of operation, ease of connection via synchronous/asynchronous means, and ease of application, is important to us. As Figma is so incredibly easy to use, our members have naturally come together on it without any hard pushing. As a result, the ability to maximize iteration speed is probably its biggest value for our creative field.

Another advantage is that it makes it easier for people to understand what can be realized on the web. This gives us a somewhat simplistic way of conveying to our more graphics-oriented members that if it can't be done in Figma, it can't be realized in a browser, or it would be difficult to implement. As a company that includes designers with varying skills, it is helpful from a management perspective to have easy-to-understand guidance.”

Both high-level security and low cost

SmartHR introduced the Enterprise plan. We asked Mr. Toshihiro Kudo (handle: Oimo, referred to below as “Oimo”) of Corporate IT at the Information Security Group about the background to the introduction and the subsequent steps.

Oimo explains: “We originally used three types of whiteboard tools in-house, and we were considering the integration of these from a cost-saving perspective. One of the reasons for this is that we have more than 1000 employees and need to be security conscious. Our essential requirements included single sign-on, audit functionality, and sharing control, so any tool that we went for needed to be enterprise-ready; where Figma showed its superiority was in terms of the cost aspect. We signed the contract about two months after we had begun considering it as a solution, and then we had an onboarding period of around two months, so the transition was executed on a pretty tight schedule. A wide variety of tasks needed to be carried out, including reviewing usage rules, considering the hierarchical structure in view of the scope of information disclosure, and creating and deploying workspaces for placing files in public areas such as SmartHR UI. In addition, when migrating from the whiteboard tool that we had previously been using, it was necessary to relieve anxiety and to provide support for onboarding. We took action such as preparing manuals, conducting prior verification on topics that were likely to be inquired about, documenting knowledge, and creating channels on the company's internal chat where people could ask for advice and gather knowledge. I myself started using Figma from almost zero, but I felt it was easy to study on my own because it was so simple and intuitive to use. I also learned a lot from the beginner session held by Figma staff.

In the Corporate IT Department, we use FigJam for brainstorming, reviews, and creating materials for 1-on-1s. I think its AI-based functionality for automated summaries and sticky notes is more accurate than other tools. I also like that it allows for frank communication, such as through stamps and cursor chats. Outside of that, we are also starting to use it to create internal sites. We're now using it in a wider range of applications, from creating workflows and transition diagrams through to designing screens.”

Future usage methods that fit diversity

Finally, we asked each of our interviewees to give some brief comments on their outlook for the future.

Oimo: “Recently, we've been receiving more and more applications from people wanting to use Dev Mode. It appears to be attracting attention from members who are not involved in design, but who still need to see it. The benefits from a cost perspective are significant, so we want to make good use of them. In addition, while in the past our tools and information were scattered, the introduction of Figma has allowed everything to be unified, so I sense that this further contributes to the ease of use. Going forward, I hope we'll continue to find even better ways to use it.”

sekig: “I feel that one of Figma's greatest values is that it can be used in a fuzzy manner, but moving forward, I would like to see it being used in more logical design as well. While maintaining it as a great place for open collaboration, I would like for us to share our common resources and know-how, and to further improve design quality and work efficiency.”

wentz: “I feel a strong affinity with Figma's concept that design is not just for designers. If the AI functionality is expanded, perhaps it will also become possible to automatically generate component libraries and patterns. I hope to see a further enhancement of its detailed functional design, which reduces the time spent on simple tasks and increases the time spent on thinking.”