शून्य SHOONYA YOGI Wear the Stillness.

A UX/UI case study covering two complete products built from zero as co-founder and lead designer. A B2C e-commerce store rooted in Vedic philosophy, and a B2B SaaS internal operations platform serving eight employee roles. Includes user research, wireframes, design decisions, and outcomes. May 2025 to May 2026.

B2C Store  ·  B2B SaaS  ·  Brand Identity  ·  11 Pages  ·  8 Dashboards  ·  Lead Designer

25+
Deliverables
12
Months
01
Designer
Live Prototype  ↗
Scroll to explore
Shoonya Yogi

"We didn't want to make another niche wellness brand. We wanted to make conscious, breathable clothing that anyone in India could afford and wear every single day, and a digital space that felt as light as the fabric itself."

Shreya Deshpande, Co-founder and Lead Designer

The Challenge
Communicate craft and quality at a price that doesn't signal cheap.

Handloom, organic fabric for everyday wear - not just yoga. Short kurtas at ₹650, dhotis at ₹1,100. Fabindia starts at ₹800. Good Earth at ₹3,500. Shoonya Yogi sits below all of them, deliberately. The design had to hold that gap without looking cheap.

BrandStarting price
Good Earth₹3,500+
Ekam / Satva₹2,000+
Fabindia₹800+
Shoonya Yogi₹650
The Approach
Design for how the fabric feels, not how the category looks.

Brand vocabulary first: Shoonya (emptiness), Pancha Bhuta (five elements), Ardhanarishwara. Every decision tested against one question - does this feel as effortless as the fabric?

Two products, one design system: a B2C store for conscious everyday buyers and a B2B ops platform for eight employee roles.

00.01
Research

Who we were designing for

5 user interviews, 8 competitor audits, one very specific customer.

5 interviews. Bengaluru, Pune, Mumbai, Delhi. People who want natural fabric for everyday life - not just practice - but get priced out every time.

Pattern that came up across all five, unprompted: same frustration, different words. The price isn't the problem. The price gap between "I want this" and "I can justify this" is.

User Profile
  • Age 24–42, urban + semi-urban, any lifestyle
  • Discovers on Instagram, purchases on desktop
  • Wants breathable natural fabric for everyday wear
  • Return policy on handloom = primary first-purchase anxiety
What research unlocked
FindingDesign response
"All look the same"Story-first homepage, no generic grid
Sensory words: light, flows, breathableSensory copy on product pages, not spec lists
Gender-binary nav = "clinical"Concept-led collections, Him/Her secondary
Price barrier every time₹650 entry, no luxury signals in design
Mobile browse → desktop buyDifferent design emphasis per breakpoint
Checkout distrust on D2CCOD option, minimal form, trust perks inline
Audit gap - 8 brands reviewed

Good Earth, Fabindia, Ekam, Satva, No Nasties, Nicobar, Lululemon, Alo Yoga - every single one: gender-first nav, functional copy, no sensory language, no accessible price point. The middle of the market was empty.

"I want something that feels like nothing when I wear it. Natural, light, that flows. But every brand selling that is priced like I need to save up for it."

User interview participant, Bengaluru

01
Part One
The Store
B2C E-commerce

A full-stack consumer storefront built from the brand up. 11 pages, 73 products, four collections. Designed for everyday conscious buyers across India, at a price point that most people can actually reach.

01.01
Brand Foundation

The name is the brief

Every visual decision was derived from the word Shoonya and what it means philosophically.

Shoonya means zero. The silence between breaths. Every design decision started there.

Not designing for a brand - building one from zero as co-founder. The constraint that shaped everything: quality natural fabric signals "expensive." This brand had to signal "considered" without that.

PillarExpression
StillnessOrganic movement, no synthetic energy
RootsVedic philosophy as visual language
InclusionConcept-led, not gender-led
CraftTraceable handloom fabrics, copy that says so
Access₹650–₹1,700. Not a luxury.
Cream
#FAF6EF
Beige
#EDE4D3
Terracotta
#C4622D
Maroon
#5C1A1A
Earth
#2C1A0A
Gold
#C9943A
Serif Display
Cormorant
Garamond

Headings, product names, quotes. Weight 300–500. Communicates quiet luxury and classical Indian editorial energy.

Sans Body
Jost

Navigation, labels, body text. Weight 200–400. Clean, modern, and unobtrusive. Lets the imagery and serif breathe.

