VIVOTEK Design System
Home > VIVOTEK Design System
Overview ｜ Design System ｜ Mockup ｜ Reflections
Overview
VIVOTEK is a prominent manufacturer in the network video surveillance industry which has experienced a rapid growth rate over 20 years. In order to build more cohesive products, a consistent design language is needed for the VIVOTEK Design System.
? The Design Goal
1. Define reusable & cross-platform foundations and UI elements
In order to speed up efficiency of the product team, achieving product consistency and harmony.
2. Design systems should be comprised of foundations & UI elements
Foundations: color palette, typography, iconography
UI elements: reusable components and patterns
? Challenge
There are 4 designers on UI and 2 designers on GUI in this project. The challenge was how to collaborate effectively and consistently in the product team.
? My Role
It is a team project and I am responsible for the Graphic User Interface (GUI) design with the collaboration of other designers. My contributions are detailed below:
1. Build a Design System
・Define file naming conventions
・Design UI components and patterns
・Provide icon design specifications
2. Draw over 140 icons
3. Provide design documents and design handoff
?️ Project Info
Project duration: 2 Years (2020-2021)
Total functions: 56 Functions
Product scale: 450+ Screens
Categories: UI Design, Design System, Web
Overview ｜ Design System ｜ Mockup ｜ Reflections
Design System
The framework of our design system is in reference to the common structures adopted by various prominent design systems. It is divided into 3 units: “Foundations”, “Components” and “Patterns.” In addition, an “Overview” is provided in the 1st subsection of each unit for search and use.
Overview ｜ Design System ｜ Mockup ｜ Reflections
Mockup
I usually test the variances between visual elements on Mockup and provide the final accurate visuals of the product to the product team. This assists immediate understanding between stakeholders on final products.
Overview ｜ Design System ｜ Mockup ｜ Reflections
Reflections
As an in-house designer, it’s a golden opportunity for me to build a design system. Creating the VIVOTEK Design System has been very challenging; I am delighted and honored to have been one of the key pioneer contributors of this project for 2 years. Through this project, I realized:
Collaborative works are vital when it comes to the ever-developing design systems.
Like corporations, design systems are constantly evolving. Thus, effective and consistent collaborations between the respective specialists and contributors in the product teams are needed in reducing reworks and errors.
Thanks to every member of our team for keeping everyone on the same page and working together as a unit through discussions, idea sharing and task delegations. It gives me great pride to be one of the members of this project team.
