top of page
the Common Module

Design System

QNAP System Inc.

Team

Design Kit / Sketch Library: Ching-Min Tseng

Designed for: Design Center, team of 18 (1 Design manager, 13 Designers, 4 UX Researchers)

Role in Project

UX Designer

Duration

2 Months (January-February 2022)

qnap module.png
Project Overview

I initiated and led the creation of a design kit for the design guideline at QNAP, effectively addressing design consistency issues within our team. This effort enhanced our efficiency, averaging a time savings of 6 hours per project.

In my role at QNAP, leading the design of the Common Module for QTS 5.0, I spearheaded the creation of a design kit to address design consistency challenges. This initiative revolutionized our design team's workflow, significantly enhancing efficiency by saving an average of 6 hours per project. The design kit served as a dynamic tool, encapsulating the essence of the Common Module and ensuring it remained accessible and current for every team member, thus reimagining our collaboration and maintenance of design consistency across our extensive product line.

image 7.png

The QTS Operation System

image 8.png

150+ QNAP apps

Problem Framing

The recent launch of our design guidelines revealed critical inefficiencies in maintaining consistency due to manual Sketch file updates, highlighting the need for a streamlined solution.

The rollout of the Common Module exposed a critical gap in our design process. While the SharePoint site served as a comprehensive repository for the guideline, and the online shared folder housed the Sketch files for components, this setup fell short. Designers had to navigate through cumbersome steps, manually downloading files for each project. This process became increasingly untenable with each update to the guideline and components, as there was no automatic synchronization mechanism in place. As a result, designers unknowingly worked with outdated versions, leading to a piecemeal user experience across our offerings.

Group 3.png

File management before the design kit was implemented

Design Process

The design process for the design kit was meticulously executed, starting with benchmarking leading design systems for best practices, followed by a strategic structuring to enhance usability and efficiency. Key steps included the detailed creation of components to ensure seamless integration with QNAP's standards and comprehensive educational outreach to facilitate adoption among the design team.

Benchmarking

My journey began with an exhaustive benchmarking phase, where I delved into established design systems to extract best practices that could be adapted to our context. This groundwork was crucial for envisioning a design kit that would not only meet our immediate needs but also align with industry standards for efficiency and consistency.

image 18.png

Structuring the Document

Building on the Common Module, I meticulously planned the structure of the design kit. This involved curating content that was directly relevant to our designers' daily challenges and enhancing it with additional resources like C.Frame and D. System Icons sections. These new chapters were designed to empower designers with ready-to-use templates and icons, significantly speeding up the design process.

image 14.png

Component Building

The component-building phase involved designing, testing, and categorizing each component to ensure that it was intuitive, versatile, and fully integrated with the Common Module's ethos. This phase was iterative, with continuous refinements made to align with feedback and evolving design needs.

image 15.png
image 16.png

Educational Outreach

Recognizing the critical importance of adoption, I spearheaded a comprehensive educational outreach. This included creating detailed tutorials and facilitating workshops aimed at demystifying the design kit, showcasing its capabilities, and encouraging a culture of shared maintenance and innovation.

image 17.png
Testing

Following the deployment of the design kit, a structured feedback mechanism was established. An anonymous survey conducted among the design team yielded insightful feedback from 12 designers, all of whom reported positive experiences with the design kit. Unanimously, they noted significant time savings in their projects, with reductions ranging from 4 to 10 hours and averaging at 6 hours.

Designers praised the design kit for its efficiency and user-friendly structure. One designer highlighted, "The design kit cut down a lot of my time spent on matching components with our guidelines," emphasizing the kit's impact on workflow optimization. Another noted, "The layout was clear, making it easy to pick the components I needed," reflecting on the kit's intuitive design. Additionally, the ability to "being able to fit common icons into my designs quickly." was lauded for enhancing the flexibility and applicability of designs.

 

This feedback underscores the design kit's success in streamlining the design process and aligning closely with the Common Module's standards, reaffirming its value to QNAP's design practice.

Quotes From Desingers

"The design kit cut down a lot of my time spent on matching components with our guidelines."
"The layout was clear, making it easy to pick the components I needed."
"I appreciated being able to fit common icons into my designs quickly."
"Adopting the design kit across my projects has not only saved me hours but also significantly boosted my design consistency."

Time Saved in Projects

4 to 10 Hours Reduced,
Averaging 6 Hours Per Project.
Final Outcome

The implementation of the design kit marked a transformative moment in our design workflow. Not only did it streamline the design process, saving an average of 6 hours per project, but it also elevated the consistency of our product interfaces to new heights. The kit's dynamic nature, with automatic updates and a centralized component library, ensured that every team member had instant access to the latest design resources. This breakthrough significantly contributed to QNAP's mission of delivering exceptional user experiences through harmonious design.

Thank you for reading!

More UX Projects
womanaid cover.png

Mobile App, 2022

Human-Computer Interaction, IUPUI

INFO-H541 Interaction Design Practice
Role in Project: Research & UX Design

Frame 55.png

Concept Design, Mobile App, 2022

Human-Computer Interaction, IUPUI

INFO-H541 Interaction Design Practice
Role in Project: Research & UX Design

myapp_已編輯.png

Desktop App, 2018

Mechrevo, Tongfang

Mechrevo is a gaming computer brand that aims to provide excellent playing experiences to gamers. With the built-in application, the Gaming Center, gamers can quickly acquire thorough system information, set and optimize performance.

bto

Website, 2018

Mechrevo, Tongfang

BTO is a website where you can customize your laptop, from hardware inside to what it looks at the look outside.

bottom of page