TechGig 4.0: Unifying the Experience
Rebuilding a fragmented system into a cohesive, reliable design framework that empowers teams to move faster.
project overview
TechGig underwent a full platform revamp, with a major focus on overhauling its design system to create a modern visual identity and ensure consistency across the experience.
My Role
As the sole designer, I built the new design system from scratch, auditing the existing setup, defining the visual language, and creating scalable Figma components to ensure consistency across the interface.
Lacked defined variables and component variants in Figma, making it difficult to maintain consistency.
Limited color palette, missing essential shades needed for accessibility and visual hierarchy.
Typography didn’t align with modern UI standards.
Reusable components and smart variants in Figma to streamline design and ensure consistency.
Comprehensive color system using Figma variables, improving accessibility and visual clarity.
Refined typography styles and a clear typographic scale.
The Result
The TechGig 4.0 design system introduced clarity and structure to the workflow. With a well-defined set of components and tokens, the team could move faster, maintain consistency, and focus on real design challenges.
It simplified onboarding, improved collaboration with developers, and enabled scalable growth without compromising quality.
Redefining the Foundations
COLOR
The old color palette lacked a variety of shades, which limited creative flexibility for designers. Without a well-defined range of shades, it was difficult to maintain visual consistency and hierarchy throughout the platform.
A well-structured color palette was created with multiple shades for each core color, all defined and organized as Figma variables to ensure consistency and ease of use across the design system.
The color variables were structured in three sections: first defining the raw brand colors, then organizing them into semantic aliases, and finally mapping them to specific UI use cases.
The color system was built in three layers for clarity and scalability.
Brand colors like blues, greys, and reds were first defined with full shade ranges as the base palette. Next, alias tokens were created to give functional meaning, grouping colors into categories like primary, neutral, success, and alert. Finally, these aliases were mapped to specific UI roles such as text, background, and button states, allowing updates to cascade automatically across the system.
TYPOGRAPHY
As part of the design system overhaul, the typography was updated from Lato to Mona Sans to align with a modern, clean aesthetic. This change gave the platform a more contemporary and cohesive look across all screens.
This setup allowed text styles to adapt seamlessly from desktop to mobile, enabling a consistent and scalable experience without the need for manual adjustments.
Styled for Consistency
scale
In the previous design system, a scaling system was not defined, which made consistency across different components and screen sizes difficult.
👕
The new system introduced a variable-based scaling method that allowed flexible and consistent sizing of UI elements. The scale was defined using the T-shirt sizing convention, ranging from 3XS to 3XL.
components
In the previous design system, many components either didn't exist or lacked the flexibility needed to adapt to different scenarios, which led to an inconsistent and time-consuming design process.
One of the most frequently interacted-with elements, the Challenge Test Card received a modern, streamlined redesign. The time countdown, crucial for users, was given higher visual priority, making it more prominent and easier to scan at a glance.
The Listing Cards also underwent a visual refresh to better align with the updated design system. They were redesigned to be cleaner, more structured, and visually engaging, improving readability and interaction without overwhelming the user.
These are just a couple of components that received a fresh redesign. Every component underwent a similar overhaul, ensuring a cohesive and modern look across the entire system.
A major change was making use of variants properties within the components. In the previous system, components were static and lacked this functionality, which made them inflexible and inefficient for designers.
↘️
This added a significant amount of flexibility and streamlined the design process. Now, making global changes to the component styles or behaviors is much easier, saving time and improving consistency across the product.
Moving Foward
This is just the beginning. While the design system has laid a strong foundation, the TechGig revamp is an ongoing journey.
As the product evolves, the system will continue to grow and adapt alongside it, supporting new features, expanding use cases, and refining components over time.
It’s helped us start strong, bringing clarity and speed to our early efforts, but there’s still much more to build, test, and improve. The process is long, but with the right system in place, we’re set up to move forward with confidence.