Building a customized design system with rapid scalability and fast development in mind.
Design System
Product Design
2024
Landed Professional Project
My Role:
Lead Product Design
UI Design
Content / UX Copy
Tools:
Figma
Tailwind CSS
Shadcn
Miro
Timeline:
Dec 2023 - Jan 2024 (Design System only)
Overview
Background
I joined V-Max Media in December 2023 as their first in-house designer, working directly with the Product Director to design a digital platform from scratch.
The Product
V-Maxx Connect is a digital platform that bridges influencers and brands, helping influencers find monetization opportunities and brands find affiliates to market their products. As the company was preparing to attract investors, there was an urgent need for design expertise in user experience and branding.
Before designing the platform, one of my key tasks was to design and manage a new Design System.
Outcome
A Customised Design System that Made V-Max Connect
The rapid development of V-Max Connect platform relies heavily on our scalable and modular design system
Guiding Principles
Scope and Considerations
Working as a solo designer at an agency meant I had limited time to develop the Design System alongside other rapid UX tasks.
The Design System had to:
Scale fast
Be easy to develop
Be easy to maintain and reuse
Under a tight deadline, I approached this challenge strategically. I collaborated with the Product Director and Front-End engineers to establish guiding principles.
Guiding Principle 1
Rapid Scalability
I combined open-source UI libraries with my own designs for specific details to fulfill branding purposes.
Guiding Principle 2
Modularity
I favored reusable UI components and a templated approach to layouts, with a vision of rapid prototyping and development.
We decided to use certain atomic elements from the Shadcn UI library as a foundation and designed molecule components and larger layout templates.
Design Choices
Why Shadcn?
With the fast-approaching deadline, we chose Shadcn for a simple reason: our front-end developers had the most experience with it.
Additionally:
Shadcn allows developers to download the source code for individual UI components into our codebase, giving us maximum freedom to customize designs to our needs.
Shadcn UI’s components are fully accessible and adhere to Web Content Accessibility Guidelines (WCAG) standards.
The team preferred the aesthetic look and feel of Shadcn UI.
Our front-end developers are experts in Tailwind CSS.
Considering Every Situation:
I designed with real data in mind, inserting actual data and writing UX copies where possible, as I also took on the role of content designer.
Here are some use cases and scenarios I considered:
When the influencer isn’t verified, what would their avatar look like?
When the brand didn’t select any tags for their campaigns
When the product name (card title) goes over two lines
When the influencer profile isn’t fully completed
When the product campaign doesn’t offer commissions
Sample Variations of Design Components (Molecules) Tailored to Different Usecases
Laying Down Foundation
Brand and Tone
It was crucial for the platform's voice to be helpful and attractive, with a modern touch reflecting the influencer-marketing industry. From the color palette to the UX copy, I aimed for a fun, clear, and engaging tone. Purple was chosen as the main color theme to match the company’s existing color schemes.
Primary Colour Palette - Violet
The Colour Palette and Voice As Seen on Our Marketing Web Page
I explored a few approaches to navigation and sidebar options through Crazy8 sketching and best practices.
Atomic Design Approach
Guided by the Atomic Design Approach, we created the design system with atoms, molecules, and organisms, aligning with our guiding principles.
Atoms
Molecules
Organism
Results
Within three months of starting the role, I designed the digital platform in time for the MVP launch. The Design System played a key role in ensuring a successful launch and a strong foundation for future iterations:
It sped up the design and development time, especially since we use Agile, providing developers and PMs with a guide.
It provided me, and any future UX designers, with a set of reusable components and patterns for a more streamlined design process.
It established the branding foundation for the MVP version.
It offered a set of principles for making design decisions or resolving conflicts between teams.
Back to Top