Devanagari
शून्य

Noto Sans Devanagari for the brand name and decorative Devanagari characters. Grounds the brand in its linguistic roots.

Design Constraints One designer. Two products. Twelve months. No dev on retainer, no paid testing budget, no Figma library starting point. Every decision justified to a co-founder who was also a business stakeholder. These constraints are not excuses - they made every decision harder and more deliberate.

01.02
Design Decisions

Every pixel has a reason

Six core decisions that shaped the entire consumer experience.

Decision What was chosen Why
NavigationDiscovery Centered logo · mega menu with product image thumbnails Small, considered catalog - nav is the first moment of seduction. Text links treat products like SKUs. Images treat them like objects.
HomepageArchitecture Story first. Full-viewport hero, philosophy layer, then products. Not an impulse buy. They need to understand what makes this different from any kurta at a mall. Brand earns the sale first, products come after.
CollectionsNavigation Concept-led: Pancha Bhuta, Mangalgiri, Whites - Him/Her secondary "I got the Agni dhoti" > "I got a red men's dhoti." More universal, more memorable. Ardhanarishwara as structure, not just philosophy.
CheckoutConversion Single scroll. No upsells, no urgency timers, no nav. COD option included. A brand that sells calm can't have a chaotic checkout. Every anxiety pattern removed. COD covers 23% of first-time buyers outside metros.
Product copyContent Sensory-first: "flows, breathable, like nothing." Specs in accordion. The decision is emotional first. "100% cotton, machine washable" does not make someone buy a dhoti for their morning practice.
Journal + AboutEditorial Full editorial treatment: full-width imagery, pull quotes, slow rhythm Content is a product here. A reader of the Ardhanarishwara article is more likely to convert than someone who only sees the product grid.
AccessibilityQuality WCAG 2.1 AA contrast. Mobile-first checkout. Keyboard nav annotated. Body text: 10.2:1 on cream. CTAs: 3.8:1. Mega menu: Escape to close. Size buttons: arrow keys. All specified in wireframe, not post-dev.
01.03
Wireframes and Process

Lo-fi before hi-fi

6 screens, greyscale only. Structure proven before any brand color or image was applied.

WF01
Homepage Wireframe
7 layouts. Story-first chosen. Philosophy between hero and products.

Greyscale only - no brand color, no photography until structure was proven. Layouts 1–6 put products before brand; test viewers described the site as "just another clothing store." Layout 7, with philosophy between hero and products, got "different" and "intentional" without prompting. That locked the structure.

✕ Rejected · Product-first (layouts 1–6)
✓ Chosen · Story-first (layout 7)
WF02
Mega Navigation Wireframe
Text-only and hamburger rejected. 4-column image mega menu chosen.

3 patterns tried. Text-only treats the catalog like a list. Hamburger hides everything behind a click. Mega menu with image thumbnails lets discovery start in the nav itself - hover "Dhotis," see the Prithvi dhoti before committing. Column order: Pancha Bhuta → Him → Her → Whites. Concept leads, gender is secondary. Silk Edition was briefly first (highest margin) - rejected immediately. Accessible pricing can't be contradicted by the nav hierarchy.

✕ Rejected · Text-only dropdown
✓ Chosen · 4-column image mega menu
Elements
Him
Her
Whites
WF03
Checkout Wireframe
Multi-step and tabbed accordion both rejected. Single scroll: form left, sticky summary right.

Multi-step = page-load drop-off risk. Tabbed accordion = cognitive overhead, fields feel hidden. Single scroll won: customer sees the full scope before starting. Newsletter opt-in went through 3 positions - modal (intrusive), separate step (friction), then inline below the email field (contextual, zero friction). Upsell above Place Order was in the first wireframe. Gone before hi-fi. A brand that sells calm doesn't upsell at the moment of commitment.

✕ Rejected · Multi-step wizard
Step 1
Step 2
Step 3
✓ Chosen · Single scroll + sticky summary
CART ✓ · CHECKOUT · CONFIRMATION
Contact
Address
Delivery
ORDER SUMMARY
WF04
Account / Auth Wireframe
Centered form rejected. Split-screen with Ardhanarishwara image chosen.

