Role
UX/UI Designer
Company
Alpsdeal Internet Services
Timeline
Mar 2020 – Jul 2021
Platform
Web Desktop & Mobile
1
BLK Sport's Design Your Own (DYO) platform lets teams and athletes build apparel from scratch in real-time 3D — built on WebGL, spanning billions of combinations of garment, colour, fabric, cut, and graphics.
That power was the problem. Offering everything at once left users overwhelmed, slow to decide, and prone to abandoning the session before ever placing an order.
Tools
Figma, Adobe Creative Suite, Balsamiq, Web GL, Blender
My Focus
UX Research, Interaction Design, Low and High Wire frame, Prototyping
2
Early sessions on the DYO platform revealed a consistent pattern, not a one-off complaint.
Users spent excessive time browsing without making decisions
Many restarted their design multiple times out of confusion
Mobile users struggled most — the customisation panel felt cramped and cluttered
Abandonment peaked at the options-selection stage
3
Discovery combined direct interviews, live observation, behavioural data, and competitive context.
"I don't know where to start — there are so many things to customise."
"I kept changing my mind because I couldn't visualise how it would look."
"On mobile, the buttons were too small and the panel kept jumping."
"I just wanted a few popular templates to get started from."
INTERVIEWS
12 users — team managers & athletes
USABILITY TESTING
8 live sessions on prototype
SESSION ANALYSIS
Heatmaps & click paths
BENCHMARKING
Nike By You, Adidas Mi, Custom Ink
Rajkumar, 34 — Team Manager
Primary persona · decision maker · mobile-first
Goal
Order matching kits for a 20-player cricket team
Time Available
15–20 minutes max
Frustration
Too many decisions, no starting point
Key Trigger
Visual confirmation of the final look
4
Research findings became a How Might We framework to focus the design response.
How might we help users start designing quickly without feeling lost?
How might we reduce the number of visible options at any one time?
How might we make the 3D preview the hero of the experience?
How might we optimise the mobile experience for team managers on the go?
How might we build confidence at each step so users commit to decisions?
5
Five moves, working together, to turn overwhelming choice into guided momentum.
Progressive disclosure
A step-by-step guided flow replaced the all-at-once options panel — from broad choices like garment style down to fine details like graphics and player names.
Template-first approach
A curated template gallery became the starting point, so teams begin from a head start instead of a blank canvas.
Smart defaults & social proof
Popular colour and fabric combinations carried subtle "Most Popular" badges, nudging undecided users toward common, confident choices.
Mobile-optimised panel
A bottom-sheet drawer, icon-based category tabs, and larger touch targets replaced the cramped desktop-first sidebar.
Live 3D preview as anchor
The model stayed visible at all times, updating instantly with every change — plus a Zoom & Rotate gesture for closer inspection before committing.
6
Five moves, working together, to turn overwhelming choice into guided momentum.
STEP 1
Mapped end-to-end user flows for teams and individuals
STEP 2
Sketched low-fi wireframes — template gallery, step-by-step flow
STEP 3
Built interactive mid-fi prototypes in Figma for testing
STEP 4
Ran usability testing with 6 users, iterated on findings
STEP 5
Delivered pixel-perfect high-fidelity UI with a full design system
Key decisions along the way: a single long form became a 5-step wizard, one decision per step; a persistent summary panel cut backtracking; a "Quick Start" mode served returning users; colour swatches became large tappable tiles instead of dropdowns; and a "Share Preview" feature let managers get buy-in from the group before ordering.
7
The redesigned DYO shifted from a complex configurator to a fast, confident, creative flow.
Faster time to first design commitment — users got started sooner
Lower mid-session abandonment at the options-selection stage
Higher mobile completion rates, driven by the bottom-sheet panel
Positive feedback on the template gallery as a starting point
Stronger team purchase confidence via Share Preview
8
More options isn't better UX — progressive disclosure is essential in high-complexity products
Templates and smart defaults are powerful conversion tools that solve the blank-canvas problem
Mobile-first thinking has to start at the wireframe stage, not arrive as an afterthought
Real-time visual feedback is the strongest trust signal a customiser can offer
B2B team purchases are rarely made alone — sharing and collaboration features matter
This project meant balancing an already-impressive WebGL engine with human simplicity — every decision tested against one question: does this make the user feel more confident and in control? Next, I'd explore AI-powered colour suggestions based on team colours, and a real-time collaborative editing mode so entire teams could design together.