Design System and Documentation with Frog

Introduction

The project aims to build a design system and compose the documentation for a cross-continent finance enterprise. As a lead designer, my role in the team is to finalise the design system in Figma and transform it into a document on Zeroheight(a web-based design system application).The design system will be a sustainable central hub for the enterprise's designers, developers, and marketing teams between the four subsidiaries. To handle such a massive workload, we have two groups managing the whole project. 5 designers and 2 project managers are working on Phase 1: building the design system, and 2 designers and 3 translators in Phase 2 are composing the documentation on Zeroheight. As the lead designer in P2, I set up the principle of styling in documentation, transcribed the design logic to plain text and reviewed the translating results.

Translating and Transcription

We delivered the final documentation in English. The P1 design team mainly worked in Chinese, and P2 editors then translated text content into English. However, translating a design document is not always straightforward. Sometimes designers develop their unique way of speaking. For example, 'variants' might mean differently to a designer, developer and marketer. My experience designing in both Chinese and English working environments allows me to spot the particular terms that easily mislead my colleague editors who have no design experience.

What I Learn From This Project

Async collaboration via Slack and Notion

Communication is the key to an async team. In this project, the whole team spread across three time zones, so we heavily relied on Skack and Notion to communicate and archive the working progress. I found the tag-link function in Figma and Notion very helpful in tracking an ongoing issue because it directs the reader to a specific position.

Zeroheight features and documentation logic

We all learn by doing; we introduce the design-upload feature to the P1 team and, in the end, reform a few layouts in the design system and reduces much work on the P1 team.

Communication and empathetic

It was the first time I worked on a project involving more than 20+ teammates across fields, and I was inspired by how well-organised a mature organisation can achieve.When we were experiencing difficulties answering clients' doubts or when the P2 editor reported a systematic error to the P1 team, I was always impressed by how fast the group split the tasks and always looked after each other. So I feel grateful worked with such an amiable and talented squad, and this experience makes me look forward to working in a team.