Roles/Services
DESIGN System
YEAR
2020
COMPANY
Nodeflux
(Project BRIEF)
Nodeflux's principle for building product
When a company decides to expand its offerings, it means we want to introduce more products and solutions. However, there is currently no consistent design standard or cohesive approach to building these products. Without clear principles, the company will struggle to maintain or develop its products, which will impact their ability to allocate time, resources, and capabilities effectively.
As a senior designer and project initiator for a Design Language System (DLS) project, my role involves providing research, strategies, and concepts to help teams create and adopt better design solutions. Additionally, I create and maintain standards for the Design System, and I assist other designers and stakeholders in understanding the systems and dependencies to keep them well-informed and aligned.
(UX GOALS)
Design System for Nodeflux web and product
Create a standardized design system to ensure consistent implementation and collaboration between divisions for faster alignment and validation of design solutions.
(APPROACH)
Introducing Design System Group
At the start of the project, i proposed to form a Design System Group, which is a cross-functional team that includes designers, engineers, business and sales, and product team. This team collaborates to create, validate, and maintain our internal design systems for both current and future products.
We have weekly syncs with the engineers to update progress, as well as bi-weekly syncs with stakeholders to align the team's vision.
(Component Lifecycle)
From creation to delivery, goes through many stages and rounds of contention.
We experimented extensively and collaborations with the process and went through many iterations. This is the end-to-end process of our component lifecycle :
(Design Process)
Put the right tools and processes in place
Step by step how I and team creating pattern/component, some step may loop if needed.
(Outcome)
Nodeflux design system was successfully established through collaboration and processes with the design & engineering team 🎉
Foundations :
- Grid,
- Color,
- Typography,
- Iconography.
Patterns :
- Navigation,
- Page Header,
- Benefit Modal,
- Theme & Style,
- Data Visualization.
Component :
- Avatars,
- Button,
- Dropdown,
- Banners,
- Navbar,
- Table,
- Card,
- Tab,
- Toogles,
- Player,
- Tag & Badges,
- Tooltips,
- Modal,
- Checkbox,
- Pagination,
- Flag Message.
(Conclusion)
Design at Scale
Nodeflux aims to build, manage, and provide design guidance and interaction for better user experience, accelerating the process of iteration and alignment among stakeholders in creating design solutions and dev process.