Design System

DOCUMENTATION: A CROSS-TEAM TOOLKIT

EXPLORATION

Design System · UX Designer · 4 months

The design system is a project in constant evolution. Our team engages in iterative processes, conducts weekly meetings for in-depth reviews and refinements. We are still working to improve and expand the design system, and to increase its adoption and contribution within our organization. Our future steps include: • Updating and refining the design system based on the feedback and insights from the users and other teams and stakeholders. • Creating more components and patterns that can cover various use cases and scenarios, and that can be customized and adapted to different contexts and needs. • Promoting and advocating for the design system within our organization, by organizing more workshops, training sessions, and showcases, and by creating a community of practice and support around the design system.

OVERVIEW

To convert compoents into a shared resource accessible to all team members. I found Storybook and ZeroHeight that help us communicate the design system to the wider product organization.

• Design Systems Evolve: Weekly reviews, user feedback, and regular audits ensure the design system evolves alongside our products. • Early Stakeholder Buy-In: Securing buy-in early streamlines implementation and demonstrates the system's value. • Embrace Growth: We'll expand our component library to address diverse use cases, adapting the system while maintaining core consistency. • Fostering a Design System Community: Workshops, training, and open communication will foster a supportive design system community, promoting adoption.

THE FUTURE

https://drive.google.com/file/d/1qT5iPlqUm9GWFckf2ozJTSKALUELD834/view?usp=sharing

RESUME

https://www.linkedin.com/in/liuchenxi/

mailto:thatchenxi@gmail.com

Home

CHENXI 宸汐アカツキ

Refined typography guidelines, covering typefaces, sizes, weights, line heights, and spacing for various text elements. Examples are provided for all use cases to ensure consistency and enhance readability across all platforms.

PROJECT GOALS

A fresh Figma file organization.

LESSONS LEARNED & FUTURE VISION

Design System User View

Documentation of button placement with supporting graphics.

• Product Consistency: Establish a cohesive visual language across all NielsenIQ products. • Efficiency: Reduce design and development time by providing reusable components and patterns. • Accessibility: Improve accessibility compliance with WCAG 2.1 AA standards. • Collaboration: A design system for everyone on the team, foster a collaborative design culture.

Using Storybook, I worked with dev team, transformed designs into production-ready components. Maintaining consistency in naming conventions, controls, and properties between Figma and Storybook ensures a seamless alignment of components.

ACCESSIBILITY

I focused on building a robust foundation for interactive components. I prioritized responsiveness and maintainability, leveraging Figma's powerful features: • Responsiveness with Auto-Layout. • Efficient variation with Variants.

We use ZeroHeight as our design system’s central reference. It houses extensive documentation for each component, including descriptions, states, sizes, naming conventions, placements, and usage guidelines.

Design System Creator View

• NIQ Launch Tracker

NIQ Launch Tracker

for desktop viewing.

NIQ Forecasting

• NIQ Forecasting

NIQ Forecasting

more NIQ case studies...

• NIQ Forecasting

NIQ Forecasting

more NIQ case studies...

welcome :) this site is optimized

• NIQ Launch Tracker

FabuLingua Teacher Dashboard

NielsenIQ Design System

We tokenized key design properties (colors, typography, spacing, etc.) to ensure consistency and simplify maintenance.

In Figma, I transformed these components into interactive elements, establishing them as the robust foundation of our high-fidelity prototypes.

The limitations of NIQ previous design system became a bottleneck, impacting both design and development. The shift to Figma provided the perfect catalyst to reimagine our system. I worked closely with 2 designers and 5 developers to migrate components, establish guidelines, and build a comprehensive, reusable component library. This collaborative overhaul ensures consistency and efficiency across our products.

thatchenxi@gmail.com

Want a deeper dive on how I approached this project?

Portfolio presentations are available upon request, drop me a line and I can guide you through how I work.

Want a deeper dive on how I approached this project?

thatchenxi@gmail.com

Want a deeper dive on how I approached this project?

Portfolio presentations are available upon request, drop me a line and I can guide you through how I work.

COMPONENTS: THE CORNERSTONE OF USABILITY

I prioritized the foundational UI components of our design system, such as color palettes, fonts, grids, spacing, buttons, icons, and more, before we tackled more complex elements like patterns and animations. Here’s what I did: • Researched other design systems. • Conducted an inventory audit. • Consolidated different component variations. • Conducted component-focused testings.

