| Background |

The BEAM Design System at Foxconn streamlines internal systems, cutting maintenance costs and reducing learning curves. It accelerates development, fosters team collaboration, and delivers effective solutions for user satisfaction. Ensuring consistency in product and brand presentation, it supports uniform user experiences across diverse languages, cultures, and devices globally.

My Role and Responsibilities

Myself and three other team members are the pioneering founders of our group's design system, responsible for integrating the group's internal systems. We've been involved from initial data research and system integration to designing components and releasing public resources. Due to my strong visual design skills and sensitivity to color, I have led the design system's style, including light and dark modes, high-contrast modes, shadows, and rounded corners. Additionally, I designed the brand and presentation style to align with our established design language.
‍
Furthermore, what sets our design system apart is our mascots! Each fundamental component is represented by a unique glassy geometric shape with its own personality. I designed these mascots, adding a fun atmosphere and story to the design system.

| What did I do in the BEAM Design System? |

First, we inventoried the existing system components, checking for inconsistencies in their operation and functionality across systems. After organizing the components, we compared them with established design systems and defined our design language. With the design language set, we began standardizing components and promoting the design system:

1/ Component Definition

Many components need to be standardized. Project members will research different components and develop specifications that meet the group's system standards. We reference established design systems and online resources to draft initial specifications. For example, variations in visual style and operation processes across different login pages lead to inconsistencies in user experience, increased learning costs, and greater demands on design and development resources.

How Do We Document Components?

Taking the table component I manage as an example, I first gather information on how tables are used and presented across our organization's systems. This involves identifying data requirements, size dimensions, and usage scenarios. We collect extensive data and reference other design systems for insights.

After consolidating and discussing the data, I draft initial specifications for the component, covering its composition, usage scenarios, principles, styles, types, and display methods. Below are simplified examples of illustrations due to space constraints.

Inclusive Design: Multi-Mode Interface Switching

Considering the display performance and usage habits of different screens, we offer not only a light mode but also a dark mode and a high-contrast mode to meet the needs of different users.

I researched and developed these modes, ensuring dark mode meets WCAG AA and high-contrast mode meets AAA standards. Special care was taken to maintain brand consistency, readability, and component hierarchy. After meeting these standards, I conducted interviews and usability tests to confirm the color modes meet user needs. Below is a presentation using mock information:

Due to our global workforce, multilingual settings are essential for better global service provision. When standardizing components, we also consider language-switching applications, allowing users to use the product in their preferred language. Special thanks to researcher Carly for compiling this information! For example, with the "Anchor" component that I am responsible for researching:

2/ Resource Sharing: Website and Component Library

After documenting our researched components, we will create illustrations for clarification and publish them on the design system website. I am responsible for designing this website, utilizing Microsoft SharePoint as our sharing platform to maximize the presentation of our design and brand style within the given constraints.

Upon entering the component introduction page, we present documented component details using a combination of text and graphics. This presentation method helps users quickly grasp the usage guidelines for the components. As an example, let's consider the "Button" that I am responsible for researching:

On the website, we provide links to the Figma component library and the component code provided by the development team, making it easy for our colleagues to use the standardized components.

3/ Bringing Knowledge to Life

To facilitate knowledge transfer, I proposed creating a mascot to interact with users. By linking components to everyday life and using popular internet memes, we aim to break through the echo chamber and introduce the design system to people beyond designers and engineers. I am also responsible for designing the mascot, aligning it with our design language and style to enhance brand recognition.

To enhance memorability, I established the BEAM Design System brand identity, reflecting a design language of professionalism, friendliness, and clarity. The color scheme is based on our primary colors of blue and red. The logo features a lowercase "b" to match the group's "h" form, using square and circle shapes to symbolize basic components. The logo assembles like building blocks, conveying stability, diversity, and reliability.

| Challenge |

1/ Integrated Feedback

Some numerous components and styles need to be integrated, considering the usage scenarios and habits of different systems. For example, input and select labels can be placed in three ways: inside the box, in a horizontal (side-by-side) layout, or in a vertical (top-and-bottom) layout.

After testing and interviews, we found that placing titles inside the box saves space but can lead to users forgetting previous entries when filling out numerous items, requiring additional time to backtrack. For better usability in such cases, we recommend using a horizontal layout. Typically, users who want to display more content often use smaller screens but need to read a lot of information. On small screens, a horizontal layout can effectively present information. Below is a presentation using mock information:

