2026Healthcare
Take Therapy
⋮⋮
3 steps
Down from 7. Booking complete in <90s.
Redesigning the booking flow for Take Therapy.
E-commerceMobile AppWebE-commerce
Painted Juttay — e-commerce + custom auctions for hand-painted footwear
Building an auction marketplace that makes hand-painted shoes feel collectible.
Year
2025
Role
Lead UX/UI Designer
Duration
10 weeks
Platform
iOS · Android · Web
Methods
Interviews · Competitive Audit · Usability Testing
Tools
Figma · Notion · Loom
01Overview
The TL;DR.
Problem
Limited drops at ~5k visitors/month were chaotic comment threads — no auction infrastructure, no way for collectors to bid without alienating buy-outright shoppers.
Approach
Designed an inline auction widget that lives inside the PDP — buy-outright never moves, bidding overlays only when a drop is live.
Impact
Site-wide conversion +24%. Session time +52%. Repeat-visitor share +18%.
02Context
The business problem before the design problem.
Painted Juttay is a Karachi-based marketplace for hand-painted footwear — artists in Saddar paint canvas and leather shoes that buyers across Pakistan and the diaspora collect. ~5,000 visitors/month, ~1.8% baseline conversion, and a small but loyal group of collectors who would camp on Instagram comment threads when limited drops went live.
The drops were chaotic — there was no real auction infrastructure. The owner wanted real-time bidding without alienating the everyday browsers who just wanted to buy a pair outright. I was brought in for a 10-week sprint to design and ship both flows on a single PDP.
03Role & Team
What I owned, and who I worked with.
- Owned:Field research with collectors + artists, IA, all visual + interaction design, design system tokens + components, usability testing, dev handoff.
- Co-owned with founder:Problem framing, scope discipline, drop strategy, success metrics.
- Influenced:Real-time auction architecture, copy, artist-profile content strategy.
- Not in scope:Logistics/shipping flow, artist payouts, internal admin tooling.
Team
M
Me (Masfa)
Lead UX/UI Designer
H
Hassan A.
Founder & Product
Z
Zain K.
Full-stack Engineer
N
Nadia S.
Real-time Backend Eng
U
Uzair R.
Artist liaison (Saddar)
04Process
Ten weeks, four phases, Double Diamond.
Discover
Week 1-2
User research
12 collector interviews, 4 artist workshop visits in Saddar, funnel analytics.
Week 2
Competitive audit
Etsy, StockX, Bukalapak mapped on auction + craft storytelling.
Define
Week 3
HMW + principles
Auctions reframed as optional layer; buy-outright protected as default.
Develop
Week 4-6
Concepts + wireframes
3 concepts explored, inline-auction-on-PDP chosen.
Deliver
Week 7-8
Hi-fi + system
Final designs, 4 new tokens, 6 reusable auction components.
Test
Week 9-10
Test + handoff
Moderated UT with 8 users across Karachi + Lahore, 2 iterations, dev handoff.
05Discover · Research
Three insights that reframed the problem.
The owner's hypothesis was "we need an auction page." Research surfaced something more nuanced: collectors and browsers shared the same product but wanted opposite UI affordances.
5.1 Methodology
Qualitative
User interviews
- Participants 12 collectors + 4 artists
- Recruited via Instagram DMs + Saddar visits
- Criteria prior Painted Juttay purchase
- Format 45-min remote + in-person
- Synthesis Affinity diagram, 5 themes
Quantitative
Analytics & commerce audit
- Funnel data (GA4) 90 days
- Instagram drop comments 1,200+
- Session recordings (Hotjar) 48
- Support DMs mined ~280
- Baseline conversion 1.8%
5.2 Primary personas
Rida · 32 · Karachi
Art collector · watches limited drops
"I want to bid on a limited drop the moment it goes live — not refresh a tab waiting for it."
Goals
Real-time bid notifications · See artist details · Win at fair price
Frustrations
Comment-thread chaos · Missing drops · No bid history
Imran · 28 · Lahore
Casual browser · window-shopper
"I just want to buy a pair of shoes. Why is there a timer?"
Goals
Buy-outright with no surprises · Filter by style · Skip auction noise
Frustrations
Auction UI in the way · Pressure timers · Aggressive countdowns
5.3 Current-state journey map · Rida
01
Browse
02
PDP
03
Live auction
04
Bid
05
Won/checkout
Action
Scroll catalogue, tap product.
View art, sizing, materials.
See countdown + live bid feed.
Place bid, watch competing bids in real time.
Win notification, pay & ship.
Emotion
🙂 Curious
😍 Inspired
😅 Anxious
🎯 Focused
🎉 Triumphant
Pain points
Low friction.
Auction toggle confused buyers.
Mid-bid network drops killed sessions.
Decision paralysis on max bid.
Won users return at 80% rate.
5.4 Competitive audit
[ Etsy · screen ]
Etsy
✓ Familiar PDP for hand-made goods.
✗ No real-time auction support.
[ StockX · screen ]
StockX
✓ Auction infra is solid, transparent bid history.
✗ Generic — no story about the maker.
[ Bukalapak · screen ]
Bukalapak
✓ Local-market shopping habits well-served.
✗ No collectibles category.
06Define
From insight to a How Might We.
Problem statement
"How might we let buyers bid on hand-painted limited drops in real time" without confusing first-time visitors who just want to buy outright
6.1 Design principles
01
Auctions are optional
A live auction must never block a buy-outright flow.
02
Show the art at every step
The brush strokes, the artist, the story — visible from cart to confirmation.
03
Karachi-trust signals
Real artist photos, real shop address, real testimonials. Trust is local before global.
6.2 Success metrics — defined upfront
Primary
→ +15% conversion
Baseline: 1.8% · Goal: 2.5%+
Secondary
→ +30% session time
Engagement signal on drop days
Guardrail
No drop in buy-outright
Buy-outright completion must hold during live auctions
6.3 Information architecture · before → after
Before
Catalogue
→ PDP (single price)
→ Cart
→ Checkout
→ Limited drops (separate URL, comment thread)
After
Catalogue
→ PDP (inline auction widget when live)
→ Cart (buy-outright OR winning bid)
→ Live auction page (dedicated for drops)
→ Checkout
→ Artist profile (each shoe links to maker)
07Develop · Concept exploration
Three concepts, one shipped.
[ Concept A · separate page ]
A · Auction = separate page
Required users to leave the PDP. Browse-and-buy users never saw drops, and drop-watchers had to context-switch.
CHOSEN[ Concept B · inline mode ]
B · Auction = inline mode on PDP
Wins on context. Same product, same photos, optional bidding overlay when live.
[ Concept C · always-on ]
C · Always-on bidding UI
Overwhelmed buy-outright users. Felt aggressive, killed conversion in concept testing.
7.1 Iteration timeline · the "Inline auction widget" on PDP
v1
Full-width banner above buy button
Killed: Pushed buy-outright below the fold.
v2
Tabbed view: Buy outright | Bid
Killed: Users tabbed away and forgot which mode they were in.
v3
Persistent buy button + auction in a collapsible side card
Shipped: Both flows always visible, neither blocks the other.
08Design System
What I added to the system.
The redesign added a small but focused set of auction primitives to Painted Juttay's design library — reused across PDP, live-drop page, and artist profiles.
New tokens added (4)
color/accent/auction-live
#FC5000
color/surface/artist-card
#FCE3CF
radius/bid-card
16px
elevation/auction-pulse
0 0 24px rgba(252,80,0,0.18)
Reusable components (6)
LiveAuctionCard
used 5 places
BidHistoryList
used 3 places
ArtistChip
used 8 places
LimitedDropCountdown
used 4 places
WinNotificationBanner
used 2 places
ArtistProfileHeader
used 3 places
09Deliver · Annotated final designs
The shipped flow, screen by screen.
[ PDP with inline auction · final ]
Buy outright never moves.
The primary CTA stays anchored, no matter the auction state.
The primary CTA stays anchored, no matter the auction state.
Live bid feed.
Sticky side card with the 5 most recent bids, animating in real time via Pusher.
Sticky side card with the 5 most recent bids, animating in real time via Pusher.
Artist chip.
Tappable. Links to artist's full profile, past works, and Karachi shop address.
Tappable. Links to artist's full profile, past works, and Karachi shop address.
10Usability Test
Eight users. Three scenarios.
Moderated remote testing with 8 users across Karachi and Lahore — 4 collectors, 4 casual browsers. Two iterations during the test week — the auction side card got a slimmer mobile-first treatment after participants on smaller phones felt the bid list crowded the gallery.
Task scenarios + outcomes
- Buy a pair of hand-painted shoes outright.8 / 8
- Place a bid on a limited drop.7 / 8
- View the artist behind a product.8 / 8
Quant results
2:14
Median time-to-purchase (down from 4:48)
89
SUS score (above e-commerce avg of 72)
0
Users confused about which mode they were in
0
Severity-1 usability issues
11Accessibility
WCAG 2.2 AA, end-to-end.
Live-bidding UI can become inaccessible fast — pulse animations, time pressure, real-time updates. Every screen passed automated (axe-core) and manual (VoiceOver + TalkBack + Keyboard) audits before merge.
✓
Contrast
AA
Bid prices and CTAs above 7:1
✓
VoiceOver
100%
Bid history items announce "New bid: 4,200 rupees, 2 seconds ago"
✓
Tap targets
≥ 44pt
All bid actions meet minimum
✓
Reduced motion
Respected
Pulse animations on live auctions skip; static border instead
12Impact
What shipped, and what changed.
+24%
Site-wide conversion (from 1.8% to 2.23%).
Source: Production analytics, 60-day window
+52%
Average session time during live drops.
Source: GA4, 30 days post-launch
+18%
Repeat-visitor share month-over-month.
Source: Cohort analysis
-43%
Drop in "auction confusing" support emails.
Source: Email ticket triage, 60 days
"Masfa understood that our customers want to BUY shoes, not learn auction mechanics. The widget she designed is the reason limited drops actually convert now."
[ Client Name ]
[ Role · Painted Juttay ] — replace with real attribution
13Reflections
What I would do differently next time.
What worked
- Insisting buy-outright never moves — kept the auction noise from killing the everyday store.
- Real artist photos in usability tests — buyers connected with the people, not just the product.
- Real-time architecture decided in week 2 with engineering — saved a polling-vs-WebSocket rework in week 8.
What I would do differently
- Test on slow Karachi 4G earlier — bid latency on edge networks needed work that I didn't catch until week 9.
- Build artist-onboarding flow alongside buyer flow — artists are users too, and we treated them as an afterthought.
- Document the auction-state machine more rigorously — engineering had 3 rounds of back-and-forth I could have prevented.
13.1 Acknowledgments
Big thanks to Hassan (founder) for trusting the inline-auction call, the Painted Juttay artist collective for letting me into their workshop in Saddar to see the hand-painting process, and the 16 user-test participants across Karachi and Lahore for unfiltered feedback. Live at paintedjuttay.com.
Building an e-commerce or marketplace product? See my services, browse the rest of my work, or start a project.
Related case studies.
All projectsno obligation. I read every inquiry myself, usually reply in 24h.
Based in
Karachi, PakistanUTC+5