CASE REVIEW

The Instapro group's continuous expansion into diverse nations reflects its dynamic growth trajectory. To ensure a harmonious and exceptional user experience across varied brands and countries, establishing a robust design system stands as an indispensable cornerstone.

MY ROLE

Upon joining the team, I encountered a design system that had been in existence for nearly two years, yet its appearance defied its age. Prompted by this observation, I embarked on a thorough investigation to unearth untapped potential and promising opportunities.

POTENTIAL OPPOTUNITIES

• Education: I realized that teams are interacting with the design system in different ways. In some teams the adoption was higher and designers and developers were using the desing system very well but in some other team, the adoption level was not desirable.

  

• Engagement: The design system team did not have some well defined processes for the product teams. The feature request process, contribution process were some areas that had room to be improved.

  

• Component quality: I observed many design depts in the design system team. I started listing down them and informed the product manager of the team to prioritize them.
• Visibility: I also understood that we would not have any measurement other than the number of components. It was a risk as we could not measure the success rate of the team. Therefore it was impossible to plan a long-term roadmap for this team.

INNITIATIVES

• Stakeholder Interview: One of the first things that I did after joining the team was stakeholder interviews. I started talking with most of the UX designers, UX researchers, content designers, UX managers, some of the product managers and developers. It helped me to have a better understanding about their knowledge and expectation from the design system.
• Holisitc view: As a product designer working in the design system team, it is very important to have a holistic view of the product to understand the scope of the work, the common patterns, and the potential oppotinities to be addressed. With the collabration of the product manager of the team and the UX design guild, I could gather the screenshot of most of the pages and categorize them by the flow.

  

• Design system usability test: Usability testing is a common approach among the product designer to test the product. I brought this approach to the design system team to test the usability of our components and spot the hidden flaws in the library.

  

• Adoption measurement: As I explained earlier, we had no way to measure the adoption of the design system in different teams. I led this topic and shared it with different stakeholder to set some adoption metrics such as Figma statistics (by upgrading the Figma subscription to the organization plan), number of feature request, number of contributions, NPS score from the users (product designers).
• Regular office hours: We had a regular UX design guild weekly meetings and I took some of this time every week to present the new enhancements that we made in the design system team and the ways to use them. In this way we ensured that the designers get the updates even they don't read the channels or the release notes. Also it increased their adoption, engagement, and contribution to the design system.
• Design token structure: As we had an intention to rebrand in the future, we needed to make sure that the rebranding will happen smothly. I emphesized on the token structure topic as one of the most fondumental building block in the design system. I presented the benefits of having centerlized multi-layered token structure to different stakeholders and started to shift to token structure over the time.

  

• Icon library enhancement: One of the problems I saw among the product designers was using FontAwesome font instead of SVG icons. It was a frustrating job to find a font name every time and paste it to show the icon. Also it was hard to manually make more than 1500 components in for icons in Figma. As I was able to write Figma plugin, I took some days to write a plugin to autome the process. As a result, I managed to make components for all of the icons in FontAwesome and make the size and the style variant for each of them.

  

• Docuemntation template: To bring the consistency into the design system documentation, I led the discussion to make a structured template in order to give this oppotunity to everyone to contribute to the design system documentation. We observed an increasing amount of contribution to the design system documentation after introducing this template.

  

• Released a podcast about design system: There was a new innitiative the the company to release some podcasts. We found it a very good oppotunity to make more awareness across the organization. I attend to one of the episodes to explain the design system. You can find it in Instapro Show on spotify.

CONCLUSION

Design system role in different organizations is very depends on the maturity level of the teams. Selecting the right innitiative and activity plays a crucial role. In this organization, communication with different stakeholders was the key to find the importance of each topic and prioritse them accordingly. As you can see, when we are dealing with design system in a medium or a large scale organization, working on the Figma library is one among many responsibilies. It is important to make sure that the stakeholders are fully aware of it.