This is a highly customizable and scalable design system for building diverse web templates rapidly. Started from competitor analysis to problem definition, define system structure and design resources, deliver documentations, and iterate it. I was the lead designer, collaborated with 2 visual designers, 1 UX designer, 2 frontend engineers, and 1 marketing specialist.
*Due to the NDA, I can only reveal a portion of the project
Rapid web development is on high demand in the market, more business clients and investors want to launch a product within a month. Therefore, the current process of customizing and developing front-end pages from scratch is not competitive.
I did competitor research to understand the market trend and competitor’s solution, and I realized 2 things: (1) Most developers provided templates and allow clients to change theme color and rearrange modules(e.g. login, ranking list). (2) Gambling websites usually are composed of multiple modules within grid framework, which means it follows certain rules and system.
To build web products rapidly, I initally thought about building a design system; however, the design system can curb the diversity and creativity of design works. To balance the diversity and efficiency of the design, I decided to enable more customization and scalability by building a "flexible" design system.
| Design System | Flexible Design System | |
|---|---|---|
| 1 option for each component (e.g. button, pager), deliver the similar design | v.s | Multiple options for each component, deliver the diverse design |
| Fixed and unchangeable CSS style | v.s | Limited Customizable CSS style |
| Build design with limited resources | v.s | Allow exceptions for each template design |
| Redesign the whole system for update | v.s | Easily add new resources for update |
I defined the structure by (1) refering existed design libraries and open resources of front-end framework, (2) thinking about how engineers and I coded websites, (3) SASS system.
The first version of the design system was built on documentations(PDF), the next step is building the web version so designers and engineers can download resources easily.
* Only reveal portion of the content
Designers can change variables to customize the visual styling for each template, and developers can change the number in SASS files. I tried to minizine the variables that designers need to define but still change the whole look on templates. For example, instead of setting font size for each heading, designers just need to define a size for heading 1 and the rest of the sizing will change by scale.
2 options for front-end frameworks, with a different layout for pages. This can increase the diversity of template design.
Components are the group of elements, in design system, each component will have multiple options which can increase the diversity of template design.
Modules are functional blocks assembled by elements and components. Templates are composed of modules and each page is composed of the different types of modules.
I also defined two types of modules to fulfil the diversity and efficiency of template design. Organic modules are like UNIQLO clothes, they are the clothes for everyone, they are many sizes and color to choose, and can easily match other clothes; inorganic modules are like CHANEL bags, it comes with certain style, it only has 1 size and color, and it can bring a visual impact on a style.
Building templates by assembling resources from design system. Through the practice of building templates, I iterated the design system and work process.
Clients can pick templates, customize portion of the style, and preview result instantly. The preview and customization features can help both clients and Royal Image save time on communicating the request.
With Flexible Design System, the time from request to launch the product can be realized within a month.
I built a design system from scratch. As the design lead, I spend more time on defining structure and writing documentation. I think about reusability, adaptiveness, feasibility, and scalability a lot during the process. Due to the time constraint, I cannot complete the whole design system. If I can redo it again, I will choose to make an online shared design system/document, online version will be easier to access to and download, but it might be harder to maintain.
Simplify the structure and rules of the system through the feedbacks from designers and developers. Update the design resources and design style once a year based on the new technique or design trend.