A generic form at the highest-friction moment in the journey is a brand failure. Split screen: philosophy on the left (Ardhanarishwara, "Wear what leaves you free. Everything else is noise."), auth form on the right. Quote was written in the wireframe, not in visual design. "Continue as Guest" was tested above both tabs - rejected. It deprioritised account creation at the exact moment the brand image was making the case for belonging.

✕ Rejected · Single centered form
✓ Chosen · Split-screen + brand image
WF05
Confirmation Wireframe
Receipt layout rejected. "Arrives in Stillness" ritual chosen.

Order ID at top + itemised list = database printout. The confirmation is the emotional peak of the purchase journey. Version 2: ✓ circle → order badge → "Order Confirmed" → product images in the order card → "What Happens Next" with three steps written in wireframe: Preparing → Shipped with Care → Arrives in Stillness. "Delivered" was never in the wireframe. A mid-iteration put brand copy above a receipt layout - tonal whiplash. Philosophy first, logistics second, in full separation.

✕ Rejected · Receipt-first layout
✓ Chosen · Ritual completion
1
2
3
WF06
404 Wireframe
Generic error page rejected. Dark navy · ॐ glyph · "returned to stillness."

White background 404 = "a different site." Brand disappears at the worst possible moment. Replaced with dark navy, ॐ glyph, "This page has returned to stillness." - written directly in the wireframe. Second iteration added bestsellers as a recovery mechanism - rejected. The 404's job is recovery, not conversion. Two choices only: Return Home or Browse Collections. No products.

✕ Rejected · Generic error, white bg
404
✓ Chosen · Branded dark state
404
01.04
Key Screens

Every screen, built from zero

10 pages. Seven described in full: Homepage, Collection, Product Detail, Account, Checkout, Confirmation, 404.

Live & Interactive Prototype

The Shoonya Yogi Store

Fully built and deployed. Browse products, hover the mega nav, open the cart drawer, complete a checkout. Every screen is live and interactive below.

Open Live Store  ↗
11Pages
73Products
4Collections
8Dashboards
shoonya-yogi / index.html · Homepage, live and interactive

Scroll past the hero to see the philosophy layer and collection portals. Hover Dhotis or Kurtas in the navigation to open the image-rich mega menu.

01
Screen 01 / Homepage
Story-first. Pure brand on first scroll. Products reached through philosophy.

3 layers: full-viewport hero (no CTA, no promo) → philosophy section (Shoonya, Pancha Bhuta, Ardhanarishwara) → collection portals. Hover Dhotis or Kurtas in the nav to open the 4-column image mega menu - Pancha Bhuta thumbnails give a visual read before any click.

02
Screen 02 / Collection Page (Dhotis)
Pancha Bhuta grid first. Element color = product color. Him + Her at equal weight below.

Five element cards (Prithvi, Jal, Agni, Vayu, Akash) with Devanagari name + element color bar - the palette is communicated before any text description. Him and Her sections below at identical visual weight - Ardhanarishwara as layout, not copy. No star ratings, no bestseller badges, no comparison signals.

shoonya-yogi / dhotis.html
Open Dhotis collection page
03
Screen 03 / Product Detail: Mangalgiri
Sticky gallery left · purchase panel right · sensory copy first · trust between CTA and accordion.

Thumbnail strip on the left (not below) - gallery is sticky so the image updates as you scroll through specs without losing your place. Product Description open by default with sensory copy first; fabric specs in the collapsed accordion. Trust perks sit between CTA and accordion: not before the price (competing), not after the accordion (too late) - right when reassurance is needed.

shoonya-yogi / product-mangalgiri.html
Open Mangalgiri Product page

"Cart to confirmation. Four screens that carry the brand's calm through the most anxiety-prone part of any e-commerce experience."

The Website Flow: Account, Checkout, Confirmation, 404
04
Screen 04 / Account and Auth
Split-screen · Ardhanarishwara left · auth form right · Google SSO.

The brand's most philosophically loaded image at its highest-friction moment. Left panel: the why. Right: the how. "Wear what leaves you free. Everything else is noise." - written in wireframe. Google SSO reduces abandonment at account creation, especially on mobile.

shoonya-yogi / account.html
Open Account / Sign In page
05
Screen 05 / Checkout
Nav stripped · single scroll · form left · sticky summary right · COD included.

Every nav link is a potential exit - all removed. Only choices: complete or go back to cart. COD covers Tier 2 buyers who won't use card on a first purchase from a new brand (23% of completions). Newsletter opt-in is an inline checkbox under the email field, not a modal - customer is already in email-thinking mode.

