AJIO: Private collection pages
2020
Worked on the user interface for the menswear and womenswear PLP pages and the private collection page, used keyword analysis and trending topics to direct traffic to the pages.
Live : August 2020 Onwards
Agency
AJIO ,Reliance Retail
(Bengaluru)
Tools
Adobe XD
Adobe Illustrator
Type
Researcher
UX Designer
The Ask
Ask – Improve existing Fusion 1.0 design system components by enhancing design, adding guidelines, and ensuring usability through testing.
Role – Component design, research for improvements, quality testing, and guidelines creation.
What is a Progress Bar
A progress bar visually represents the completion status of a task or process, helping users quickly understand how far along they are.
Single Progress Bar – Displays a continuous value from 0% to 100%.
Incremental Progress Bar – Divided into a maximum of five steps, allowing users to choose the step count as needed.
Usability & Current Component Audit
To evaluate the existing progress bar, we explored its real-world usage across different user journeys. This involved: Scenario Mapping, Designer Discussions, Component Audit.
Scenario Mapping – Identifying all contexts where the progress bar appears, from short tasks to multi-step flows.
Designer Discussions – Engaging with fellow designers to understand requirements, pain points, and potential enhancements.
Component Audit – Reviewing how the progress bar performs in various features, including its behavior on responsive layouts and across devices.
Data Collection & Discovery
A thorough competitive analysis was conducted to understand how progress bars are implemented across domains and design systems.
Cross-Domain Research – Exploring banking, e-commerce, productivity, and other sectors to see how progress bars adapt to different user needs, complexity levels, and task lengths.
Practical Testing – Trying out multiple applications (both familiar and new), capturing screenshots to document patterns, styles, and interaction behaviors.
Design System Benchmarking – Studying multiple design systems to review specifications, guidelines, states, and accessibility notes provided for progress bars.
Best-in-Class Research – Identifying the most effective design and interaction choices based on findings from previous user scenarios and usability audits.
Key Insights Extraction – Summarizing common strengths, differentiators, and opportunities for improvement that could be implemented in our own component.
Handling hundreds of screens with multiple micro-flows — managing versions and handoffs was starting to get messy.
Existing Component Audit
Functional & Visual Analysis – Revisited the component after data collection to analyze how it works across scenarios. Compared it with similar components, checked behavior on responsive screens, and validated key features like value range flexibility (0–10 increments). Reviewed layout, typography, spacing, and states to ensure consistency. Noted how text, progress fill, and variants were displayed across themes.
Opportunities Identified – Recognized strengths such as ease of adjusting progress values, and gaps like missing target indicators, limited color options, and room for richer interaction states.
Defining Component Properties
In this phase, I defined and documented the full set of component properties—such as size, color, states, variants, and interaction patterns—ensuring designers and developers could use them consistently. For accessibility, I incorporated considerations like contrast, keyboard navigation, and screen reader support.
Design Exploration
Sketched and tested multiple design options in Figma, exploring strokes, colors, and states. Organized variant combinations for clarity and refined them through continuous feedback from the design leader.
Component Design
Created technical specifications detailing all properties and states for both Single Progress Bar and Incremental Progress Bar. Features included various labels, Boolean properties, and categorization for clarity. Established clear variant labels and layer naming in Figma to maintain quality and avoid confusion, especially given the large property set. Defined a clear default state for each component to guide consistent usage across the design system.
Visual Quality Assurance
This phase involved rigorous testing of the final component to ensure flawless performance. I tested character limits with long text strings, resized the component to check minimum width, and validated all states — error, warning, and success — across incremental values from 0 to 100. The goal was to eliminate risks for both designers and developers. Once testing was complete, I created a detailed spec guide and handed off the component to developers.
Final Guidelines & Launch
This phase involved rigorous testing of the final component to ensure flawless performance. I tested character limits with long text strings, resized the component to check minimum width, and validated all states — error, warning, and success — across incremental values from 0 to 100. The goal was to eliminate risks for both designers and developers. Once testing was complete, I created a detailed spec guide and handed off the component to developers.
