Overview
Creating a design system in a startup environment is not as linear as it might be at a more mature company. In an environment that’s always evolving, it's impossible to think through all of the components being created. Nathan Curtis said that design systems should be treated like a product. Using product as a reference makes it easier to understand how to construct our own design system.
Roadmap
Applying well-established approaches and a well-defined growth path is the first thing I did. I started the design at the same time start the first mockup. So in the version 1.0. I followed the Atomic Design Principle and primarily focus on building the skeleton. And I'm currently working on the version 2.0. I'll keep updating the design system, so please stay tuned.
- Color Palette (CSOS 1.0)
- Typography (CSOS 1.0)
- Layout (CSOS 1.0)
- Navigation (CSOS 1.0)
- UI Components (CSOS 1.0)
- Interaction patterns (CSOS 2.0)
- Themes (CSOS 3.0)
Target Audience
- Designer (Myself)
- Front-end developer
- QA team
- Product managers and other teammates
A design system could make myself more efficient. This efficiency allows me to churn out screens more quickly. Plus, a cohesive design language will create a sense of consistency, familiarity and security as the team expands.
Our dev team will build these data-bound components on top of Angular. The design system should improve the speed and efficiency of development.
QA team need all interaction specs as a reference.
They are the customers of the system. I can get requirements and also manage the priority of feature development.
Deliverables
- A simple URL that everyone in the company can have access to it.
- Sketch component library;
CSOS Patterns
- Color Palette
- Application Layout
- Navigation
The pattern design is a part of our design system. The goal of our CSOS design system is to build a clear and consistent experience and improve internal efficiency. And the primary target audience is our internal dev team. The approach I took is to treat it as a product, start small but with a well-defined growth path. I followed the Atomic Design Principle, started with the component level design.
Color Palette
Color Palette reflects our brand or style at first glance. I involved the whole team and sent out a questionnaire to understand what brand values we want to convey, and we emotions should our user feels when using our app.
After gathering the results, I created different color themes and show them to the team. Everyone voted for their favorite one. We also ask them the reason and allow them to select the keywords that could represent this color theme. The color palette gave our team a clear understanding of brand value at the very beginning, which guides the decision-making process later.
Component Design
I started with some research then sit together with the dev team to figure out the scope and deliverable.
Here is an example of the Table component we built.
Application Layout
A properly layout create a predictable and consistent experience across the application. How to design a layout that flex and scale is the first challenge when I moved to the app-level pattern design. Below is a standard layout be used in the Portal.
CSOS Components Library
In the Sketch file, I generating all components to symbols so I can reuse them in the future. After building all basic assets, I moved to the document part: build principles, rules and information structure.
Navigation System
Like most of the enterprise product, CS Portal has a large content environment, we need some way to access that content easily. One solution is to implement a narrow and deep navigation pattern, which requires more clicks. Another solution is to implement the opposite style, a broad and shallow navigation pattern.
We decided to use the shallow navigation pattern because we want to ensure our user spends as little time as possible in the portal and focus on the VMware and Azure consumption.
- Lateral navigation: Lateral navigation refers to moving between screens at the same level of hierarchy.
- Forward navigation: Forward navigation refers to moving between screens at consecutive levels of hierarchy.
Documentation
As I mentioned at the beginning, the final deliverable is a simple URL that everyone in the company can have access to it. And Google Sites provides the perfect medium that easy to set up and manage contents for us.
Accessibility
Accessibility is one of the top priority in the design system. For each pattern, element and component, we tried to follow the Web Content Accessibility Guidelines (WCAG). We support keyboard navigation, different language and time zones... and more support features will be added incrementally.
An example is I used the WebAIM Color Contrast Checker tool to test on our Color theme to ensure they are accessible to low-vision user. I also used Photoshop Color Blindness tool to test how our UI looks in Protanopia, Deuteranopia, and grayscale mode.