shoonya-yogi / checkout.html
Open Checkout page
06
Screen 06 / Order Confirmation
✓ circle · order badge · "Arrives in Stillness" · product images in order card.

The emotional peak of the journey, not a receipt. "Arrives in Stillness" replaced "Delivered" in the wireframe - the brand's philosophy travels with the package. Product images in the order card (not text lines) because customers identify their purchase visually. "What Happens Next" copy was written in wireframe, not copywriting. Structural from the start.

shoonya-yogi / confirmation.html
Open Confirmation page
07
Screen 07 / 404 Error Page
Dark navy · ॐ glyph · "returned to stillness" · full nav retained.

ॐ is the primordial sound - the origin of everything. A page that doesn't exist yet. "Perhaps it was never meant to be found" doesn't apologise; it reframes through the brand's lens. Full nav retained (unlike checkout) because on a 404 every link is a recovery path, not an exit. Two choices: Return Home or Browse Collections. No products.

shoonya-yogi / 404.html
Open 404 page
Design Process
01
Brief + Research
Brand pillars, Vedic philosophy, target user
02
User Flow Mapping
3 journeys mapped before any screen drawn
03
Lo-Fi Wireframes
6 screens, greyscale, 20+ layout iterations
04
Design Decisions
6 critical decisions locked before hi-fi
05
Hi-Fi Screens
10 pages, full brand system applied
06
Live Prototype
Fully interactive HTML/CSS build
User Journey Map
Journey 01 · Discovery to Purchase
Homepage
Collection
Product Detail
Cart
Checkout
Confirmation
Journey 02 · Account and Return Customer
Homepage
Sign In / Register
Account Dashboard
Re-purchase
Journey 03 · Error and Recovery
Any Page
404 Error
Return Home
or
Browse Collections
01.05
The Ardhanarishwara Principle

Beyond the binary

The design philosophy that shapes how Him and Her collections exist together.

Ardhanarishwara
अर्धनारीश्वर
Ardhanarishwara: the composite of Shiva and Shakti

Ardhanarishwara is the Hindu deity that is simultaneously Shiva (masculine) and Parvati (feminine), split perfectly down the center. It represents the inseparability of masculine and feminine energies, and the idea that both exist within every being.

This concept directly shaped how Shoonya Yogi presents its collections. Rather than a binary "Men / Women" navigation, the store uses "Him / Her" as entry points within broader philosophical collections. The language is softer, the boundary is permeable. A woman can buy from the Him section; a man can wear the Silk skirt.

Both Him and Her variants live on the same page, equal weight. Neither comes before the other in the mega menu either. Ardhanarishwara isn't the tagline - it's the layout rule.

Design Philosophy
02
Part Two
The Platform
B2B SaaS Operations

An internal operations system for eight employee roles. Built because a spiritually-rooted brand still needs logistics, finance, inventory, and customer support to actually function.

Part Two

The brand is calm.
The operations need to be fast.

Without this platform: WhatsApp for logistics, Google Sheets for inventory, manual monthly reconciliation for finance. Eight roles, zero shared source of truth.

Each dashboard gives exactly the data and actions that role needs. Nothing more. Role-scoped sidebar: a logistics user never sees the Finance module. It doesn't exist for them.

8
Role Dashboards
40+
Unique Screens
1
Design System
0
WhatsApp Threads Needed
02.01
Before the Platform

What chaos looked like

Four operational breakdowns that made a custom platform unavoidable.

📦
Inventory was a spreadsheet
Stock levels were tracked in a shared Google Sheet. No real-time sync with the store. Overselling happened regularly.
Result: orders placed for out-of-stock items, customer complaints, manual refunds
🚚
Logistics lived in WhatsApp
Shipping updates were communicated over WhatsApp groups. Logistics team had no single source of truth for order status.
Result: delayed pickups, missed dispatch windows, no tracking visibility for support team
💰
Finance was manual
Revenue reconciliation was done monthly by hand. COD collections had no real-time tracking. Returns were not matched against inventory adjustments.
Result: month-end reconciliation took three days, discrepancies went unresolved
🎨
Design had no workflow
The in-house designer had no way to submit new collection proposals, get approvals, or track which designs were in production.
Result: designs approved verbally, versions confused, production delays
02.01b
Platform Wireframe Process

