Deep Portfolio · 5 Case Studies · Brand Audits

Design that earns
notice

Five projects — each documented with the actual brand colors, typography, and spacing system of the product I designed for.

3+
years UX · SaaS specialist
UI type DM Sans · interface DM Serif Display · headings DM Mono · data/labels Brand fonts inside Poppins · Dancing Numbers Nunito · Sleepsia Raleway · GOPT
Brand colors documented in each case study
#048222 · DN Green
#35353A · DN Charcoal
#096790 · Sleepsia Blue
#FFCB2D · Sleepsia CTA
#1E2055 · GOPT Teal
#3D3D3D · GOPT Charcoal
01 / 05
Dancing Numbers Systems
Design System & Component Library
How I built Dancing Numbers' component library using their green + charcoal brand, Poppins type system, and 8pt grid.
Figma · Tokens · SaaS ↗
02 / 05
Sleepsia Research
UX Audit + Usability Study
5-user study on Sleepsia's D2C storefront — using their navy + orange brand system to redesign the mobile PDP and navigation.
Shopify · Mobile · Data ↗
03 / 05
HandoffNote Zero→1
Self-Initiated Product Concept
A Figma plugin concept born from real handoff friction. 7 interviews. Full brand identity created from scratch.
Interviews · JTBD · B2B ↗
04 / 05
GOPT Healthcare A11y
WCAG 2.2 Accessibility Redesign
Full accessibility audit of GOPT's teal + charcoal healthcare UI. 7 critical failures fixed using their Raleway type system.
Healthcare · WCAG · Inclusive ↗
05 / 05
Dancing Numbers Motion
Onboarding Interaction Design
Motion tokens and microinteractions for Dancing Numbers onboarding — in their green/charcoal Poppins system. 25% drop-off reduction.
Lottie · Figma · SaaS ↗
01 / 05 · Dancing Numbers · Design System

Building the Dancing Numbers
component library

From 7 inconsistent button styles to a living design system — how token architecture and developer collaboration reduced handoff friction by 20% across a product used by 50,000+ accountants.

Role
UI/UX Designer · Systems lead
Duration
3 months (ongoing)
Tools
Figma · Tokens Studio
Impact
20% friction reduction
Brand Audit

Dancing Numbers — the design language I worked with

Before building the system, I documented the existing brand language. Dancing Numbers uses a distinctive green + charcoal palette with Poppins as their primary typeface — a clean, modern SaaS feel that needed to be codified into reusable tokens.

Dancing Numbers
QuickBooks Automation · SaaS · B2B
dancingnumbers.com
Color Palette — 6 tokens defined
#048222
Brand GreenPrimary / CTA
#036019
Green DarkHover state
#E6F4EA
Green TintBG / highlight
#35353A
CharcoalPrimary text
#6B6E72
Charcoal 60Body copy
#F5F5F5
Off-whitePage surface
Typography — Poppins across all UI
H1 Page HeadingPoppins 700 · 32px · −0.02em
Section HeadingPoppins 600 · 22px
Body text — accountants reading SaaS documentation at speedPoppins 400 · 15px · 1.7 lh
UI label, navigation, button textPoppins 500 · 13px
EYEBROW LABEL · SECTION TAGPoppins 600 · 11px · 0.07em
Spacing System — 8pt grid
8px
16px
24px
32px
40px
48px
64px
80px
Key component tokens defined
--color-brand: #048222 --color-brand-dark: #036019 --color-text-primary: #35353A --color-text-secondary: #6B6E72 --color-bg: #F5F5F5 --font-primary: Poppins --radius-btn: 6px --spacing-base: 8px
The Problem

Every screen was a one-off

Despite a clear brand, the product had grown fast without a shared system. Buttons looked different on every page, spacing was eyeballed, developers asked "which shade of green is this?" on every ticket.

"The users come here to get a job done. Inconsistency is a tax on their attention."

Before / After

What the component audit found

Before system
  • 7 button styles across 14 screens
  • 4 mixed spacing units (8, 10, 12, 16px)
  • 3 versions of the data table component
  • No colour tokens — hex hardcoded
  • 6 unrelated font-size values, no scale
  • Empty states handled differently per screen
After system
  • 1 button system · 4 variants · all states
  • 8pt grid — one unit across the product
  • 1 data table with sort/filter/pagination
  • 38 named semantic colour tokens
  • Poppins type scale · 5 steps · 3 weights
  • Empty state template with icon + CTA
Outcome

What changed

20%
Reduction in handoff friction
38
Named colour tokens
60+
Components documented
8pt
Single spacing unit

See the live product

Dancing Numbers · 50,000+ accountants · US & Canada

View live ↗ LinkedIn
02 / 05 · Sleepsia · UX Audit + Usability Testing

Turning usability findings
into design decisions

5 users. 4 tasks. 4 critical findings. A moderated study on Sleepsia's D2C storefront uncovering why mobile users shop by pain concern — not product type.

Methods
Usability testing · Heuristic eval
Users
5 · Women 25–45 · Android
Platform
Shopify · Mobile-first
Result
5/5 task completion post-redesign
Brand Audit