However, a top-bottom layout is generally recommended for its ability to accommodate multilingual needs, ensuring a comprehensive information display and a more comfortable, aesthetically pleasing user experience.

2/ Continuous Experimentation and Testing

Readability testing is a crucial method we use. For example, in defining specifications for light, dark, and high-contrast color modes, I create various color combinations and test them on colleagues' work computers. This helps us determine if the content remains clear across different screens and display modes.

In dark mode, originally, users didn't perceive the disabled input box color as unusable because it closely resembled the default state, leading them to think it could be filled. After more discussions and tests, we adopted the version on the right. Users found the lighter color immediately distinguished these input boxes from others, aided by the cursor change on hover to indicate non-editability.

3/ Resistance to Change

During the rollout of the design system, we faced resistance from other departments who questioned its necessity, citing satisfaction with existing methods. There was also reluctance to learn new tools and processes due to concerns about workload and learning curves. To overcome these challenges, we held multiple meetings to demonstrate the system's benefits in enhancing efficiency and consistency. We also promoted related articles on platforms like Teams and internal apps, alongside offering targeted training and support to facilitate colleagues' adoption of the new system.

Thanks to Xianglin, Lisa, and Carly for planning the online course content, and to Lifen for organizing relevant articles. I prepared the presentations. Additionally, we provide a design checklist to help colleagues from other departments use the component library and ensure interface consistency.

After extensive communication and discussions, we garnered support from numerous managers and departments, resulting in increased adoption of our design system across various departments. For example, in the assessment system, it aids recruiters in objectively evaluating candidate skills to ensure selecting the best fit for job requirements and company culture. Integrating the design system into assessments has boosted candidate satisfaction with system operations and interfaces, enabling faster development of interfaces and components by the development team, leading to timely project deliveries.

4/ Project Time Allocation

Implementing the design system required significant time and resource investment, impacting manpower and project timelines. To manage this, we established weekly and monthly plans, ensuring clear assignment goals and adherence to discussed timelines for each component and project.

We track weekly and monthly component progress using Excel spreadsheets. Additionally, we pre-plan monthly graphics and posting schedules, noting special holidays to prepare relevant memes and posts.

5/ Collaboration with Engineering Team

To ensure the design system can be effectively applied, we work closely with engineers to materialize the components and ensure their operability at every stage of development. Our collaboration with engineers includes the following aspects:

• Sharing Project Links

  We will describe the different states and usage scenarios of each component in the component library and on the design system website. The engineering team can use this information to understand the usage logic of the components.

• Progress Tracking

  We will create a component progress chart to prioritize the development of components. Regular meetings will be scheduled with the engineering team to discuss the progress and challenges related to component creation.

• Quality Assurance

  Once a component is released by the engineering team, we will inspect it to ensure its style, usability, and responsiveness meet our established standards. Any adjustments needed will be noted in the design documents and Excel files.

• Component Release from the Engineering Team

  After the components are confirmed, we will update the website information accordingly so that users can access the latest versions immediately.

We use Excel to track component progress and provide real-time updates to the engineering team (left image). Capture screenshots of components that need adjustments, organize them in Figma for the engineering team, clearly mark the date and required changes, and use the Excel sheet for verification (right image). For example, with "colors," engineers can use Figma comments or Teams to ask questions, and I will respond since I defined the guidelines. Any color adjustments will be promptly communicated.

Following the completion of the design draft and file delivery to the development team, we assist in Quality Checks (QC) to ensure adherence to design standards in style, workflow, and consistency.

| Takeaway |

Accumulated experience becomes nourishment!

Participating in the entire process of designing the system has been incredibly beneficial, enhancing both my design skills and understanding of design principles. Besides significantly improving interface production speed, the process allowed me to accumulate extensive experience and data on each component's intricacies.

However, it also prompted reflection on maintaining a balance between creativity and adherence to rules. Viewing the design system as a guide rather than a constraint has been crucial. Moreover, I've become more attuned to the inclusivity of components and products, ensuring adaptability for various scenarios and excellent user experiences.

Overall, this experience has been enriching, and I'm committed to continuous improvement in my design practices, eager to apply these insights in future projects.