UI/UX Design by DJGraphix

Case Study // Project 02•UI/UX Design (Web + Mobile)

WhiteRobe — Medical Uniforms & Healthcare Apparel Commerce

Clean, trustworthy e-commerce shopping experience across Web & Mobile with custom embroidery configurators and size recommendation UX.

PROJECT

WhiteRobe

MY ROLE

UI/UX Designer

PLATFORMS

Web + Mobile

SERVICES

UX Design · UI Design · Responsive Design · E-Commerce UX · Mobile App UX

Attribution Notice:

DJGraphix was responsible for the UI/UX design architecture, user flows, and wireframes. Product development and technical implementation were handled separately by other development teams.

View Live Website View Android App Discuss Similar Project

DJGraphix Design Canvas // WhiteRobe

High-Fidelity Interface Architecture

https://whiterobe.in/

WhiteRobe — Medical Uniforms & Healthcare Apparel Commerce Desktop Web UI

Primary Desktop Web Experience

9:41

100%

WhiteRobe — Medical Uniforms & Healthcare Apparel Commerce Mobile App UI

Native Mobile Application

Section 01

Project Overview & Scope

Comprehensive UX blueprinting and visual system engineering.

Created the complete UI/UX case study for WhiteRobe, a specialized medical apparel brand. Designed the unified web storefront and Android mobile application, focusing on high-trust clinical aesthetics, custom name/logo embroidery customization, and streamlined multi-size hospital orders.

My Role — UI/UX Designer

Led the entire UI/UX design lifecycle from user journey mapping to final screen components.
Built structured component tokens, typography rules, and responsive auto-layout structures.
Delivered high-fidelity handoff specifications for separate frontend development teams.

Section 02

Design Challenge & Approach

Identifying friction points and formulating ergonomic user flows.

The Core ChallengeDesign Audit

Medical professionals require specialized scrub sizing, fabric durability specifications, and custom hospital department embroidery, which generic e-commerce templates fail to communicate clearly.

Customizable Research Slot:

Detailed return rate data, medical buyer survey responses, and checkout analytics can be added here when provided.

The Design Approach

Engineered a clean, reassuring aesthetic pairing high-contrast product photography with interactive embroidery customization modals, fabric spec callouts, and an ergonomic mobile checkout flow.

Section 03

User Flows & Interaction Architecture

Step-by-step progression mapping frictionless user paths through key product workflows.

Specialized Catalog Filter

Filter by antimicrobial fabric, color codes, size sets (XS to 3XL), and unisex/tailored cuts.

Embroidery & Custom Branding

Step-by-step custom doctor name, title, and institutional logo placement configurator.

Smart Size Guide & Fit Assistant

Interactive measurement calculator reducing return hesitation for healthcare teams.

Frictionless Mobile Checkout

Single-page order confirmation with address autocomplete and instant UPI/card payment.

Section 04

Design System & UI Components

Atomic component library with structured color tokens and accessible typography hierarchy.

Color Palette Tokens

Clinical Navy

#0F2A4A

Caduceus Blue

#0284C7

Pure Cotton

#FFFFFF

Sterile Slate

#F1F5F9

Accent Teal

#0D9488

Typography Scale

Plus Jakarta Sans

Calibrated for high data density, clear contrast ratios, and comfortable mobile reading.

Component Library Specs

48 E-Commerce Components

Figma Auto-Layout 5.0

Interactive component states (Default, Hover, Focused, Disabled, Active).

Section 05