How the dashboards were structured

Three structural decisions made before any dashboard was designed in hi-fi.

WFP1
Dashboard Architecture
Shared sidebar rejected. Role-scoped sidebar chosen.

Greyed-out items create curiosity and frustration. Locked modules signal restriction. Role-scoped sidebar: each employee sees only their work environment. The sidebar doesn't know other modules exist. 8 sidebar configurations wireframed before any screen was designed. Admin sidebar wireframed last as the superset.

WFP2
Primary Action Hierarchy
Most frequent action = most accessible. 2 clicks from landing, per role.
RolePrimary action above fold
InventoryStock health bar → critical items first
LogisticsPriority dispatch queue by SLA
Finance4 numbers: Revenue, COD, Returns, Net
SupportSLA-sorted ticket queue
Marketing4-stat campaign hero: ROAS, opens, CVR

Inventory originally showed an alphabetical stock table. Rejected - the warehouse manager never needs A–Z, they need to see what's about to run out.

WFP3
Shared Design Language
Same type system as the store. Almost didn't survive first review.

Co-founder objection: Cormorant Garamond on a data dashboard is inappropriate. Counter: employees should feel the brand in the tools they use every day. A dashboard that looks like it was built by a different company creates a psychological split. Resolution: Cormorant for headings only. Jost for all data, labels, tables. Same rule as the store - brand moments in serif, functional moments in sans.

02.02
System Architecture

Eight roles, one platform

Each dashboard is scoped to a role. No employee sees data outside their function.

👑
Admin
Full Access
🎨
Designer
Collections + Approvals
💰
Finance
Revenue + Reconciliation
📦
Inventory
Stock + Reorder
🚚
Logistics
Dispatch + Tracking
📢
Marketing
Campaigns + Analytics
⚙️
Operations
Cross-team Oversight
🎧
Support
Tickets + Refunds

"Each employee should see exactly what they need to do their job. Not more. Not less. Access should mirror responsibility."

02.03
The Dashboards

Role by role, screen by screen

Eight dashboards, each designed around the specific cognitive load and workflow of the role.

01 / 08
Admin
Full Platform Access
God Mode
Design Decision

The admin dashboard is the only one with a full sidebar that exposes all eight role modules. Every other role sees only their module. The admin gets a global health overview: revenue today, orders pending, inventory alerts, and support ticket count, all above the fold.

The color accent is Terracotta (brand ember), the same color used for the most important calls-to-action on the consumer store. This creates a subconscious hierarchy: the admin sees the brand's signature color as their primary indicator of urgency and importance.

Solves
  • Single view of entire business health
  • One-click access to any team's module
  • Alert system for inventory, orders, and support backlog
  • User and role management without developer access
Live Dashboard Preview
shoonya-admin-dashboard.html
Open full admin dashboard
02 / 08
Designer
Collections + Approval Workflow
Creative Role
Design Decision

The designer dashboard is the most visual of all eight. It was designed to feel like a mood board tool as much as a workflow manager. New collection proposals are submitted with color swatches, fabric references, and reference imagery. Approvals happen within the platform, with no email chains.

The dashboard surfaces which collections are in production, which are pending approval, and which have been rejected with feedback. The timeline view is borrowed from project management tools but styled to match the brand, not Jira.

Solves
  • Collection proposal with visual references
  • Inline approval and rejection with notes
  • Production status tracking per collection
  • Mood board and color palette documentation
Live Dashboard Preview
shoonya-designer-dashboard.html
Open full designer dashboard
03 / 08
Inventory
Stock Control + Reorder
Operational Role
Design Decision

The inventory dashboard leads with a stock health bar: a full-width indicator showing what percentage of SKUs are healthy, low, or critical. This is the first thing the inventory manager sees when they open the platform. No hunting through tables.

Products below reorder threshold are flagged in amber. Out-of-stock products are flagged in red and automatically shown first in the table. The reorder action is a single click, not a five-step form, because the most common action in this role should be the easiest action.

Solves
  • Real-time stock visibility across all SKUs
  • Automated low-stock alerts before sellout
  • One-click reorder with pre-filled supplier details
  • Returns matched to inventory adjustment automatically
shoonya-inventory-dashboard.html
Open full inventory dashboard
04 / 08
Logistics
Dispatch + Shipment Tracking
Operational Role
Design Decision

