Created, designed, and launched a comprehensive personal UI elements library website — a living reference for consistent component design across all D2C projects. Covers typography, colour tokens, spacing, interactive states, and full component documentation.
Built to serve as a single source of truth across 30+ brand engagements — reducing inconsistency in design handoffs and cutting component re-creation time.
About
Design that moves metrics
I'm Vineet — Senior Product Designer specialising in CRO, e-commerce experimentation, and commerce UX. I work at Tectonic designing for D2C brands that need design decisions tied to revenue, not just aesthetics.
My process: audit the funnel, find the friction, build the hypothesis, ship the test.
30+
Brands
3+
Years Experience
₹45L+
Revenue / Week Saved
5.8M
Sessions Tested
Get in touch
Seeking senior design leadership to shape strategy, direction & impact
Sole designer running structured CRO audits across 10+ D2C brands — turning behavioural data into ICE-scored backlogs and A/B-tested redesigns tied directly to revenue.
Year2023–24
IndustryD2C E-commerce
BrandEmber · Letsbeco · Includ · Avimee Herbal
DurationOngoing · 2–4 week cycles
click to expand
Impact
+17.35%
RPS — Ember PDP
+7.79%
RPS — Vaaree · 5.8M sessions
+45L/wk
Revenue Retained — Includ
10+
Brands Audited
Every friction point is a revenue leak. As lead designer at Tectonic, I built a repeatable audit-to-ship methodology across 10+ D2C brands: behavioural audit → ICE-prioritised backlog → design sprint → controlled A/B test → ship. Each cycle ran in 2–4 weeks. Every change had a defined success metric before design began.
01
The Problem
Brands were making design decisions by intuition. Avimee Herbal had strong traffic but poor conversion. Session data revealed three compounding issues:
Visual trust gap: Gallery heatmaps showed ~3 min dwell on product images. Users were decoding brand quality visually, but imagery was inconsistent and low-res.
Information-seeking, not purchase-ready: 60%+ scroll depth showed users hunting for delivery, returns, and ingredient details buried deep in the page.
Broken affordances: WCAG contrast at 2.11:1 (fail). Dead clicks on static badge elements users expected to be interactive.
Every finding was ICE-scored before any design work began. Highest-confidence issues shipped first within the 2-week sprint window.
⊕ expand
02
Design Decisions
Saadaa — Before / After PDP
13-point PDP audit on Includ identified the full friction map. Key decisions with evidence:
Price + ratings above fold: Surfacing social proof and savings before copy reduces bounce. Users were scrolling past the CTA without seeing either.
Sticky mobile CTA with price on button: Eliminated "what will I be charged?" anxiety at the moment of commitment.
Gallery zoom + thumbnail strip: Addressed the visual trust gap. Users needed to inspect fabric and finish before buying.
Conditional Free Shipping Callout: Shown only when the product meets the threshold. Generic messages were ignored — conditional ones converted.
UX PRINCIPLE APPLIED
Nielsen's Heuristic: Match Between System and the Real World
"The design should speak the users' language — using words and concepts familiar to the user, rather than internal jargon."
Commerce UX fails when it uses designer-logic hierarchy. Users don't think in "product details" — they think "will this fit?" Restructuring PDPs around user mental models drove consistent RPS lifts across every brand.
⊕ expand
03
Testing & Rollout
Every redesign ran as a controlled A/B test before full rollout.
Test structure: 50/50 split, minimum 2-week run, success metric defined upfront. Primary: RPS. Secondary: ATC rate, bounce rate.
Vaaree mobile PDP: Largest test at 5.8M sessions. Won with statistical significance at week 2.
Includ cart: 269K sessions, 4-week test. 10 interventions staged — not shipped at once — to isolate signal from each change.
A/B tested on every brandMetric defined before designICE prioritisation frameworkStaged rollout to isolate signal
⊕ expand
More Projects
Guided Discovery
Turning Product Confusion into a +24.2L Revenue Path
Growth Flows
Designing the Full Post-Click Commerce Loop
Guided Discovery
Turning Product Confusion into a +24.2L Revenue Path
Ravelcare had high traffic and low ATC conversion. 60+ SKUs, no personalisation, decision paralysis. A 4-question branching quiz replaced the PLP and became the site's #1 converting entry point.
Year2024
IndustryHealth & Wellness D2C
BrandRavelcare
Duration6 weeks · Research → Wire → Test → Ship
click to expand
Impact
+24.2L
Incremental Revenue
−45%
Drop-off vs old PLP
12%
Quiz-internal drop-off
#1
Converting entry point
Before the quiz, Ravelcare's users landed on a standard category page with 60+ SKUs and no filtering by concern. Session replays showed rage clicks, repeated back-navigations, and 60%+ exit rates. The problem wasn't the products — it was decision paralysis. Sole designer, one PM, two engineers, 6 weeks.
01
The Problem
Quantified through research before a single wireframe was drawn:
60%+ PLP exit rate: Users left without engaging any product. Heatmaps showed scattered click patterns — no clear navigation intent.
4+ min average session, near-zero ATCs: Long dwell time with no outcome = confusion, not consideration.
Exit survey finding (n=120): Top reason for not purchasing — "I didn't know which product was right for my hair type." Trust wasn't the problem. Navigation was.
Hypothesis: If we replace the flat PLP with a guided flow that matches intent to product, ATC conversion will rise significantly. The quiz needed to feel like advice from an expert — not a filter dropdown.
02
Design Decisions
A 4-question branching quiz designed to reduce decision load at every step:
4 questions only: Primary concern → Hair type → Scalp condition → Treatment history. Each question eliminated 40%+ of the catalogue. More questions = more drop-off.
"Why we ask" micro-copy: One-line rationale below each question. Made the quiz feel expert-led, not form-like. Estimated 8% reduction in step-2 abandonment.
Results page as PDP, not a list: 2–3 products max. Personalised headline. Concern-specific benefit copy. Social proof filtered by hair type. One dominant CTA.
Progress indicator: "Step 2 of 4" — explicit. Users who know how far they are abandon less.
UX PRINCIPLE APPLIED
Hick's Law: Reduce the Number of Choices
"The time to make a decision increases with the number and complexity of choices available."
The PLP gave users 60 choices. The quiz gave 4 questions leading to 2–3 recommendations. Same products, radically different cognitive load. This is why the quiz outperformed direct PDP traffic — users arrived at the right product with confidence.
⊕ expand
Quiz Prototype — Interactive Flow
03
Testing & Outcome
Prototype tested with 8 users before development. Validated: users understood the flow without instruction and felt confident in recommendations.
A/B test: Quiz entry vs direct category page. 4-week run. Quiz won with statistical confidence at week 2.
Quiz-internal drop-off: 12% vs 60%+ on old PLP. The "why we ask" copy accounted for ~8% of this reduction.
Revenue impact: +24.2L incremental revenue. Ravelcare expanded the quiz to two more product lines within the quarter.
Prototype tested pre-devA/B tested 4 weeks#1 converting entry pointExpanded to 2 more product lines
What I'd do differently: instrument per-question drop-off from day one. We only added that tracking in week 3 — losing 3 weeks of optimisation data.
⊕ expand
More Projects
Growth Flows
Designing the Full Post-Click Commerce Loop
Design Systems
One Design Language Across 30+ Shopify Brands
Growth Flows
Designing the Full Post-Click Commerce Loop
Auth redesign cut checkout steps from 7 to 3. A complete reward and referral system built from scratch. Cart redesign retained +45L/week. All three shipped on Includ.
Year2023–24
IndustryD2C E-commerce
BrandInclud
DurationOngoing · 3 parallel workstreams
click to expand
Impact
+4.01%
RPS — Includ Cart
+45L/wk
Revenue Retained
7→3
Auth Steps
269K
Sessions Tested
Acquisition gets users to the cart. Everything after — login friction, no loyalty incentive, confusing cart UX — determines whether they buy once or return. At Includ, I owned the full post-click experience across three parallel workstreams. All three shipped. All three had measurable outcomes.
01
Auth Redesign — 7 Steps to 3
The problem: Funnel data showed 34% of users dropped at the checkout login step. The existing flow forced all users through one path regardless of their state.
I mapped all 5 auth states and designed an optimised path for each:
Not logged in: OTP-first, no password. Single-field entry.
Existing user with mobile: Auto-detect + OTP pre-sent. 2 taps to checkout.
New mobile number: Lightweight registration inline — name + OTP only. No forced full account creation.
Logged in, no mobile: Mobile capture as a background step, not a blocker.
Addresses not synced: Address selection inline with one-tap confirm. No re-entry.
UX PRINCIPLE APPLIED
Progressive Disclosure
"Only ask for information when you need it, in the context it's needed."
The old flow asked all users for all information upfront. The new flow asks for the minimum required at each state. Returning users see 3 steps. New users see a lightweight path. Both reach checkout faster with less friction.
⊕ expand
02
Rewards & Referral System
Includ had no loyalty mechanism — every purchase was a first purchase from a retention standpoint. I designed the complete system from scratch, constrained to Shopify metafields and an existing third-party loyalty app:
Referral flow: Share code → friend signs up → enters code → ₹50 coins awarded to both on friend's 1st completed order.
Coins earn rules: One-time signup bonus, 2% on every purchase, referral coins. All visible in a Coins Passbook with expiry dates.
Redemption at checkout: Toggle to apply. Capped at 21% of cart. Stackable with coupons. Cannot apply to shipping. Coins Applied modal shows exact discount before confirm.
Zero new infrastructureBuilt on Shopify metafieldsFull passbook with expiry visibility
⊕ expand
03
Cart Redesign — A/B Tested at 269K Sessions
10 specific interventions. Staged rollout to isolate signal from each change:
Product Badge: Social proof carried from listing page into cart. Reinforces confidence at commitment point.
Contextual Badges: Real-time — "lowest price", "in 15 carts". Data-driven, not static.
Countdown Timer: Upgraded from static offer text to a live colour-coded timer.
Coins Applied toggle: Visible saving lowers the final displayed price — reduces payment hesitation for loyalty users.
Price Breakdown: Full line-item — MRP, discount, coupon, coins. Eliminates hidden charge surprise before payment.
Proceed to Pay CTA: Full-width branded, total on label. Single dominant action.
Before: every brand started from scratch — ad-hoc fonts, inconsistent components, slow handoffs. After: a shared typography system, 5 native checkout extensions, and a PDP framework that delivered +17.35% RPS on first deployment.
Year2022–24
IndustryD2C / Shopify
Brand30+ Brands
DurationOngoing since 2022
click to expand
Impact
30+
Brands on the System
+17.35%
RPS — Ember PDP
5
Native Checkout Extensions
0
Theme Hacks
When you design for 30+ brands, the bottleneck isn't creativity — it's consistency and speed. I built a shared design language across three layers: a 9-step typography system, 5 Shopify Checkout Extensions, and a reusable PDP redesign framework. Together they cut new brand setup time and eliminated the most common review conflicts.
01
Typography System
Before: Brand designers chose fonts by intuition. Each storefront had different hierarchies, weights, and line-heights. Reviews were wasted on font debates instead of UX decisions.
I built a 9-step scale — Display through Caption — with three governing rules:
Price always 700 weight: The heaviest element on any commerce page. No exceptions. Hierarchy through weight, not just size.
CTA always uppercase 600 + 0.1em tracking: Legibility at tap-target sizes. The tracking threshold where uppercase reads cleanly at 12–13px.
Body at 300–400, 0.45–0.55 opacity on dark backgrounds: Keeps CTAs dominant. Body text competes with CTAs when it's too high-contrast.
Adopted across all 30+ brands. Eliminated font-related review debates entirely. New brand type setup dropped from a 2-day discussion to a 30-minute application of the scale.
⊕ expand
02
Shopify Checkout Extensions
Checkout is Shopify's most locked surface — theme.liquid doesn't touch it. I designed and spec'd 5 native extensions strictly within the UI Extension API:
Upsell / Add-on Block: Cart-value aware, placed above order summary. Increases AOV without disrupting checkout flow.
Coins / Loyalty Widget: Surfaces coin balance, toggle to apply up to 21% of cart. Shows exact discount before confirmation.
Delivery Timeline: Estimated delivery at checkout. Addresses the #1 last-step abandonment reason — uncertainty about arrival.
Gift Message Field: Stored on order metafields. Zero fulfilment overhead.
Trust Badge Bar: Dynamic — updates based on cart value. Returns window, secure payment, free shipping threshold.
Native Shopify UI Extension APIWorks on Plus and non-PlusSurvives all theme upgradesZero theme hacks
⊕ expand
03
PDP Framework — +17.35% RPS on First Deployment
A 9-point PDP structure, ranked by impact across audits. Not a template — a prioritised intervention list layered in based on brand-specific audit findings:
Price + MRP above fold: Savings visible before the user reads a word of copy.
Ratings anchored at top: Social proof in the first 3 elements — before price processing begins.
Play Video in gallery: Reduces pre-purchase uncertainty. Integrated into carousel, not a separate section.
Add To Cart with price on button: No checkout surprise. Price on the CTA = confirmation of what they're committing to.
Deployed first on Ember's mobile store. +17.35% RPS. Now the default starting point for every new brand PDP at Tectonic.
Deployed across 30+ brandsRanked by audit impact, not template+17.35% RPS on first deployment
⊕ expand
More Projects
CRO + Experimentation
Driving Conversion Through UX-Led Experimentation
Guided Discovery
Turning Product Confusion into a +24.2L Revenue Path
Vineet Tiwari
Senior Product Designer
Senior Product Designer specializing in CRO, e-commerce experimentation, and Shopify ecosystems. Over a decade of design experience — the last 3+ years laser-focused on building high-converting digital commerce for 30+ brands. I lead through systems thinking, visual design, behavioural UX, and data-informed design decisions.
→Led UX design and strategy for 30+ e-commerce brands — building unified, conversion-optimised experiences across platforms.
→Designed complex interaction design patterns and user flows — authentication, reward/referral, bundle, and quiz-based shopping journeys from research through to production handoff.
→Architected developer-friendly design systems and component libraries covering typography, colour, iconography, and interaction patterns.
→Developed native Shopify Checkout Extensions strictly within platform guidelines; partnered with engineering in agile sprints for QA, iterative bug fixes, and pre-launch UI testing.
→Spearheaded CRO initiatives and A/B testing programmes by analysing heatmaps, business metrics, and ad campaigns — driving significant measurable revenue growth across multiple brands.
Key Wins & Impact
Ravelcare – Quiz optimization
+24.2L
Incremental revenue · −45% drop-off vs old PLP
Letsbeco – Mobile CTA redesign
+15.97%
Revenue Per Session
Saadaa – Inline size guide reduction
86%
Cart drop-off at size step — diagnosed & resolved
Includ – Cart & Auth redesign
+45L
Per week · +4.01% RPS · Auth 7→3 steps
Ember – Mobile ATC & CTA redesign
+17.35%
RPS
Vaaree – Mobile-first PDP
+7.79%
RPS · +5.49% Express Checkout
Virgio
Manager, Design
2022 – 2023
→Co-designed and launched theme-based digital store pages for the mobile app, working within a cross-functional UX team.
→Owned end-to-end design execution across multiple product categories — from concept to handoff — ensuring brand consistency.
→Managed design delivery across concurrent product category launches maintaining quality and deadlines.
→Directed a large-scale brand marketing event and activation campaign across multiple colleges in Southern India.
Reliance Retail
2019 – 2021
Asst. Manager – Footwear Design
→Developed seasonal product concepts grounded in user-centered design and market research.
→Coordinated seamlessly across marketing, development, and production teams.
→Visual merchandising for stores Pan India ensuring consistent brand narrative.
Mochiko (Adidas)
2013 – 2015
Senior Footwear Designer
→Specialized in the design and development of core athletic footwear for Adidas.
→Adapted global design trends and themes specifically for the Indian market.
Projects
Spectrum AI (SaaS)
Currently designing the end-to-end UI and visual identity for an emerging AI SaaS product. Translating complex technical workflows into intuitive, accessible interfaces.
CRO & Theme Plugins
Built custom plugins to streamline CRO auditing and extract themes efficiently for e-commerce environments.
UI Component Library
Created, designed, and launched a comprehensive personal UI elements library website.
Figma
Illustrator
Photoshop
Notion
Craft
Framer
Whimsical
Clarity
