2019-2020

New York University

Torch design system

Scalable Design System for digital products at New York University

My Role: I lead the design iterations, usability testing, building design components, style, pattern, design token and creating documentation website

View the website

My approach for the project

How can we create a scalable design system that effectively addresses the pain points of current designers and developers?

Current UI inventory building & analysis

We benchmarked Design systems handbook by Invision as a guidebook to building our design system. According to the methodology from this handbook, we started to analyze our own inventory from existing products. Therefore we could see what the common factors are, and what we should refine.

Interviewing Internal designers and developers

We discussed with our designers and developers to find out more specific pain points in the product development process and in their collaborations.

Strategy setting

Based on the findings from the discovery stage, we brainstormed to set our principle which can be actively reflected in our internal designer and developer’s needs with NYU IT’s unique circumstance.

Iteration & Workshop

After goal setting, our designers and developers worked together to build the architecture of our new design system. And then, we categorized our current UI components to as patterns.

Identifying problem

Current UI inventory building & analysis

Learning from Interviews from Internal designers and developers

We discussed with our designers and developers to find out more specific pain points in the product development process and in their collaborations.

Background

“We don’t have visual consistency with our own branding”

As the product line expands, designers and developers faced the challenge of maintaining the NYU IT brand while designing each product to fit their intended services. To tackle these problems and make the solution, we started an investigation to build a sustainable internal design system.

Stategy mapping

Led design implementation roadmap

1. Keep our product styles simple & practical by minimizing the use of colors and decorative elements
‍
2. Give different flexibility level to each design system element to keep the UIs of our products consistent while also allowing to give each product a unique personality
‍
3. Make our design system on the basis of the Material Design System for more effective and robust design and development process

Iteration & Workshop

Let’s build the structure together!

After goal setting, our designers and developers worked together to build the architecture of our new design system. And then, we categorized our current UI components to as patterns.

After all these iteration processes, we finalized our Architecture of the design system. There are two sections which are branding and UI patterns. For UI patterns, we divided into two categories which are UI components and UI Modules based on the concept of the Atomic design.

Final documentation

View the full documentaion

VISUAL BASICS

For shaping the branding of products, we created the Visual basics category to guide basic visual aspects including Typography, Icons, Grid & spacing, Colors and Shadows.

UI COMPONENTS

UI components aim to provide reusable and scalable UI components across different products and screen sizes. These sections have specific component guidelines which are based on four different categories, Navigation, Notification, Selection and data input.UI components aim to provide reusable and scalable UI components across different products and screen sizes. These sections have specific component guidelines which are based on four different categories, Navigation, Notification, Selection and data input.

UI MODULES

UI module contains several UI components to present more complexed information.

Design token development

Managing and sharing information with designers and developers is crucial to make the Torch Design system sustainable as a living platform. Because of this, we built multiple channels to easily access these systems for our designers and developers through the official website, design library plug-ins for design tools and design token package (component library).

Design system website

Landing Page

Getting Started

Designer’s Guide

Developer’s Guide

EVALUATION & REFLECTION

The new design system team will keep maintain and develop this design system by actively reflecting product needs and internal team’s needs. Accordingly, this design system would become a more robust and sustainable platform

What I’ve learned?

Understanding 4 different layers gave me a huge challenge yet a great lesson learned. While ‘shipping’ is the main goal for usual products, this project was more highest on paving the road in order to set up a clear process as I was the starter of our sustainable design system. Furthermore, I learned how important aiming to shorten each development circle to highlight any issues early on not only just consumer products but also a huge content of guidelines for platform building.