Sleepsia — the design language I documented

Sleepsia's brand uses a trust-building navy + an energetic orange accent, with Nunito's friendly rounded forms to make a sleep health brand feel approachable rather than clinical.

Sleepsia
D2C Sleep Health · Shopify · India
sleepsia.in
Color Palette — 6 tokens documented
#096790
Brand NavyPrimary / trust
#065270
Navy DarkHover / depth
#FFCB2D
CTA YellowCTA button
#E5F2F8
Navy TintBackgrounds
#0D2F3F
Deep NavyHeadings
#F2FAFD
Ice WhiteSurface
Typography — Nunito for warmth + readability
Sleep Better TonightNunito 800 · 30px
Memory Foam Pillows for Neck PainNunito 700 · 20px
India's most trusted sleep brand — cervical, lumbar, and knee supportNunito 400 · 15px · 1.75 lh
Shop by Concern · Shop by Category · DealsNunito 600 · 13px · nav
Add to CartBuy NowNunito 700 · button CTA
Component tokens defined
--color-primary: #096790 --color-cta: #FFCB2D --color-heading: #0D2F3F --font-primary: Nunito --radius-btn: 8px --spacing-base: 8px
Research Findings

4 critical findings from 5 sessions

F1
People navigate by concern, not product type
4/5 participants tried to find "something for neck pain" but the nav forced product categories. Quote: "I just want to know which one is good for neck pain — why is there no option for that?"
F2
Trust signals buried below fold on mobile
All 5 participants scrolled past Add to Cart before finding reviews. On Amazon they appear in the first screen. Quote: "I'm not buying without reviews. Where are the reviews?"
F3
Homepage carousel treated as advertising
3/5 ignored the homepage after the auto-advancing carousel started. Zero participants read text on any slide.
F4
Size uncertainty causing pre-checkout exits
3/5 expressed sizing uncertainty and left the site to check elsewhere. The spec table existed but was not scannable on mobile.
Before / After

What changed and why

Before
  • Nav: Memory Foam / Microfibre / Pillowcases
  • Hero: 5-slide auto-advancing carousel
  • PDP: images → description → specs → reviews
  • Size guide: linked off-page PDF
  • Trust signals: below fold on mobile
After
  • Nav: Shop by Concern / Shop by Category / Deals
  • Hero: static lifestyle image + single CTA
  • PDP: images → stars + key benefit → add to cart
  • Size guide: inline accordion, visual not PDF
  • Star count + review snippet: above fold always
Outcome

Measured impact

3→1
Nav levels to reach a product category
+18%
Product page scroll depth (GA4, 60 days)
5/5
Task completion in follow-up usability session
0
User exits from size confusion post-redesign

See the live storefront

sleepsia.in · thousands of sleepers across India

View live ↗ Behance
03 / 05 · Self-initiated · Zero to One

Design handoff is broken —
so I designed something about it

A Figma plugin concept born from real friction. 7 interviews with designers and developers. A full brand identity created from scratch.

Type
Self-initiated concept
Research
7 interviews · designers + devs
Method
Jobs-to-be-done · Problem framing
Output
Brand + Figma prototype + spec
Brand Identity Created

HandoffNote — brand built from zero

Since this was a self-initiated concept with no existing brand, I created the full visual identity as part of the design process. The brand needed to feel like a developer tool — precise, calm, focused.

HandoffNote
Figma Plugin Concept · B2B · Self-initiated
concept · 2024
Brand Color Palette — designed for a Figma plugin
#5A67D8
IndigoPrimary / active
#434190
Indigo DarkHover state
#2D3748
SlateUI surface
#EBF4FF
Indigo TintHighlight BG
#4A4E6E
Gray 700Body text
#F7FAFC
Gray 50Surface
Typography — Inter for developer-adjacent precision
Document your decisions.Inter 700 · 26px
Annotate rationale directly on frames. Surface it in Dev Mode. Zero friction.Inter 400 · 15px
decision: "Used 8px gap, not 12" · constraint: "Mobile breakpoint"DM Mono · annotation data
Research

7 interviews · 3 clear patterns

P1
Decision context disappears at handoff
5/7 participants: the most frustrating thing is not having access to the decision rationale behind a design choice. Developers made their own calls. UI drifted from intent.
P2
Async is the default — tooling isn't built for it
All 7 worked async. But handoff tools still assume a walkthrough will happen. Figma comments were used as a substitute and became cluttered within weeks.
P3
Documentation friction is higher than its perceived value
4/4 designers wanted to document rationale but adding a Figma comment broke their flow. The cost outweighed the benefit — until the system makes it faster.

"Dev Mode shows me the what. It never shows me the why."

— interview participant, front-end developer, 4 years experience

Request the prototype

Full Figma prototype and interview notes available on request.

Request prototype ↗ LinkedIn
04 / 05 · GOPT Healthcare · WCAG 2.2 Accessibility

Making GOPT accessible
for everyone in pain

A full WCAG 2.2 audit of GOPT's teal healthcare UI — 7 critical failures found, all fixed. A product for people in distress must be usable by people in distress.

