01 · AI Research
AI Research Agents
An AI-powered research workspace that helps teams automate research workflows and generate insights faster.
Read case study
AI Research Agents
Senior Product Designer · Entropik Tech · Chennai
Senior Product
Designer.
Five years turning complex B2B and AI workflows into products people can actually use — research tooling, mobility, distribution and the systems underneath them.
01Selected Work
Four products,
four different problems.
Research tooling, mobility, distribution and the system that holds them together. Each one is a full case study — the problem, the research, the decisions and what shipped.
02 · Mobility
Improving Uber’s Airport Booking
UX improvements to Uber’s airport booking flow for a clearer, more confident and stress-free booking experience.
Read case study
Uber Airport
03 · B2B SaaS
Zeen
An end-to-end FMCG distributor platform that streamlines inventory, orders, billing and sales, with AI-powered insights on top.
Read case study
Zeen
04 · Design Systems
Design System
A scalable system of reusable components, tokens and guidelines — built for consistency, accessibility and faster product development.
Read case study
Design System
02About
Problem solver.
AI enthusiast.
AS
Designer IDPortfolio · 2026
Abdul Shaheedh
Senior Product Designer
IDAS-0001
FocusB2B · AI
Since2021
ENTROPIK · CHENNAI
Hi! I’m Abdul Shaheedh, a Senior Product Designer with 5+ years of experience designing intuitive digital products for enterprise and B2B SaaS platforms. I enjoy simplifying complex workflows into experiences that are easy to understand, efficient to use, and enjoyable for users.
Currently at Entropik Technologies, I work closely with product managers, engineers, and researchers to design AI-powered research products used by global businesses. My work spans user research, interaction design, design systems, prototyping, and usability testing.
Read the full storyDrag the badge — it swings
03Career
Where the years went.
2025
Senior Product Designer
Entropik Tech · present
2022
UI/UX Designer
Entropik Tech · 2022–2025
2021
UI/UX Design Intern
Entropik Tech · 2021–2022
Design Philosophy
I believe great design is about more than beautiful interfaces - it’s about solving the right problems, understanding user needs, and creating measurable business impact.
04Toolkit
The craft, element by element.
Everything I design with, grouped by what it is for. Pick a discipline to see only that set.
PdProduct DesignCraft
UxUser ExperienceCraft
IdInteraction DesignCraft
AiAI Experience DesignCraft
PrPrototypingCraft
WfWireframingCraft
BbB2B SaaSCraft
UrUser ResearchResearch
UtUsability TestingResearch
DcDecodeResearchDsDesign SystemSystems
NtNotionSystems
FgFigmaTools
FrFramerTools
LvLovableTools
ClClaude DesignTools
IlIllustrationTools
AeAfter EffectsMotion
JtJitter MotionMotion
PpPremiere ProMotion
HtHTMLCode
CsCSSCode// let's talk
Have a product problem worth solving?Let's build it together.
I'm always open to conversations about product design, AI-powered experiences and B2B SaaS. Currently designing AI research products at Entropik Technologies.
Designed with intent, built for clarity - every screen here started with a real user problem, not a layout.
Senior Product Designer
Problem solver.
AI enthusiast.
Hi! I’m Abdul Shaheedh — a Senior Product Designer with 5+ years of experience designing intuitive digital products for enterprise and B2B SaaS platforms.
AS
Designer IDPortfolio · 2026
Abdul Shaheedh
Senior Product Designer
IDAS-0001
FocusB2B · AI
Since2021
ENTROPIK · CHENNAI
Hi! I’m Abdul Shaheedh, a Senior Product Designer with 5+ years of experience designing intuitive digital products for enterprise and B2B SaaS platforms. I enjoy simplifying complex workflows into experiences that are easy to understand, efficient to use, and enjoyable for users.
Currently at Entropik Technologies, I work closely with product managers, engineers, and researchers to design AI-powered research products used by global businesses. My work spans user research, interaction design, design systems, prototyping, and usability testing.
I believe great design is about more than beautiful interfaces - it’s about solving the right problems, understanding user needs, and creating measurable business impact.
Outside of work, I enjoy exploring emerging AI tools, experimenting with new design workflows, and continuously learning to build better digital experiences.
Drag the badge — it swings
01Toolkit
The craft, element by element.
PdProduct DesignCraft
UxUser ExperienceCraft
IdInteraction DesignCraft
AiAI Experience DesignCraft
PrPrototypingCraft
WfWireframingCraft
BbB2B SaaSCraft
UrUser ResearchResearch
UtUsability TestingResearch
DcDecodeResearchDsDesign SystemSystems
NtNotionSystemsFgFigmaToolsFrFramerToolsLvLovableToolsClClaude DesignToolsIlIllustrationToolsAeAfter EffectsMotionJtJitter MotionMotionPpPremiere ProMotionHtHTMLCodeCsCSSCode02Career
Where the years went.
2025
Senior Product Designer
Entropik Tech · present
2022
UI/UX Designer
Entropik Tech · 2022–2025
2021
UI/UX Design Intern
Entropik Tech · 2021–2022
// let's talk
Want to see how I think?Start with the work.
Four products, four different problems - research tooling, mobility, distribution and systems.
AI Research Agents
AI Agents for Research Study Creation
A conversational system that lets researchers describe a study goal in plain language and get back a structured, ready-to-publish study - designed around a gallery of specialists, each of which runs one research method well.
The Problem
Creating Research Studies was Slow and Complex
Before AI Agents, setting up a research study required deep platform knowledge and significant manual effort. The process was powerful but demanding - creating a steep barrier for new users and slowing down even experienced researchers.
Too Many Decisions Upfront
Users had to manually choose research methods, configure every block, set question logic, and wire it all together before seeing any value from the platform.
Required Research Expertise
The platform's power was locked behind methodology knowledge. Non-expert users configured studies incorrectly or abandoned the process mid-way.
Slow Time-To-Field
What should have taken minutes stretched into hours. Teams were losing speed - especially critical for time-sensitive ad campaigns and concept validation.
No Intelligent Guidance
The platform had no way to understand a user's goal and suggest the right mix of methods, audience, or question blocks - every decision was entirely manual.
Research
Understanding the problem before designing the solution
Before designing, I conducted user research, analysed behavioural data, and reviewed AI-assisted workflows to understand user pain points and validate the solution direction.
01
User Interviews & Internal Sessions
Ran structured sessions with researchers, marketers, and CS teams who heard user pain daily. Goal: understand where users got stuck and what "easy" actually looked like to them.
User interviewsThink-aloud sessionsInternal workshopsOpen-ended questions
02
Behavioural & Drop-off Analysis
Analysed usage data and session recordings to find exactly where users were abandoning the creation flow - giving hard signal on friction, not just self-reported feedback.
Funnel drop-off analysisSession recordingError & abandon patternsFeature usage data
03
Competitive Analysis & Workshops
Studied AI-assisted creation flows in adjacent tools and ran whiteboard workshops to align on the right interaction model before committing to a direction.
Competitor benchmarkingAI UX pattern reviewHMW exercises
Key Findings
What the research revealed
01
Users knew their goal - not their method
Everyone came in with a clear business question but no idea which research method to use. The platform spoke in methodology; users spoke in outcomes.
02
Drop-off peaked at block selection
Behavioural data showed the highest abandonment at the point where users had to choose and configure their first block. Too many options, too little context.
03
Biometrics were underused because they were opaque
Eye tracking and facial coding were rarely configured correctly. Users didn't know when to use them or what they'd measure - powerful features going undiscovered.
04
Experts wanted speed, not hand-holding
Experienced researchers didn't want a wizard - they wanted the platform to understand their intent and move fast. The solution needed to serve both audiences.
05
Conversational patterns tested best
Competitive analysis showed prompt-first, clarify-second interaction models had significantly better task completion than form-first approaches. This validated the direction early.
06
Audience setup was a consistent afterthought
Users left audience configuration to last and often got it wrong - wrong panel size, skipped filters, unfamiliar terminology. It needed to be embedded, not bolted on at the end.
Design Challenges
Challenges & Trade-offs
Designing AI Agents required balancing automation with researcher trust, simplifying complex workflows without sacrificing flexibility, and maintaining research quality throughout the experience.
01 · Balance AI automation with researcher control
Users needed AI assistance without losing the ability to review and edit studies.
02 · Support both beginners and experts
The experience had to be simple for new users while remaining efficient for experienced researchers.
03 · Reduce complexity without hiding capability
Advanced research methods and biometric technologies needed to feel effortless without limiting functionality.
04 · Build trust in AI-generated studies
Researchers needed visibility into AI-generated decisions before publishing a study.
Who We Designed For
Three distinct users, one shared frustration
In-house product teams
The UX Researcher
"I know exactly what I want to test - I just need to set it up without spending half a day configuring blocks."
- Fast study creation for iterative testing cycles
- Prototype and usability blocks, pre-configured
- Eye tracking auto-applied to interaction tasks
CPG & enterprise brands
Consumer Insights Lead
"I manage multiple studies a week - I can't afford to hand-hold the platform every time I start a new one."
- Hybrid quant + qual flows from a plain brief
- Audience Cloud pre-filled with the right criteria
- Emotion and sentiment measurement without manual setup
Brand & Campaign teams
The Marketing Researcher
"I don't always know the right research method - I just know I need to test this ad before it goes live next week."
- Goal-first entry - describe the campaign, not the method
- Creative A/B testing with attention tracking auto-applied
- Study live within the same day
The Solution
A research team, not an assistant
The system is a gallery, not a chatbot. Specialists are grouped by method family - Consumer, User, Creative, Foundation, Platform - and inside each family every specialist runs one method well. A researcher picks the one that matches their question and it handles the design, the participants and the analysis for that method.
That is the premise, with one deliberate exception. The gallery opens on a general-purpose Master UX Agent - the entry point for a problem that spans methods, or one not yet clear enough to name a method for. It clarifies first, then picks and combines. Everything behind it is a counterpart that already knows the craft being asked about, and that says up front what it needs from you and what you get back.
Why one method per specialist
A single agent that claims every method has to be described in generalities. Splitting it means each card can promise something concrete - and be judged on it.
Architecture
How the pieces sit together
The researcher stays on top of the system, not inside it. Everything below answers to them.
Routing
One brief, two routes
A researcher shouldn't have to know whether their question is one method or several. They describe the decision they're facing and the system reads the brief, then routes one of two ways.
When the brief resolves to a single method it names the specialist and says why. When it needs more than one, it proposes a combined agent instead - and either way the researcher can override the choice.
How It Works
Six Steps From Prompt To Published
STEP 01 · PROMPT INPUT
Describe your goal in plain language
Users land on a clean, agent-focused screen with a single prompt input. They describe what they want to study - attaching images, ads, or creative assets as context. Suggested prompts eliminate blank-page friction.
STEP 02 · CLARIFYING QUESTIONS
The agent asks only what it needs
The AI asks only the essential questions needed to design the study. Responses are collected through quick-select options, reducing effort while ensuring the methodology matches the research goal.
STEP 03 · STUDY PLAN REVIEW
A structured plan before generation
Before generating the study, users review the AI-generated plan and make changes if needed. Objective, audience, markets, methodology and key outputs are laid out as a table - editable before confirmation.
STEP 04 · GENERATION
AI builds the study in real time
The study generates while the conversation stays visible, so users can see what is being created. The empty state carries the next instruction rather than a spinner alone.
STEP 05 · CANVAS EDITOR
A fully structured study, ready to edit
The generated study is fully editable. Researchers can modify questions, logic, AI settings, and biometric technologies before publishing - and the canvas opens with its own quality read: recommended sample, length, fatigue risk, methodology fit and objective coverage.
STEP 06 · AUDIENCE & PUBLISH
Recruit & go live in one step
AI pre-fills recruitment criteria based on earlier responses, so studies launch in a few clicks. Fielding, results and the written report all sit on the same set of stages the study was built in.
Transition Sentence
While the AI simplified study creation through conversation, another key challenge was making advanced research technologies work automatically without requiring users to understand when or how to configure them.
Intelligence Layer
Three Technologies, Auto-Assigned
AI automatically selects and applies the appropriate biometric technology based on the research objective - without requiring researchers to configure it manually.
01
Eye Tracking
Automatically measures participant attention during visual tasks.
02
Facial Coding
Detects emotional reactions during videos and interviews.
03
Voice Tonality
Analyzes speech patterns to identify confidence, hesitation, and sentiment.
Visible, not hidden
The technology is assigned for the researcher, but it is still named on the block it applies to. Automatic never meant invisible - it meant they didn't have to decide it themselves.
Outcomes
What the agents made possible
By replacing manual study configuration with a guided, conversational AI flow, the feature dramatically lowered the barrier to research and gave teams back hours of setup time every week.
80%
Reduction in study setup time for experienced users
5
Method families in the gallery, each holding its own specialists
3
Biometric technologies automatically configured per study
50M+
Verified global respondents accessible via Audience Cloud
My Role
What I designed and what I learned
Designing agents as people, not features
Designed AI agents with distinct roles, communication styles, and expertise to feel like research collaborators rather than form-filling assistants.
One method per specialist
Split a general-purpose agent into a gallery of specialists grouped by method family, so every card could promise something specific and be judged on it.
Balancing automation with researcher trust
Added a review step before AI-generated studies, giving researchers visibility and control while maintaining confidence in the workflow.
Making biometric tech invisible but valuable
Automatically assigned facial coding, eye tracking, and voice analysis to reduce setup effort while keeping advanced capabilities easy to understand.
The split-canvas interaction model
Introduced a chat-and-canvas layout, allowing researchers to refine studies through conversation while keeping the study plan visible and editable.
Designer
Abdul Shaheedh
RoleSenior Product Designer
ScopeEnd-to-end
CompanyEntropik
ToolFigma
FocusAI UX & Conversational UI
Year2026
Improving Airport Booking Experience in Uber
Improving Airport Booking Experience in Uber
UI/UX Designer | Product Designer
Overview
Project Overview
This case study focuses on improving Uber's airport booking experience to reduce booking drop-offs caused by pricing confusion, pickup complexity, and airport-specific challenges. The solution introduces an airport-optimized booking flow within Uber's existing app experience.
The Problem
Problem Statement
Uber has observed a significant decline in ride bookings at airports compared to other locations. Users often abandon bookings due to unexpected surge pricing, confusion around designated pickup zones, complex airport layouts, and anxiety about finding drivers in time-sensitive travel situations.
Objective
The objective is to reduce airport booking drop-offs by simplifying the booking experience, improving pricing transparency, and providing clear pickup guidance tailored to airport environments.
Research
Research & Insights
Airport environments introduce unique challenges such as restricted pickup zones, dynamic pricing, and complex terminal layouts. Based on assumed research from user behavior, support feedback, and funnel analysis.
Surge pricing causes hesitation and distrust
Users struggle to identify correct pickup locations
Fear of missing the driver increases anxiety
Time pressure amplifies decision fatigue
Key Insights
Users are not dropping off because they don't need a ride; they drop off because airports create uncertainty around pricing and pickup clarity.
The Solution
Solution
Airport Ride is a contextual booking mode within Uber that activates an airport-optimized experience. It provides transparent fare explanations, visual pickup guidance, and step-by-step navigation to reduce confusion and increase user confidence.
"Airport Ride" CTA
So I introduced Airport Ride feature which is placed in booking page. The Airport Ride CTA acts as a clear and optional entry point for users who face difficulty booking rides at airports. It allows users to opt into a guided experience without disrupting Uber's existing booking flow.
Flow
User Flow
Eight stops from arriving at the terminal to a confirmed ride.
User opens the Uber app at Airport
Uber App - Home page
Airport ride - CTA
User views fare breakdown while booking ride
User can choose the pickup points inside airport
Uber shows the landmark while choosing pickups
Guided navigation to pickup point with each landmarks
Ride confirmed
Explore
Low-Fidelity Wireframes
Structure first - where the Airport Ride entry point sits, and how fare, zone and navigation stack inside the existing flow.
Design
High-Fidelity Wireframes
Guided Navigation Screen
Design Rationale
Features Breakdown
STEP 01
Airport Ride Entry Screen
Introduces the Airport Ride CTA as a contextual entry point for users at airports. This screen clearly communicates that a guided, airport-specific booking experience is available to simplify pricing, pickup, and navigation.
STEP 02
Airport Fare Breakdown Screen
Provides a transparent breakdown of the total fare, including trip fare, airport surcharge, and booking fee. This helps reduce price shock and builds trust by explaining why airport fares are higher.
STEP 03
Pickup Zone Selection Screen
Displays terminal-based pickup zones with visual cues, distance, and landmarks. This reduces confusion and helps users confidently choose the correct pickup location.
STEP 04
Guided Navigation Screen
Offers step-by-step walking directions to the selected pickup point, ensuring users reach the correct location and reducing pickup-related cancellations.
Validation
Insights
The proposed designs were evaluated using a Decode survey with eye-tracking and facial emotion analysis to capture user attention and emotional responses.
100%
positive ratings and interest in the Airport Ride feature
66.67%
rated the experience 5 out of 5 on the survey scale
0
significant negative emotions detected during the booking flow
- Users showed strong positive emotional responses across all tested screens
- No significant negative emotions were detected during the airport booking flow
- Eye-tracking revealed clear visual focus on primary CTAs and pickup guidance
- Users easily understood where to go and what to do next
- Transparent fare breakdown reduced hesitation and emotional spikes
Emotional Impact
- Reduced stress and anxiety during airport bookings
- Increased confidence and reassurance
- Improved trust in pricing and pickup clarity
Business Impact (Expected)
- Reduced airport booking drop-offs
- Fewer pickup-related cancellations
- Higher ride completion at airports
Emotion Metrics - Survey Results
How users rated the Airport Ride experience
Share of respondents at each point on the 5-point scale (n = 3)
Scale rating
Would you use the Airport Ride feature?
Stated interest in the feature after seeing the flow (n = 3)
Share of respondents
Validation Outcome
100% positive ratings and interest in the Airport Ride feature, with emotional and attention insights confirming the effectiveness of the design decisions.
Wrap-up
Final Summary
Airport Ride simplifies Uber's airport booking experience by combining transparent pricing, clear pickup guidance, and contextual navigation within Uber's existing design system.
Because it sits behind an optional CTA rather than replacing the default flow, it addresses the three things that push travellers to abandon a booking - price uncertainty, pickup confusion, and the fear of not finding the driver - without asking anyone to relearn the app they already use.
Zeen - FMCG Distributor Management Platform
Zeen
Managing products, billing, deliveries, credits and insights in one smart system.
Overview
Project Overview
The objective of ZEEN is to streamline distributor operations and improve decision-making with automated workflows and clear, real-time business insights.
About ZEEN
ZEEN is a digital platform built to simplify and automate FMCG distribution operations. It helps distributors manage daily tasks faster - from pricing to payments - with improved business visibility and profitability.
The Problem
Problem Statement
FMCG distributors currently rely on multiple disconnected tools or manual processes to manage products, billing, deliveries, and payments. This leads to poor visibility, delayed decisions, errors in pricing, and missed growth opportunities.
Errors in billing and pricing
Delayed payments from poor credit tracking
No visibility on top-selling products or store performance
Delivery status tracked over calls and WhatsApp, not centralised
No proper insights to support business decisions
Existing tools lack proper UX and UI - hard to understand and not user-friendly
On top of that, the tools already on the market are difficult for new staff to learn and operate, so every hire slows the business down before it speeds it up.
Research
User Research & Constraints
Insights were gathered by understanding existing distributor workflows, identifying key pain points, and analysing competitor products to uncover gaps and constraints in current solutions.
How distributors currently work
- Paper/Excel-driven billing
- Credit details tracked in notebooks
- Delivery updates through phone calls
- No access to meaningful analytics
User pain points
- Time-consuming manual billing
- No reminder for credit payments
- Schemes & pricing confusion
- Stock & expiry visibility issues
Competitor Analysis
| Platform | Strengths | Weakness |
|---|---|---|
| Vyapar | Easy billing | No deep analytics |
| Zoho Inventory | Accounting | Complex UI |
| Bizom | Field app | Expensive & overkill |
What the landscape showed
Every existing tool solved one slice of the workflow well - and left the distributor stitching the rest together by hand.
Who it's for
Target Audience
Primary Audience
FMCG distributors who manage products, pricing, billing, deliveries, and credit across multiple retail and wholesale stores on a daily basis.
Secondary Audience
Sales and delivery staff who depend on accurate order details, pricing, and delivery status to complete field operations efficiently.
Insights
Research Insights
Every pain point mapped to a concrete product need - this table became the brief.
| Pain point | User need |
|---|---|
| Manual billing | Faster & error-free billing |
| Credit tracking | Automated due reminders |
| Scheme confusion | Auto calculation |
| Low visibility of performance | Insights & analytics |
| Delivery tracking | Status updates in one place |
Goal
Goal of the Project
Reduce billing time
Automate pricing & schemes
Improve delivery & credit visibility
Enable faster collection & business insights
Support field-friendly mobile workflow
The Solution
Why Zeen?
ZEEN simplifies distribution operations by connecting six surfaces that used to live in separate tools - or in nobody's tool at all.
Products Management
Store Management
Deliveries & Credits
Bills & Invoices
Insights & Analytics
AI Support
Structure
Information Architecture
One dashboard, seven working surfaces, and the global tools reachable from anywhere.
Login→
Dashboard
Zeen AI
Notification
Profile
Settings
Search
Product Management
- Product List
- Add Product
- Product Availabilities
Bills & Invoices
- Bill Details
- Create New Bill
Deliveries & Credits
- Switch Delivery or Credit
- Delivery Detail
- Credit Details
- Pending Delivery
- Dues
Store Management
- Add New Store
- Store Details
- Store Overviews
Pricing Management
- Set Pricing System
- Schemes Attachment
Insights & Analytics
- Overall AI Insights
- AI Metrics
- All Managements Insights
- Dues
- Graphs
- Export Report
Reports Overview
- Overall Insight and Reports
Zeen AI
- Reachable from every surface
Product
Product Features Overview
Six features carry the whole operation. Each one removes a manual step that used to sit between a distributor and getting paid.
FEATURE 01
Product & Pricing Management
Easily manage brand-wise products, MRP, distributor pricing, margin and schemes in one place. Wholesale and retail prices sit side by side, so the right number is never a calculation.
FEATURE 02
Store Segmentation (Retail / Wholesale)
Organise stores by type to apply the right pricing, credit terms, and workflows. Each store carries its own outstanding balance and last-billed date, so exposure is visible before the next order goes out.
FEATURE 03
Smart Billing with Auto Margin & Scheme
Generate bills quickly with automatic price, margin, and scheme calculations to avoid errors. Choosing the store sets the price band; adding a product pulls its scheme and live stock without a second lookup.
FEATURE 04
Delivery Status Tracking
Track every bill with clear delivery statuses - delivered, on going, pending or cancelled. Status changes inline from the row itself, which is what replaced the phone calls and WhatsApp messages.
FEATURE 05
Credit & Payment Reminders
Monitor credit-based sales, due dates, and payment collections to improve cash flow. Pending amount sits next to the bill total, and part-payments are logged against the bill instead of a notebook.
FEATURE 06
Insights & Analytics for Growth
Clear insight on top products, top stores, sales trends, delivery performance and payment performance to drive smarter decisions - the visibility that distributors said they had no access to at all.
Intelligence
Zeen AI
ZEEN AI helps distributors make smarter decisions by analysing sales, delivery, and payment data to surface actionable insights and predictions.
What ZEEN AI does
- Predicts top-selling products and slow-moving stock
- Identifies stores likely to delay payments
- Highlights products with low margin or high expiry risk
- Suggests optimal stock planning based on past trends
- Flags delivery delays and operational bottlenecks
Key use cases
- Sales Prediction - forecasts which products will sell more next week or month
- Credit Risk Alerts - warns about stores with high chances of delayed payment
- Smart Recommendations - suggests best products to push for higher margins
- Operational Insights - detects delivery delays and inefficiencies
- Decision Support - converts raw data into clear, actionable insights
Why ZEEN AI matters
It reduces business risk, improves cash flow, and prevents overstock and expiry losses - and above all it enables proactive decisions instead of reactive ones.
Design
High-Fidelity Screens
The full surface, end to end.
Impact
Success Metrics
Projected business outcomes from moving the operation onto a single system.
50%
faster billing
70%
reduction in credit follow-up delays
30%
better on-time payments
100%
visibility on top products & stores
Reflection
Outcome & Learning
- Improved clarity around distributor workflows
- Learned to balance operational features with analytics
- Designed for scale and complexity
Conclusion
ZEEN transforms traditional distribution into smart, fast and data-driven operations, improving both revenue and efficiency.
Role
What I Contributed
End to end, as the Product Designer on ZEEN.
Want to talk through the decisions behind it?
I'm happy to walk through the research, the trade-offs, and how the system is built. Get in touch or view my resume.
Design System
Design System
In modern product design, consistency and scalability are key to delivering a seamless user experience. This design system is built to streamline UI development, ensuring visual harmony, efficiency, and accessibility across digital products.
Context
Why a Design System?
Four problems kept surfacing across projects. Each one is a reason the system exists.
1
Maintain consistency across designs
One source of truth for colour, type and spacing, so the same decision is never made twice.
2
Improve scalability with reusable components
Components carry their own states and variants, so new screens assemble instead of being drawn.
3
Enhance accessibility and usability
Contrast, hit areas and state feedback are settled once, at the component level.
4
Speed up the design and development process
Shared naming and tokens close the gap between what is designed and what gets built.
Shift
Before and After
The same contact form, redrawn once the system was in place.
Before
After
Before
Inconsistent colors, typography, and components led to inefficiency and repetitive design work. Scalability became challenging, and accessibility suffered due to poor contrast and usability.
After
Standardized colors, typography, and components ensured consistency and efficiency with reusable elements. The system is now scalable, and accessibility is improved with better contrast and usability.
Approach
Variables and Booleans
I built the system on variables and booleans to keep it flexible and scalable. Variables hold consistency in colors, typography, spacing, and components. Booleans let states, themes, and variations be toggled across UI elements rather than rebuilt.
The result is a system that is efficient, adaptable, and easy to update - a change made once travels everywhere it is used.
Why it matters
Because every value is a variable, a token change propagates through every component that references it - no sweep through screens, no drift between them.
Principles
Core Principles
Four rules the system is held to, and the reason each component looks the way it does.
Scalability
Designed with variables and booleans for easy adaptation.
Consistency
A unified design language for cohesive experiences.
Efficiency
Reduces design redundancy and accelerates workflows.
Accessibility
Ensures readability, contrast, and usability for all users.
Foundations
Design Tokens
Colour, type, spacing and radius are defined once as variables. Everything above this layer inherits from it.
Colours
Colour helps express hierarchy, establish brand identity, give meaning, and indicate element states - a well-defined palette ensuring visual harmony.
BaseBlack · White
Primary & Secondary Gray11 steps each
Success · Warning · Error · Info11 steps each
Gradients5
Every ramp steps from 275 down to 25, so the same index means the same weight in any colour.
Typography
A structured system of fonts, sizes, and styles that ensures readability, consistency, and brand identity across the interface - designed for clarity, hierarchy, and a seamless user experience.
Poppins400 · 500 · 600 · 700
H130 / 38
H228 / 36
H324 / 32
Title20 / 30
Subtitle16 / 24
Body14 / 22
Caption12 / 18
Spacing
A consistent system of margins, paddings, and gaps that creates visual balance, improves readability, and keeps the layout clean and structured.
none
0
xs
4
sm
8
md
12
lg
16
xl
20
2xl
24
3xl
32
4xl
36
5xl
40
6xl
48
7xl
54
8xl
60
9xl
72
10
80
Radius
A structured approach to corner rounding that keeps components visually harmonious and consistent across the interface.
none
0
xxs
2
xs
4
sm
6
md
8
lg
10
xl
12
2xl
16
3xl
20
4xl
24
Iconography
A consistent set of icons ensuring clarity, usability, and visual harmony across the interface - scalable icons that blend with the design language.
Categories12
WeightsOutline · Filled
Basics, Essentials, Emoji, Interface, Commerce, Technology, Charts, Arrows, Files & folders, Tasks chat & events, Social and Authoring - each glyph drawn in both weights.
Library
Components Overview
A well-structured design system is built from reusable components. Each one is made with variables and booleans, so it adapts to different use cases instead of being redrawn for them. What follows is the library itself.
COMPONENT 01
Dropdown
A collapsible element that displays a list of options, letting users select one or multiple items while keeping the interface clean and organised. Label, field and hint text move together as one block through every state.
COMPONENT 02
Checkboxes & Radio Buttons
Selection controls that let users make choices with clarity and ease, holding consistency, accessibility and a seamless interaction across the interface. Checkbox for many, radio for one - same states, same rhythm.
COMPONENT 03
Toggles
Toggles let users switch between two states effortlessly, keeping clarity, accessibility and consistency within the system. Used for settings and preferences, where the change applies the moment it is made.
COMPONENT 04
Tags, Pills & Breadcrumbs
Compact elements for categorisation, filtering, and wayfinding. Tags and pills carry clarity and easy identification; breadcrumbs show where a user is in the hierarchy and how to get back.
COMPONENT 05
Avatar
Avatars are visual representations of users, organisations or entities, shown as images, initials or icons. They carry identification, personalisation and recognition - and they scale, so presence dots and verification badges stay legible at every size.
COMPONENT 06
Tooltip
A small, informative element that gives contextual guidance on hover or focus, adding clarity without cluttering the interface. Descriptive and compact forms, with the arrow placed to suit whatever it is anchored to.
COMPONENT 07
Toaster Message
A brief, unobtrusive notification carrying real-time feedback. It appears temporarily, communicating without interrupting - success, error, warning and info, each with its own accent rule and an optional link into the detail.
COMPONENT 08
Loader
A visual indicator for work in progress. It holds clarity while the user waits, reducing how long the wait feels - three sizes, with and without a track ring, and a label underneath.
Library
Also in the System
Built to the same rules, documented on their own boards in the file.
Buttons
Buttons provide clear, consistent, and accessible interactions, guiding users through actions while maintaining visual harmony across the design system - primary, secondary and tertiary, with different states.
Input Fields
Input fields allow users to enter data with clarity and ease, ensuring consistency, accessibility, and a seamless user experience across the interface.
Alerts
A notification component that delivers important messages, warnings, or confirmations, ensuring clarity, visibility, and timely user awareness.
Empty States
A UI pattern that informs users when no data is available, providing guidance, context, and actions to improve the user experience.
Implementation
Implementation & Usage
- Built using variables and booleans for dynamic adaptability
- Ensures scalability for future enhancements
- Designed for web applications
Conclusion
This design system lays the foundation for a consistent, scalable, and accessible UI experience. It helps designers and developers collaborate efficiently while maintaining brand identity.
Role
What I Contributed
The system was designed, documented and maintained end to end.
Want to talk through how it is built?
I'm happy to walk through the token structure, the variant logic, and how the system holds up as a product grows. Get in touch or view my resume.