The logistics dashboard is built around a dispatch queue: a prioritized list of orders that need to be packed and shipped today, ordered by promised delivery date. The most time-critical orders surface first. The interface is dense and information-heavy by design: this role does not need visual breathing room, it needs scan speed.

Shipment status uses a five-state pipeline (Pending, Packed, Dispatched, In Transit, Delivered) with color-coded badges. Courier partner assignments are shown inline. The entire dashboard is optimized for keyboard navigation and bulk actions, as the logistics team is processing dozens of orders daily.

Solves
  • Priority dispatch queue based on delivery SLA
  • One-screen shipment status for entire order book
  • Courier partner assignment and tracking link generation
  • Same-day pickup slot management
shoonya-logistics-dashboard.html
Open full logistics dashboard
05 / 08
Finance
Revenue + Reconciliation
Financial Role
Design Decision

Finance dashboards are often overloaded with charts. The Shoonya Finance dashboard was designed on a different principle: clarity over comprehensiveness. The top four numbers (Revenue Today, Pending COD, Returns Value, and Net Receivable) are shown as large typographic values, not sparklines. The chart is below the fold.

COD collection tracking was a specific pain point surfaced during initial conversations. The dashboard has a dedicated COD section with delivery-partner-wise breakdowns and expected settlement dates. Reconciliation discrepancies are flagged automatically with a diff view.

Solves
  • Real-time revenue without waiting for EOD reports
  • COD tracking by delivery partner and settlement date
  • Automated reconciliation with discrepancy flagging
  • Returns matched to financial adjustments
shoonya-finance-dashboard.html
Open full finance dashboard
06 / 08
Marketing
Campaigns + Channel Analytics
Growth Role
Design Decision

Marketing was the one role where visual data density was appropriate and expected. The dashboard leads with a campaign performance overview in a four-stat hero row: active campaigns, ROAS, email open rate, and conversion rate. Below that, a channel breakdown compares organic, paid, and email performance side by side.

Campaign creation is accessible from the dashboard header. The workflow was designed to match how the marketing manager actually plans: concept first (with copy and creative fields), then channel selection, then scheduling. Not the other way around.

Solves
  • Campaign performance visible without logging into Meta Ads or Mailchimp
  • Channel comparison on a single screen
  • Campaign creation from brief to schedule in one flow
  • Collection launch coordination with inventory and logistics
shoonya-marketing-dashboard.html
Open full marketing dashboard
07 / 08
Operations
Cross-team Health Monitoring
Oversight Role
Design Decision

The operations dashboard is the second widest in scope after Admin. The ops manager needs to see the health of every team without having the edit permissions of any of them. The design mirrors a control room: all eight departments visible as health tiles on a grid, with drill-down access to read-only detail views.

A daily ops briefing at the top auto-generates yesterday's summary: orders shipped, stock alerts, tickets closed, campaigns running. No more opening eight tabs every morning.

Solves
  • Cross-team health without full admin access
  • Auto-generated daily briefing for morning standup
  • Bottleneck identification across the fulfillment chain
  • Escalation routing when a team is overwhelmed
shoonya-ops-dashboard.html
Open full ops dashboard
08 / 08
Support
Tickets + Returns + Refunds
Customer-facing Role
Design Decision

Support carries the weight of every other team's mistakes. The ticket queue sorts by SLA breach risk, not arrival time - the most common support failure is FIFO handling that lets urgent tickets go cold. Closest to deadline = top of the queue.

Order history, shipment status, and return eligibility are visible within the ticket panel. The support agent never needs to leave the ticket to look up an order. Refund initiation is a single action, gated by a confirmation modal that shows the refund amount and method before executing.

Solves
  • SLA-sorted queue prevents breach on urgent tickets
  • Order context inside the ticket, no tab switching
  • One-click refund with confirmation and audit trail
  • Return status visible in real-time from logistics feed
shoonya-support-dashboard.html
Open full support dashboard
02.04
Platform Design Decisions

SaaS with a soul

The principles that made eight separate dashboards feel like one coherent system.