The auditing and iteration of the design system for accessibility was one of my major projects within the design system. I carefully reviewed every component, pattern, and paradigm of the design system. These are accessibility issues I addressed: • Clear headings and hierarchy • Color contrast for text is 4.5:1 at the least • Color contrast for adjacent colors of 3:1 • Clear link styles • Keyboard navigation

Easel

7 Easel: Where Art Meets AI & AR

text

7 Easel: Where Art Meets AI & AR

text

6 Content Moderation Stimulator

text

7 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

7 Easel: Where Art Meets AI & AR

text

7 Easel: Where Art Meets AI & AR

text

7 Easel: Where Art Meets AI & AR

text

7 Easel: Where Art Meets AI & AR

text

7 Easel: Where Art Meets AI & AR

text

FabuLingua Teacher Dashboard

8 A Pangolin Tale

text

1 NIQ Forecasting

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

1 NIQ Design System

text

1 FabuLingua Teacher Dashboard

text

1 NIQ Launch Tracker

text

1 FabuLingua Teacher Dashboard

text

7 Cool School: Where Peace Rules

text

Contentr

8 A Pangolin Tale

text

1 NIQ Forecasting

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

1 NIQ Design System

text

6 Content Moderation Simulator

text

1 NIQ Launch Tracker

text

6 Content Moderation Simulator

text

7 Cool School: Where Peace Rules

text

https://www.youtube.com/watch?v=i2KGj5BaMso&t=1s

8 A Pangolin Tale

text

8 A Pangolin Tale

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

8 A Pangolin Tale

text

8 A Pangolin Tale

text

8 A Pangolin Tale

text

8 A Pangolin Tale

text

7 Cool School: Where Peace Rules

text

Launch Tracker

text

NIQ

text

Home

CHENXI 宸汐アカツキ

NIQ Design System

8 A Pangolin Tale

text

2 NielsenIQ Design System

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

2 NielsenIQ Design System

text

2 NielsenIQ Design System

text

2 NielsenIQ Design System

text

2 NielsenIQ Design System

text

7 Cool School: Where Peace Rules

text

Design System

text

NIQ

text

Side Projects

text

8 A Pangolin Tale

text

10 Anti-Fraud Club Mobile App (WIP)

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

10 Anti-Fraud Club Mobile App (WIP)

text

10 Anti-Fraud Club Mobile App (WIP)

text

10 Anti-Fraud Club Mobile App (WIP)

text

10 Anti-Fraud Club Mobile App (WIP)

text

7 Cool School: Where Peace Rules

text

FabuLingua

8 A Pangolin Tale

text

5 FabuLingua Mobile App

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

5 FabuLingua Mobile App

text

5 FabuLingua Mobile App

text

5 FabuLingua Mobile App

text

5 FabuLingua Mobile App

text

7 Cool School: Where Peace Rules

text

About Me

https://youtu.be/hR0cKq_cb0E?si=dYhPiub62s-GMdXX

8 A Pangolin Tale

text

9 Cool School: Where Peace Rules

text

6 Content Moderation Stimulator

text

9 Cool School: Where Peace Rules

text

5 FabuLingua Mobile App

text

9 Cool School: Where Peace Rules

text

9 Cool School: Where Peace Rules

text

9 Cool School: Where Peace Rules

text

9 Cool School: Where Peace Rules

text

9 Cool School: Where Peace Rules

text

Design System

text

NIQ

text

About Me

Home

CHENXI 宸汐アカツキ

NIQ Forecasting

8 A Pangolin Tale

text

4 NielsenIQ Forecasting

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

4 NielsenIQ Forecasting

text

4 NielsenIQ Forecasting

text

4 NielsenIQ Forecasting

text

4 NielsenIQ Forecasting

text

7 Cool School: Where Peace Rules

text

Selected Projects

Launch Tracker

text

NIQ

text

NIQ Launch Tracker

8 A Pangolin Tale

text

3 NielsenIQ Lauch Tracker

text

6 Content Moderation Stimulator

text

9 Easel: Where Art Meets AI & AR

text

5 FabuLingua Mobile App

text

3 NielsenIQ Lauch Tracker

text

3 NielsenIQ Lauch Tracker

text

3 NielsenIQ Lauch Tracker

text

3 NielsenIQ Lauch Tracker

text

7 Cool School: Where Peace Rules

text