Scope
WCAG 2.2 AA full audit
Tools
Figma · Colour Contrast Analyser · Axe
Failures found
7 critical · 11 contrast issues
Result
WCAG 2.2 AA conformance
Brand Audit

GOPT — the brand language I audited

GOPT's teal-and-charcoal palette with Raleway's elegant letterforms positions it as a modern healthcare tool. The problem: the original palette had multiple contrast failures that made it inaccessible for the very users it was built to serve.

GOPT Healthcare
Pain Mapping · Async Consultation · Healthcare Web App
gopt.d-crm.in
Color Palette — before vs. after WCAG fixes
#1E2055
Brand TealPrimary / active
#16184A
Teal DarkHover / 5.2:1 ✓
#EBEBF8
Teal TintHighlight BG
#FCB116
Brand YellowCTA / accent
#3D3D3D
Charcoal11.2:1 ✓ pass
#9799CC
Navy Light2.1:1 ✕ fail
#525252
Fixed Gray7.0:1 ✓ AAA
Typography — Raleway, elegant healthcare feel
Map Your Pain. Get Help.Raleway 700 · 28px
Select affected body areaRaleway 600 · 18px
Tap on the anatomy model to pinpoint your pain location. Then rate severity from 1 to 10.Raleway 400 · 15px · 1.75 lh
Send to DoctorView ReportRaleway 600 · button
WCAG 2.2 contrast ratios — before & after
#9597C8 on white — original teal text1.8:1 · FAILS
#16184A on white — darkened teal5.2:1 · AA ✓
#8B8B8B on white — original secondary text2.8:1 · FAILS
#525252 on white — fixed secondary text7.0:1 · AAA ✓
Before / After

7 failures → 7 fixes

Failures found
  • 11 text contrast failures below 4.5:1
  • Severity slider: colour-only feedback
  • Anatomy zones: no keyboard navigation
  • Errors: no role="alert" for screen readers
  • Labels: placeholder used as input label
  • Focus: outline:none on all elements
  • Touch targets: 8 items below 44×44px
All fixed
  • All text passes 4.5:1 · most pass 7:1
  • Slider: number (1–10) + label added
  • Anatomy: tab order + Enter/Space
  • Errors: role="alert" + plain language
  • Labels: persistent above all inputs
  • Focus: 2px offset outline on all elements
  • Touch targets: minimum 48×48px enforced
Outcome

Post-audit status

0
WCAG 2.2 AA contrast failures remaining
100%
Interactive elements keyboard-navigable
7
Critical failures remediated
AA
WCAG 2.2 conformance achieved

See the live app

GOPT · async pain reporting to doctors

View live ↗ Request audit doc
05 / 05 · Dancing Numbers · Motion & Interaction

Onboarding that doesn't
feel like a tutorial

How motion tokens in Dancing Numbers' green + charcoal system reduced new-user drop-off by 25% — and the principles behind every timing and easing decision.

Tools
Figma Smart Animate · Lottie · Principle
Flows
Sign-up · QuickBooks connect · First export
Drop-off
−25% (connect step)
Rage-clicks
−68% on OAuth flow
Brand + Motion Tokens

Dancing Numbers motion system — built on brand tokens

All motion decisions were built on top of the existing Dancing Numbers brand tokens — green primary, charcoal text, Poppins type. The motion layer added duration and easing tokens, documented in the same system.

Dancing Numbers
Onboarding · Motion Layer · Interaction Design
dancingnumbers.com
Brand Color Palette — motion uses brand tokens
#048222
Brand GreenProgress / success
#35353A
CharcoalUI surface / text
#E6F4EA
Green TintCelebration BG
#F5F5F5
Off-whiteOnboarding BG
Motion Token System — added to DN design system
--dn-duration-micro: 120msButton fills, checkbox checks
--dn-duration-fast: 180msInput focus rings, tooltips
--dn-duration-base: 280msScreen transitions, modals
--dn-ease-enter: cubic-bezier(0,0,.2,1)Ease-out — entering elements
--dn-ease-exit: cubic-bezier(.4,0,1,1)Ease-in — exiting elements
--dn-ease-progress: linearProgress bars — mechanical feel
Typography in onboarding — same Poppins system
Connect QuickBooksPoppins 700 · 22px · onboarding h1
Connecting to QuickBooks... Verifying permissions... Almost therePoppins 400 · 15px · status text
✓ 847 records exported to QuickBooksPoppins 600 · success message
Key Interactions

The moments that mattered most

⟳
OAuth flow loading state. Old: popup with no feedback. New: animated progress in DN green with plain-language steps. Rage-clicks dropped in the first week.
✓
Field mapping confirmation. Lottie checkmark in #048222 (0.8s) on successful mapping. Survey: users felt "more confident" the mapping saved.
★
First export celebration. Brief 1.2s animation with user-focused copy: "847 records exported to QuickBooks." Their win, not the product's output.
Outcome

What the data showed

−25%
Drop-off at QuickBooks connect
−68%
Rage-clicks on OAuth flow
+15%
Daily active users (90 days)
4
Motion tokens added to design system

See the live product

Dancing Numbers · 50,000+ accountants · US & Canada

View live ↗ Request walkthrough