Principle What it means Why it holds
Shared type systemCohesion Cormorant for headings, Jost for data - same rule as the store Employees should feel the brand in their daily tools. Front-of-house and back-of-house, same company.
Role-scoped sidebarAccess Missing modules don't appear greyed - they don't exist for that user Greyed items = curiosity + frustration. You can't edit what you can't see. Errors drop.
Action hierarchyEfficiency Most frequent action in each dashboard is reachable in 2 clicks from landing 3 fewer clicks × 40 orders/day = real operational time. Mapped before any screen was designed.
Semantic colorClarity Red = act now · Amber = soon · Green = healthy, across all 8 dashboards Admin moves between all 8. Same color = same meaning every time. No re-learning per screen.
25
Deliverables across 12 months

11 consumer-facing pages. 8 role dashboards. 1 complete design system. Brand identity, typography, color, motion, and content strategy, all owned by one designer who was also building the company. Every file, frame, and pixel authored from zero.

03.01
Outcomes

What the data and users said back

First 90 days of operation. Qualitative signals and early quantitative indicators. Sample sizes are small at this stage; these are directional, not conclusive.

Avg. Session Duration
4:20
vs 2:30 apparel category average (Similarweb, Indian D2C). Story-first architecture: users spent more time before reaching products.
Checkout Completion
68%
Of users who reached checkout completed it. Indian D2C category average: 45–55%. Distraction-free single-scroll flow is the likely driver.
Post-Purchase Account Creation
41%
Of confirmed buyers created accounts via the confirmation page prompt, well above the typical 8–12% from a standalone account page CTA.
Newsletter Opt-In
31%
Inline checkbox inside the Contact form section. Estimated 3× higher than modal-based opt-in benchmarks on comparable D2C sites.

"The site feels like the clothes. I don't feel sold to."

Post-purchase survey respondent

What worked
Story-first architecture was the highest-impact single decision.

Philosophy section before products → measurably higher conversion and lower return rate (they arrived knowing what they were buying into). "Arrives in Stillness" came up unprompted in post-purchase surveys. Mega nav image thumbnails were cited as a discovery mechanism. COD was used by 23% of first-time buyers - validated the wireframe decision to include it.

Iteration 2 would fix
Three things with more data.
  • Pancha Bhuta before Him/Her confused first-time visitors - needs a first-visit tooltip
  • 60% of returns were size-related - product page needs a fit guide or size quiz
  • Journal: high traffic, near-zero product conversion - contextual product links inside articles, not at the bottom
03.02
Learnings

What building two products taught me

The six most transferable lessons from this project.

शून्य
Accessible ≠ simple

Every visual shortcut that signals "craft" also risks signalling "expensive." Holding both simultaneously - considered but not luxury - was the central tension of every single page.

भूत
Fabric language before product language

8 competitors. All described garments the same: composition, wash care, SKU. None described how the fabric feels. Sensory copy ("flows," "like nothing") was the clearest gap and the most direct response to what users said.

कर्म
Checkout = a study in removal

Every element that wasn't the form or the order summary was a potential exit. Strip it. 68% completion vs. 45–55% category average.

धर्म
The confirmation page is a beginning

41% account creation from the confirmation page. Treating the highest-emotion post-purchase moment as a receipt would have converted zero. Treating it as a brand moment converted four in ten.

योग
5 conversations unlocked the category gap

Not a survey. Not analytics. Five people, same frustration, different words. The entire positioning of Shoonya Yogi came from listening for the pattern.

मुक्ति
Journal traffic ≠ journal conversion

High traffic, near-zero product conversion. The bridge from story to product was too long. Iteration 2: surface the Mangalgiri garment inside the Mangalgiri article, not at the bottom.

Two products. One year. One designer.

No client to present to. No approval chain. Every decision mine to make and mine to justify to a co-founder who was also a business stakeholder. Including the hardest one: how do you communicate the quality of handwoven, naturally dyed fabric through a screen, at a price that doesn't signal cheap?

The consumer store had to earn trust from someone who wanted this fabric every day but had been priced out every time they tried. The internal platform had to work for a logistics team at 9am and a finance team at 11pm. Same design system. Completely different users. Both had to feel effortless.

What held: the mission coherence. Natural fabric that flows. A price that doesn't exclude. A checkout that doesn't create anxiety. A confirmation page that feels like receiving something you care about. These ideas came from the fabric itself - before any wireframe - and survived every iteration.

The brief was not a brief. It was a point of view.

शून्य
Shreya Deshpande
Co-founder and Lead Designer, Shoonya Yogi   2025–2026

More work

← Return to the Gallery