This portfolio is crafted for a larger screen — with motion, interactive case studies and detail views that come alive on desktop. For the full experience, please open it on a desktop or laptop.
🖥️
Best viewed on desktop
The interactive prototype is designed for desktop and is only available there. For the best experience, please open this portfolio on a desktop or laptop.
Password protected
These case studies are password-protected. Please enter the password to continue.
I’m Nistha — a product designer who thinks in systems and builds in code. With 10+ years of experience across consumer products, scalable design systems, and AI, I turn ambiguous problems into simple, polished experiences that work at scale. I bring a hands-on approach across the full lifecycle, from product strategy and interaction design to prototyping and production-ready code.
I’m curious by nature, obsessed with craft, and happiest when I’m making something real.
A Glimpse into My Process
Insight
Synthesis
01
Research
Interviews, synthesis, user insights & jobs to be done
Problem
JTBD
02
Define
Framing the problem, journey maps & opportunities
AI agents
Systems
03
Design
Screens, design systems & AI agentic workflows
</>
Build in code
Ship
04
Iterate
Building in code, testing & shipping to real users
Hands-on end to end — I frame ambiguous problems, let data and research steer the decisions, and partner closely with Product and Engineering to ship polished experiences.
A strong advocate for accessible, inclusive design — and for making it a default in how teams build, not an afterthought.
AI has reshaped how I work: with tools like Claude Code and Figma Make I prototype and test many more directions upfront — spending less time on execution and more on framing the right problem and deciding what should, and shouldn't, be built.
I move fluidly between product thinking, design, and code — turning ideas into polished, production-ready experiences.
My Foundation
B.Des, Communication Design
National Institute of Fashion Technology (NIFT), Delhi Class of 2015
Major in UI/UX and Interaction Design
My Toolkit
UX Research
Interaction Design
Design Systems
Prototyping
UI / Visual Design
Product Strategy
Accessibility
Figma and Claude Code
Data-Driven Design
Design Thinking
Selected Work
Case Studies
Contact
Let's create something impactful and delightful together. Reach out for collaborations, freelance, or just to say hello.
Based in
Delhi (NCR), India
Availability
Open for 2026 Freelance & full-time
Email
nistha.kaushal09@gmail.com
NISTHA·K
Case study · FlowAI (Manifest Global)
Agentic Query Management System
A Query Management feature I designed 0→1 for FlowAI — the workspace agents use to raise, track, and resolve the support queries they send to FlowAI, with an AI-powered ticket-creation flow that turns plain-English descriptions into fully-formed tickets.
Agents raise a high volume of queries to FlowAI's support team, and under SLA pressure the tooling works against everyone: breaches are hard to spot before they happen, raising a ticket means manually filling repetitive fields, and newcomers face a blank, unfamiliar inbox with no guidance. The result is slow triage, missed SLAs, and a steep learning curve.
Users
Agents — counsellors and support staff who raise queries to FlowAI and track them through to resolution.
FlowAI support team — the people who triage, respond to, and resolve incoming agent queries against SLAs.
First-time users — oriented through an interactive onboarding tour.
Objective
Design an agent workspace that makes query status legible at a glance, cuts the effort of creating and resolving tickets, and gets new agents productive on day one — with FlowAI doing the heavy lifting where it earns trust.
What I designed
Inbox & triage
Filter tabs (All, Open, In Progress, Pending Agent), search by student, ticket ID or keyword, and colour-coded SLA status so breaches surface at a glance.
Ticket detail side sheet
Opens in place with a Raised → Assigned → In Review → Resolved progress tracker, the full conversation thread, and a reply composer with AI draft suggestions.
Ask FlowAI
The agent describes an issue in plain English; FlowAI infers category, priority and student, confirms the details, and creates the ticket instantly.
Raise Query (manual)
A guided, validated multi-step form — student, category, priority, description — as a dependable fallback to the AI flow.
Onboarding tour
A six-step spotlight walkthrough that measures real UI elements and lands new agents on a live inbox, ready to act.
Designed the end-to-end experience across five real workflow states — from first-run onboarding to the live SLA inbox.
Made SLA breaches visible at the row level, so agents can act before deadlines slip.
Collapsed multi-field ticket creation into a single plain-English step with FlowAI.
Designed an onboarding tour that lands new agents on a live inbox, ready to act.
Gave every ticket a clear lifecycle — Raised → Assigned → In Review → Resolved — for shared visibility.
Impact
The numbers that moved
−45%
Time to raise a ticket — plain-English AI draft vs. the manual form
+28%
SLA compliance — breaches surfaced before they slip
3×
Faster new-agent onboarding — productive on day one
60%
Of new tickets now raised through the AI-assisted flow
NISTHA·K
Case study · Expedia
Car Rental — Upgrades
An in-context upgrade experience on Expedia’s car-rental PDP — helping travelers discover a better car within budget and upgrade in one tap, without losing their selected dates or restarting search.
Users looking at car rentals on the PDP lacked the confidence to upgrade without restarting their search — causing decision friction and missed revenue from higher-tier vehicles that were often only a few dollars more.
The business problem
On the supply side, only a handful of popular vehicles surfaced at the top of the results were actually getting booked — leaving vendors with unused inventory sitting idle across their fleets. Surfacing relevant upgrades in-context was a chance to spread demand and monetise that untapped supply.
Hypothesis & Goals
Hypothesis
If users can compare higher-tier cars and see the value difference directly on the PDP, they’ll be more likely to upgrade — without negatively impacting conversion.
Goal & success criteria
Primary goal: Increase revenue per visitor from car rentals
Guardrail: Booking conversion rate
Guardrail: PDP exit rate
Proposed Solution
An in-context Upgrade Module on the PDP — a focused surface that lets travelers trade up to a better car in a couple of taps. It compares tiers side by side, shows the exact price difference, and confirms the upgrade without ever making the user lose their selected dates, pick-up location or place in the booking flow.
What the module does
Four principles shaped the experience — each one lowering the friction and the perceived risk of upgrading.
Tier comparison
Economy → standard → premium shown side by side, so the jump in value is obvious at a glance rather than buried in a separate search.
Clear price delta per day
The offer is framed as “+$12 / day” rather than a brand-new total — making the real, incremental cost of trading up instantly legible.
Value framing
Each option leads with what the traveler actually gains — more space, comfort and luggage room — not just a dry spec sheet of features.
No lost context
Upgrading preserves the selected dates, location and booking progress — so there is never a reason to restart the search to get a better car.
Definition
What counts as an upgrade?
Any car offer that meets all three criteria qualifies as an upgrade worth surfacing to the traveler.
Same supplier & location
Comes from the same supplier and pick-up location, maintaining identical policies and amenities.
Within +10% price
More expensive than the base vehicle, but no more than 10% above the base total price.
Genuinely better
Offers better features — more passengers, more luggage space, or a higher luxury class.
Wireframes
Phase 1 — framing the problem
Low-fidelity thinking validated the information architecture and core flows early: what actually makes a car “better”, and whether to pitch one car or several, one-click or stepped, full feature comparison or just the gained benefits.
Framing the upgrade · defining what “better” means and the key product questions to resolve
Key Features
01 · Upgrade module on the PDP
A carefully crafted module that surfaces the upgrade offer with the price difference and clearly calls out the value proposition — placed for discoverability without downplaying the page’s main focus.
02 · Confirmation & navigation
Confirming the upgrade and letting the traveler undo it — respecting the user’s intent and momentum at that point in the booking journey.
Design Process
I mapped user journeys across the PDP to find high-intent moments where an upgrade could add value without distracting from the core booking flow, and tested multiple placements — balancing conversion impact, visual hierarchy and usability. I moved quickly into low-fidelity designs to validate interaction patterns, then leveraged Expedia’s design system, extending it with new components to support the experience at scale. I finalized high-fidelity designs with accessibility considerations, partnered closely with engineering through handoff and UAT, and worked with Product and Analytics to monitor post-launch performance and iterate on the data.
Screens
Phase 2 — final high-fidelity screens
Multiple approaches, placements and visual treatments were reviewed with stakeholders and in XD design crits. Close collaboration with engineering, the Design System team and Product landed a solution that met business needs, tech feasibility and best UX practice.
Final hi-fi screens · PDP with the upgrade banner, side-by-side comparison, and the upgraded confirmation state — built on Expedia’s design system
The upgrade module · one-tap upgrade with clear value framing and a +$12/day price delta surfaced in context
Experiment & Impact
Experiment setup
Type
A/B test
Traffic split
50 / 50
Duration
4 weeks
Platforms
Mobile web + app
Stat threshold
95% confidence
Impact & results
Primary results
Upgrade attach rate
~9–10% → ~13–14% (+40–45% lift)
Revenue per visitor
+7–8% lift
Average order value
+10–12% lift
Guardrail metrics
Booking conversion
No statistically significant change
PDP exit rate
−2.5 pts
Impact
The numbers that moved
+40–45%
Lift in upgrade attach rate (from ~9–10% to ~13–14%)
+7–8%
Increase in revenue per visitor
+10–12%
Increase in average order value — guardrails held
NISTHA·K
Case study · Flow AI (Cialfo)
FlowAI Design System
From a UI library to a product foundation — turning a collection of frontend components into a scalable, documented design system for the Flow AI counselor portal, without disrupting a single power user.
At Cialfo, multiple teams were shipping fast. We had reusable frontend components — but they’d grown organically, for engineering convenience. There was no shared design language designers and engineers could reach for consistently. This isn’t an engineering failure — it’s what every fast-moving product accumulates.
As the product matured, the same problems kept surfacing
And every one of them was organizational, not cosmetic.
Looked alike, behaved differently
Components appeared similar but their behaviour and states diverged across teams.
Inconsistent naming
No shared taxonomy, so the same thing was called different names in different places.
Rebuilt, not assembled
Designers recreated patterns from scratch instead of composing from a kit.
Code reused, standards weren’t
Engineering reused code but not the interaction standards behind it.
Undocumented states
Accessibility and component states weren’t written down anywhere.
Slower every release
Each team re-interpreted components, so features took longer to ship.
Why it mattered
The real cost was never visual inconsistency
Users weren’t struggling because a button was blue instead of green. The cost showed up inside the team — and it compounded.
Decision fatigue
Every screen re-litigated the same choices from scratch.
Duplicated work
Patterns rebuilt in parallel instead of reused.
Slower delivery
Each team re-interpreted components before shipping.
Rising maintenance
More variants to keep alive with every release.
The Reframe
From a UI library → a design system
Same pixels. A fundamentally different kind of asset — an organizational capability, not a Figma file.
Before — UI library
Frontend-owned components
Inconsistent, ad-hoc naming
Reusable code only
Component reuse
Built for implementation
Team-specific decisions
After — design system
Shared design language
Standardized taxonomy
Reusable design and code
Tokens + foundations + patterns
Built for scalability & adoption
Cross-team consistency
Who it’s for
The users are power users — and that raised the stakes
The counselor portal is where sub-agents submit college applications on behalf of students. It isn’t a casual tool — it’s where their entire working day happens.
Heavy, complex workflows
Dozens of students, applications, documents and deadlines managed in parallel, every day.
Deep muscle memory
Their speed comes from familiarity — they know exactly where everything is and how it behaves.
Low tolerance for disruption
A slower or unfamiliar flow means errors, lost time and friction in high-stakes work.
In a competitive market, a disrupted power user doesn’t file a complaint — they leave. Not disturbing them wasn’t caution. It was retention strategy.
Strategy
I didn’t redesign the product — I built the infrastructure underneath it. I intentionally preserved the existing visual language and separated visual redesign from system redesign, doing only the second. The objective wasn’t a refresh; it was a scalable foundation future teams could build on without disrupting a single user.
Process
Three deliberate phases
Evidence first, deliberate sequencing, then shared ownership.
01 · Discovery
Interviewed engineers, audited every component, mapped inconsistencies, reviewed support tickets, catalogued token usage and measured duplication.
02 · Sequencing & trade-offs
Foundations before components; high-frequency components first. Order was a strategy, not an accident.
03 · Collaboration & governance
Built with engineering & product, designers contributed real patterns, and I set up lightweight governance for the system.
What the audit revealed: dozens of near-duplicate components and no shared naming — evidence the problem was structural, not cosmetic. That’s what justified building a system, not just tidying components.
From design to shipped — where the work lived
Not a design file, a living resource anyone in the company could pull.
Explore
Figma
Design files, variants and token definitions.
→
Build & finalize
Claude Code
Production components in Tailwind — states, variants and docs.
→
Ship for everyone
Dev staging
Live in staging so any team pulls the same source of truth.
What I built
Tokens first — everything else inherits from here
Foundations come first because every component is assembled from them: change a token once and the whole system moves together.
01 — Foundations
Color, type, radius and spacing, defined as tokens.
Tailwind wasn’t the hero — it was a business decision. Because engineering had already standardized on Tailwind, I aligned the system’s architecture to map cleanly onto implementation, so tokens and components translate directly to code. The payoff isn’t the framework — it’s near-zero translation effort between design and engineering.
Validation
To prove the system, I designed a new flow entirely from it — the AI-assisted Add Student onboarding flow. The 6-step stepper, upload zone, buttons, tip banner, tokens and spacing all came from reusable primitives. Nothing on that screen was custom.
Results
A measurably faster team
~60%
Faster to ship a new screen — compose from primitives instead of building from scratch
~40%
Less design→dev back-and-forth — tokens & components map 1:1 to code
~35%
Fewer UI-inconsistency bugs — shared states replace one-off interpretations
How we measured it
The same story, unpacked into before → after
Anchored to a real feature pair — one built the old way, one built on the system.
Feature: design → launch
8 weeks → 3 weeks (−62%)
Design→dev handoff churn
~20 → ~12 threads (−40%)
UI-inconsistency bugs
~20 → ~13 per release (−35%)
UAT rounds to sign-off
3–4 → 1
UI defects raised in UAT
~18 → ~4 (−78%)
UAT sign-off time
~2 weeks → ~3 days (−70%)
The thesis
“A great design system isn’t something users notice.”
Its value is internal — it lowers cognitive load for designers, speeds implementation for engineers, and gives every product team a platform to deliver better experiences, faster. A successful system is felt inside the team before it’s ever seen by a user.
NISTHA·K
Experience
Where I've worked
A decade designing consumer and enterprise products across travel, SaaS and AI — from 0→1 builds and design systems to high-traffic consumer journeys. A look at my last three roles.
Leading end-to-end product design for Flow AI, a SaaS admissions platform serving students and counsellors globally across multiple markets.
Designed and delivered the Flow AI Design System 0→1 — the company's first shared design language across product and engineering — built foundations-first on design tokens and aligned to Tailwind for near-zero design-to-code translation.
Designed the Agentic Query Management System 0→1 — the workspace agents use to raise, track and resolve support queries, with an AI-assisted ticket-creation flow that turns plain English into fully-formed tickets. View case study →
Shipped documentation with every component: usage guidelines, ARIA roles, keyboard behavior and contrast notes baked in — not an afterthought.
Proved the system by designing an AI-assisted student onboarding flow entirely from reusable primitives — 60% faster to ship a new screen, 40% less design↔dev back-and-forth, 78% fewer UI defects in UAT.
Partnering with Engineering, Product and leadership to define product direction and align design strategy with business goals.
Led end-to-end design of Activity Discovery — an immersive, video-led experience for Expedia's mobile app (Android + iOS) serving millions of travellers globally.
Activity Discovery, A/B tested (50/50, 3–4 weeks): +78% interaction, +47% click-through to detail pages, +22% time on destination page.
Redesigned the Car Rental upgrade & add-on experience — +42% upgrade attach rate, +8% revenue per visitor, +11% average order value.
Ran diary studies with 30 travellers, tested three discovery models, and validated the final swipe pattern through A/B testing.
Championed accessibility, embedding WCAG 2.1 AA into the design process, and helped evolve Expedia's global design system.
Designed an enterprise dashboard for creative teams to manage font licences across roles and teams — turning complex permission structures into clear, intuitive interfaces for global enterprise clients.
Ran end-to-end research — stakeholder interviews, contextual inquiry and moderated usability testing — to inform product direction.
Partnered with ML/AI, Product and Engineering to translate complex AI-powered features into usable, accessible interfaces.
Mentored junior designers and facilitated Design Thinking workshops, embedding human-centred methods across teams.
Designed shopping and checkout experiences for one of India's largest e-commerce marketplaces — from product discovery and listings to cart and payments — making high-traffic buyer journeys clearer, faster and more trustworthy at scale.
Designed UI and brand graphics for a home-services marketplace — shaping booking flows that help customers find and hire trusted professionals, and campaign visuals that carried the brand across the app and marketing.
An independent New Delhi studio working across graphic design, type and branding — often with craft communities and cultural projects.
An early, formative studio internship in visual and type-led design.
NISTHA·K
Case study · FlowAI (Manifest Global)
FlowAI Mobile App
A native mobile app I designed and built 0→1 for FlowAI — bringing the counsellor's core workflow into a fast, glanceable app: search universities, add a student, match courses and submit an application, all from your phone. Grounded in sub-agent interviews, journey maps and jobs-to-be-done, and shipped to real agents.
The FlowAI agent workflow was heavy and desktop-bound. Agents ran their university search entirely outside the platform, tracked students across CRMs, sheets and portals, and newcomers got lost in the application flow. They needed a fast, mobile way to move a student from search to submitted application — and to act on what needs attention without being tied to a desk.
Users
Education agents & counsellors — across the three operating models the research surfaced: expertise-led boutiques, commercial/volume operators, and back-office ops teams.
New agents — onboarding-sensitive; the desktop submit and first-run flow was exactly where they got stuck.
Students — served indirectly through faster, better-organised applications.
Objective
Put the core agent flow — search → add student → match courses → submit — in your pocket, on one principle: quiet surface, loud signal. A calm interface that surfaces the single clear next action, with colour reserved for what matters — green good, amber attention, red urgent.
The call I had to make
The research pushed back on the brief: four of five agents preferred desktop for their own work, and the clearly-validated mobile need was a lightweight companion — not a full agent app. Rather than average that away, I used it to scope hard — shipping only the core, time-sensitive jobs on mobile (search → student → match → submit) and leaving heavy document review on desktop — so the app earned its place instead of duplicating the desktop tool.
How I built it (0→1)
Sub-agent research — ran five semi-structured interviews across three agent segments to understand the real workflow, its pain points, and what genuinely belongs on mobile.
Synthesis — distilled the findings into pain points and design implications, and scoped the mobile MVP around the highest-value, on-the-go jobs.
Journeys & JTBD — mapped the agent's journey and jobs-to-be-done, from the first search to a submitted application.
Design system — defined FlowAI's mobile language: a teal-gradient identity, card surfaces, a floating pill nav, tokens for colour, type, spacing and radii, and native-feeling motion.
Screens & prototype — designed and coded an interactive prototype covering every flow, with empty and error states throughout.
Walkthroughs & ship — validated with real agents, triaged P0/P1 issues, then built and shipped through staging to production.
What I designed
University search
Search and filter by field, city and tuition; result cards showing tuition, employment rate and acceptance rate; a detail page with top courses and job outcomes; shortlisting.
Student management
Add a student (name, email, intake, interests, career goals) and a student list with status and recency at a glance.
Course matching
Ranked course matches after adding a student, a matching moment, and accept-to-shortlist against the student.
Application submission
A five-section form — Contact, Academic, Programme, Financial, Review — with a progress stepper, save + resume, and submit + confirmation.
Application tracking
An application list with status badges and filters, so agents can see where every case stands.
System & states
A reusable component kit — cards, chips, bottom sheets, toasts, a pill nav — with empty and error states on every key screen.
Designed and shipped the app end-to-end, 0→1 — from research through a coded prototype to a production build.
Validated with real agents in walkthroughs and beta, iterating on P0/P1 issues before launch.
Beta agents completed the full flow — add student → matches → application → submit — to an 80%+ task-completion bar.
Held to performance benchmarks on a mid-range device: search under 500ms, matching under 2s, form save under 300ms.
Impact
What it took, what it delivered
55K+
Courses searchable in the FlowAI catalogue
1,400+
Universities, with tuition, ranking & acceptance data
5
Sub-agent interviews behind the design direction
80%+
Beta task-completion, tested by real agents
<2s
Course matching on a mid-range device
<500ms
University search — results load near-instantly
NISTHA·K
Case study · Expedia
Activity Discovery
Making "top things to do" immersive — turning static activity lists into a swipeable, social-media-style video reel inside Expedia's mobile app, so travellers can feel an experience before they book it.
Role
Senior UX Designer
Product
Expedia · Mobile app
Focus
iOS & Android
Timeline
4 months · December 2025
Problem Statement
Tours & activities is a $225B market that captures under 1% of bookings online. Static lists couldn't convey what an experience actually feels like, so travellers bounced to YouTube and Instagram to validate — and engagement with activities lagged far behind hotels and flights.
Millennials & Gen Z who turn to Instagram and TikTok for travel inspiration before they book.
Objective
Let travellers consume activity options immersively instead of clicking through static images — building inspiration, confidence and conversion for in-destination experiences.
How I approached it
Research — diary studies with 30 travellers plus competitor booking-data analysis; found that visually-rich content was the key differentiator.
Explore — tested three discovery models (search-first, browse-first, recommendation-first) and four layouts: Split View, Sidebar, Compact List and Bottom Sheet.
Validate — user testing showed 78% preferred the search-first approach; an interactive prototype was A/B tested with 50 users to validate the swipe pattern.
Ship — rolled out on a 50/50 traffic split across 3–4 weeks on mobile web and app.
What I designed
Discovery carousel
A video-thumbnail carousel of activities, each showing duration, price and traveller ratings at a glance.
Immersive video view
A full-screen activity reel with sound, ratings, and save/share — the feel of a place before you commit.
Navigational gestures
Onboarding for swiping between activities, with pause/unpause and mute/unmute controls.
Wireframes
Early lo-fi explorations of the activity detail experience — desktop-first layouts and mobile-first interaction studies.
Screens
Discovery carousel
Immersive video view
Activity detail
Swipe onboarding
Why it matters
$225B market<1% booked online68% inspired by social4.5× more likely to discover2.8× more likely to book
Outcomes
Travellers who engaged with the immersive experience were far more likely to view key decision attributes — price, duration and ratings — supporting more considered bookings.
A/B tested at a 50/50 split: +78% interaction with activities, +47% click-through to detail pages, +22% time on the destination page.
Validated a video-led discovery pattern Expedia could extend across in-destination experiences.
Impact
The numbers that moved
+78%
Interaction with activities (A/B tested)
+47%
Click-through to activity detail pages
+22%
Time on the destination page
$225B
Tours & activities market opportunity
30
Travellers in the diary studies
78%
Preferred the search-first model in testing
NISTHA·K
Case study · FlowAI
Add Student
Giving agents a fast, reliable way to onboard students at scale — drop in a student’s documents and the application form fills itself.
Adding a student meant slow, manual data entry — retyping every detail from passports and mark sheets into a long, multi-section application form, for every student. For agencies onboarding hundreds, it was tedious, error-prone, and a drag on the people running the pipeline.
Users
Sub-agents & counsellors at partner agencies who onboard and manage many students at once.
Teams handling high volumes of applications, where every minute of data entry adds up.
Objective
Make adding a student fast and reliable at scale — cut the manual data entry and get an agent from “new student” to a complete, review-ready profile in minutes.
How I approached it
Documents first, form second. Upload the passport and mark sheets and let the AI do the typing — a guided flow (Upload → Process → Auto-Fill → Review → Submit) that adds a student and their applications in a fraction of the time.
AI review, not blind auto-fill. The system validates what it extracts and flags exactly what needs a human — green for fields pulled from documents, amber for the few to check or fix — so agents attend to what matters instead of re-checking all twenty.
Manual input becomes the exception. Most fields arrive pre-filled, so typing is the fallback, not the default; a “continue without documents” path keeps it usable when there’s nothing to upload.
Designed and built it — the flow, states and interactions, in real code.
What I designed & built
AI document uploadExtraction & auto-fillGuided multi-step formTrust cues (auto-filled vs review)Review & submit
Screens
Students dashboard · manage students, applications, documents & assigned agents
Step 1 · Upload · drop in the student’s documents — AI-powered
Step 2 · Process · extract from passport & mark sheets, map to fields, validate
Step 3 · Auto-Fill · 18 fields pre-filled; green = from documents, review the rest
Done · student added & ready to assign universities
Impact
A faster agent experience
3×
Faster to add a student and their applications
−70%
Manual data entry per student, versus the old form
90%
Of fields auto-filled straight from uploaded documents
<2min
From documents to a complete, review-ready profile
Outcomes
18 fields auto-filled from a passport and mark sheets — onboarding shifts from retyping to reviewing.
Agents add and manage students at volume, with fewer data-entry errors.
A calmer, guided flow that makes a heavy form feel like a few quick checks.
NISTHA·K
Case study · Monotype
Font Subscription Management
A centralized SaaS dashboard transforming how creative teams discover, activate and manage premium fonts — while keeping licensing compliant and under organizational control.
Role
Product Designer
Product
Monotype · Enterprise SaaS
Focus
Web dashboard
Timeline
12 weeks
Problem Context
Design and advertising agencies rely heavily on premium fonts from platforms like Monotype — but managing access, licensing and usage across teams is fragmented and risky.
Visibility issues
No clear view of who has access to which fonts
Designers don’t know what’s already available
Re-downloading and duplicating fonts
Licensing risks
Overuse beyond purchased seats
Non-compliant usage across teams
Potential legal & financial exposure
Admin challenges
Difficulty assigning fonts to roles / projects
No tracking of usage and activation
Manual, time-consuming processes
Project Goal
Design a centralized SaaS dashboard that enables creative teams to efficiently discover, preview and activate fonts while maintaining compliance and organizational control.
For teams
Discover, preview and activate fonts quickly and intuitively.
For admins
Manage access, licences and usage with full visibility.
For organizations
Stay compliant and efficient while maximizing font-library value.
User Research
Designers
Need quick access to fonts
Want to preview before using
Value fast, frictionless workflows
Design leads
Ensure brand consistency
Coordinate across projects
Manage team font libraries
Admin / IT
Manage licences & permissions
Track usage & compliance
Control costs & access
Information Architecture
The dashboard is organised into three modes, split by user intent.
1 · Discover
Exploration of new fonts and browsing the library.
2 · My Library
A personal workspace with active and owned fonts.
3 · Manage
Admin controls for governance and licensing.
Top Navigation
├── Discover (explore new fonts)
├── My Library (active fonts)
└── Manage (admin controls)Sidebar
├── Fonts (872)
├── System Fonts (531)
├── Collections
├── Online Library (950)
└── Classification
Key insight: a dual-navigation model splits exploration vs ownership vs governance — preventing overcrowding and creating clear mental models for very different user intents. Six layout directions were explored before converging on the final approach.
Key UX Decisions
Inline preview instead of detail pages. Users don’t need to open each font separately. By showing live typography previews directly in the list (“The quick brown fox…”), designers can scan and make decisions significantly faster.
Reduces frictionFaster scanning
Dual navigation model. The sidebar provides structural navigation (Fonts, Collections, System Fonts), while the top bar handles mode switching (Discover, Library, Manage) — preventing overcrowding of a single navigation system.
Scalable hierarchyClear mental model
Progressive disclosure with context menus. Advanced actions (Activate, Sync, Label, Delete, Character Set) are hidden in the context menu (⋯) — keeping the UI clean for casual users while staying powerful for experts.
Reduced clutterPower-user friendly
Multi-select & bulk actions. Checkboxes enable multi-selection, letting teams activate, deactivate or organise multiple fonts simultaneously — critical for agencies managing hundreds of fonts.
Efficiency at scaleBatch operations
Visual status indicators. Colour-coded dots and labels show font status at a glance (active, synced, inactive), reducing ambiguity and giving immediate feedback without reading text.
Clear feedbackReduces errors
Core User Flow
1 · Browse fonts — the user navigates to the font library via the sidebar or search.
2 · Preview in list — an inline typography preview shows “The quick brown fox” in the actual typeface.
3 · Select font — click the checkbox or row to select (supports multi-select).
4 · Open context menu — right-click or click the overflow menu (⋯) to reveal actions.
5 · Click “Activate” — the action triggers the font-activation process.
6 · Font becomes available — it syncs and becomes accessible in Adobe CC, Figma and other design tools.
Wireframes
Five directions before the final design
Rather than committing early, I explored several distinct layout systems — each optimising for a different need, from a friction-free simplified list to a data-dense power-user table and a mobile-first card stack. Pressure-testing them against the core tasks of finding, previewing, activating and managing fonts is what validated the information architecture and interaction model behind the final experience.
01Simplified ListClean vertical list with inline actions and filtering — the leanest, lowest-friction take.02Grid GalleryCard-based grid for visual browsing and side-by-side type comparison.03Master–DetailSplit view with a dedicated panel for deep, focused evaluation of a single family.04Compact TableData-dense table optimised for power users managing hundreds of fonts.05Card StackMobile-first swipeable cards with progressive disclosure of details.
Screens
My Library · inline previews in the real typeface, multi-select & bulk actions, colour-coded status, and a context menu for power actions
Browse — visual grid · font families as expressive specimen cards; image / grid / list view toggle and sort by popularity
Filter & explore · faceted filters (style, weight, width, x-height), mood tags, and a live custom preview-text field
Text preview · type your own sample and scrub the size to compare families like-for-like across the grid
Quick actions · like, add to library, compare and expand all styles inline — without leaving the results grid
Sync to desktop · one-click activation with format options, keeping the web library and the local machine in sync
Beyond discovery, the platform hands administrators a governance layer. The Manage console centralises the entire organisation — user access, SSO groups, teams, roles and licence usage in one place — so admins can invite or deactivate people, assign roles and export usage data. It’s what keeps a 1,300-seat font library compliant, auditable and under control at enterprise scale.
Manage — admin console · centralised users, SSO groups, teams, roles, last-active tracking and licence usage for enterprise governance
Pain Points & Opportunities
Identified pain points
Action discoverability — the context menu hides key actions; new users may not realise the full capabilities.
Lack of role context — it’s not clear who has access, or which team is using specific fonts.
No immediate feedback — after activation, it’s unclear what happens or if the font synced to tools.
Limited comparison UX — “Compare” exists but isn’t visible in the primary flow.
Enhancement opportunities
Smart recommendations — “Fonts used in this project” or “Popular in your team.”
Role-based access layer — assign fonts to teams, projects or roles (Designer, Intern, Freelancer).
Usage analytics — track font-usage frequency and licence utilization.
Tool-integration visibility — show “Available in Photoshop” or “Synced with Figma.”
Quick hover actions — hover to reveal [Activate] [Compare] [Add] without the context menu.
Impact
The numbers that moved
<1min
Time to find & activate a font — down from ~5 min
−80%
Reduction in duplicate downloads
+60%
Increase in active font usage
100%
Licence compliance across teams
50+
Team-satisfaction NPS score
ROI↑
Value maximised per licence on the font library
Impact & Reflection
This solution transforms font management from a fragmented, compliance-heavy task into a streamlined, discoverable and collaborative experience — striking a careful balance between:
Power-user efficiency
Bulk actions, keyboard shortcuts and context menus for expert workflows.
Ease of use
Inline previews, simple structure and progressive disclosure for all skill levels.
Scalability
Team management, licence control and role-based access for organizations.
What I learned
Dual-navigation systems can prevent overcrowding when serving multiple user intents.
Inline previews dramatically reduce friction in asset-management interfaces.
Progressive disclosure keeps interfaces clean while remaining powerful for advanced users.
Enterprise tools must balance individual efficiency with organizational governance.
