Workflow and guideline for 3drens

Improve the internal work experience of the team

UI/UX

B2B

Design Driven

My role

Design internal process, Establishing design guideline

Timeline

Mar 2023 - Mar 2024

3drens is a company focused on logistics software solutions. During my time responsible for the driver app design, the product was in a phase of rapid iteration and market validation. The fast-paced development also led to us accumulating significant design debt, which increased communication costs in subsequent development. Therefore, during this period, I established guidelines and workflow for several issues to make future iterations smoother.

i18n design process

Content guidelline

Icongraphy

Retrospective

i18n design process

In 2023, the company began expanding into the Southeast Asian market. The first problem we encountered was i18n (internationalization). Although we already had experience in multilingual development at that time, our usual development process was no longer suitable for the large-scale requirements of the current stage. This led to designers needing to spend extra time communicating with engineers and managing drafts.

From a design perspective, our task was to translate the product copy into English and ensure it wouldn't break the layout in Figma. Initially, our approach was to duplicate each UI element that needed translation in Figma, then translate the Chinese copy to English. The engineers would then create key values based on each piece of copy in the design draft, using these keys to manage updates to both Chinese and English versions.The advantage of this method was that our translated copy could maintain proper layout, avoiding layout breaks, and we could make immediate adjustments if needed. The disadvantage was that the translations couldn't accurately and comprehensively consider localization.This approach seemed fine at first glance, and we indeed used this method for several sprints. However, problems gradually emerged later on:

01.

Repetitive words scattered across different design drafts are difficult to maintain. Updating them manually takes a lot of time.

02.

The collaboration process doesn't ensure alignment between design drafts and copywriting, and as the amount of copy increases, the communication cost with engineers also rises.

Clearly, this process is not suitable for our current product scale. Considering that there will be more languages in the future, I started thinking about how to optimize the existing process.

The first issue that needs to be addressed is the organization of multiple languages in the design drafts. We need to find a method to consolidate the text content and avoid spending a lot of time updating design drafts. First, I researched many language management platforms, hoping to automate the language replacement in design drafts. However, these services are usually expensive, and implementing them would significantly change our existing processes. Considering the time and financial costs, we decided not to adopt this approach at this stage. I also tried some free Figma plugins, but abandoned them due to instability. Finally, I realized that Figma variables could also consolidate text. By simply setting up a text variables database and applying it to text layers, we could manage the text content in design drafts in batches.

Click "create variable" and select "String" to create a text variables database for batch management of i18n (internationalization).

Considering collaboration with engineers, how can we reduce communication costs and ensure consistency between translated text and development? As mentioned earlier, engineers manage text content using key values, where one key represents one piece of text. The method I thought of is to synchronize the engineering keys with Figma variables, making the keys a bridge for communication. This can ensure consistency between engineering and design. When new text content is generated, engineers can annotate the newly created key values using comments.

Naming variables using actual key values.

I shared the process with the team, and it was adopted. Afterwards, I created a Figma variables tutorial and wrote up collaboration procedures to help the team quickly get up to speed.

Content guidelline

Due to the impact of multilingual development, we began facing issues with translation consistency. While design was responsible for copywriting and translation, to share the translation workload, Product Owners (POs) and Quality Assurance (QA) also assisted with translation and proofreading. Although collaboration among multiple people increased efficiency, it also led to inconsistencies in the copy. As a result, we had to spend additional sprint time to resolve these issues.

To solve this problem, I decided to establish copywriting guidelines and implement small-scale changes in the app first. I began with desktop research to understand how other products set up and structured their content guides. Next, I started taking inventory of all the copy in the app, identifying inconsistencies and marking areas where rules needed to be established. Finally, after discussing and reaching a consensus with QA and web design colleagues, I wrote out the rules and applied these guidelines to all the copy in the app.

Identify issues through auditing the shipping order template and make notes to facilitate the subsequent organization of general rules and optimization of the text.

Content guide includes copywriting rules and general product terminology.

Icongraphy

While iterating the interface for multilingual functionality, we also discovered several issues with the existing interface. One of these was the consistency of the app's iconography. Originally, because the app used React's icon library, there had never been clear guidelines. The React icon library contained icons of different styles, which affected the app's consistency. Additionally, due to the nature of the logistics industry, some uncommon actions required icons. To solve this problem, I decided to design a completely new app icon library. I established a unified grid system and drew all icons in accordance with the brand's tone and style.

Establish a unified grid system for designing icons.

Design all icons in line with the existing brand tone.

Retrospective

In the past, I might have thought that a designer's job was simply to create good products. However, this work experience has given me a lot of freedom to explore design beyond just the product itself. This has brought me back to the essence of design, which is problem-solving. I'm very grateful for the freedom and flexibility provided by the company and my supervisors, allowing me to think about problems from a broader perspective. It has also made me reconsider how, as a designer, I can contribute to the team and exert design influence.

Let's getin touch. Say hello.

Workflow and guideline for 3drens

Improve the internal work experience of the team

i18n design process

Content guidelline

Icongraphy

Retrospective

i18n design process

01.

02.

Content guidelline

Icongraphy

Retrospective

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.