ATANY
From ATA to Wardrobe: Designing ATAny’s Custom Fit Experience
ATANY – Custom Tailored Clothing
Startup / MVP Project
Lead Senior UX/UI Designer
Tools: Figma, Illustrator, Shopify
Custom Shopify Theme + proprietary
sizing algorithm
THE CHALLENGE
ATAny set out to rethink how people shop for clothes online. Most e-commerce brands still follow the same formula: Size chart, model photos, and a leap of faith.
We wanted to reverse that. Instead of starting with the product, we’d start with you.
Project challenges:
Introducing a proprietary sizing algorithm (the ATA Calculator)
Educating customers on how sizing worked without overwhelming them
Supporting subscription and easy reorders for loyal customers
Integrating the fit configurator seamlessly into a full Shopify store
Goal: Create a guided, confidence-building journey—beginning with a friendly Fit Quiz, matching customers with their perfect size, and then letting them explore personalized styles and colors without second-guessing.
GOAL
Create a guided, confidence-building journey—beginning with a friendly Fit Quiz, matching customers with their perfect size, and then letting them explore personalized styles and colors without second-guessing.
MY ROLE
As Lead Product Designer, I guided the project from discovery to launch:
Conducted discovery workshops with the founders and core team
Defined the end-to-end user journey
Designed and tested the Fit Quiz experience
Built Shopify custom components for personalization
Designed mobile-first with inclusive features like high-contrast color palettes, readable typography, and touch-friendly controls to ensure a smooth experience for all users
Discovery & Definition (MVP Blueprint)
We kicked off with three MVP workshops to align on:
User needs and business goals
Operational workflows for customers, associates, and admins
Feature prioritization and feasibility
We followed the MVP Blueprint format to ensure structure and inclusivity in ideation. These sessions generated a wide range of ideas, which were organized into themes and prioritized into actionable user stories.
User Stories & Themes
From the MVP workshops, we distilled a wide range of stakeholder and customer inputs into four core themes:
Customer Experience – Fit onboarding via the ATA Calculator, clear navigation, streamlined reorders, and subscription flexibility
Education & Guidance – Clear sizing explanations, fabric benefits, and contextual recommendations without overwhelming users
Associate Tools – Fast customer account management, in-store fit adjustments, and order prioritization for urgent needs
Admin & Backoffice – Algorithm version control, SKU/content management, and tracking of returns and remakes
These themes provided a clear blueprint for wireframing, ensuring the MVP addressed real user needs while supporting operational and business goals.
User Flows
With our prioritized themes in place, the next step was mapping how each user type would move through the system.
Sample: Online Purchase Flow
The process begins on the storefront, where customers can browse collections or be guided directly into the Fit Quiz. They select model, fit, color, fabric, and collection type while the ATA Calculator determines their custom size. Once the size is confirmed, users proceed through checkout, triggering backend processes that generate patterns via Gerber AccuMark and move the order into production.
By visualizing these flows early, we were able to spot friction points—such as redundant input screens and unclear fabric options—and refine the experience before moving to wireframes.
Wireframes
With the user flows validated, the next step was translating them into low-fidelity wireframes.
Sample Wireframe: Style-First Customization Flow
This wireframe represents the journey for users who prefer to choose their style first, then customize their fit. The flow begins with style selection, followed by fabric, color, and detailing options. Once the aesthetic is set, the ATA Calculator generates a custom size profile.
Visual Design
Once the wireframes were approved, I applied ATAny’s visual brand identity to bring the experience to life.
Brand Guidelines
The client’s brand guideline defined logo variations, primary and seasonal color palettes, typography, and apparel-specific branding details—serving as the creative foundation.
Component Library
I built a Figma component library to ensure consistency, speed up iteration, and provide a single source of truth for developers.
Screen Design Explorations
Explored multiple visual approaches for the key flows, balancing brand personality with usability, and validating that the digital experience conveyed a premium yet approachable feel.
Prototypes
Creating a Custom Size
As the design matured, I created a set of high-fidelity prototypes to bring the ATAny experience as close to “real” as possible before development began. These prototypes weren’t just static mockups—they simulated interactions, transitions, and microanimations so stakeholders could feel the experience in action.
The prototype displayed was one of several key high-fidelity flows. It allowed users to tailor details—such as fabric, color, neckline, and sleeve style—based on the custom fit profile generated by the ATA Calculator.
Why this mattered:
Interaction realism: The clickable prototype gave stakeholders and testers a true sense of how quickly and intuitively a shopper could explore customization options.
Usability testing: Testing with a realistic UI reduced the “imagination gap” for participants, leading to more accurate feedback.
Visual consistency check: It confirmed that the brand system, typography, and component library worked together harmoniously at full fidelity.
While this is just one example, the complete set of prototypes covered the entire journey—from Fit Quiz onboarding to post-purchase confirmations—ensuring the design was validated end-to-end before handoff.
Shopify Theme Development
While the ATA Calculator was custom, the store also needed a cohesive theme for pages like home, about, contact, and product collections
Wireframes for Shopify Store
Established structure, navigation, and content placement, with clear pathways to the Fit Quiz from multiple points.
Visuals for Shopify Store
Applied brand visuals to all storefront pages, creating a premium and responsive design while integrating the configurator into the PDP flow.
Once the theme was delivered, the client was able to add and customize content directly in Shopify, updating copy, images, and sections without developer involvement. This ensured the storefront could evolve over time while maintaining the design system’s integrity.
Outcomes
At the time I transitioned off the project, the platform was in the final stages of development. While KPIs and metrics were not yet available, my work delivered:
Complete, approved user flows for all core experiences
Mobile wireframes supporting the full configurator
A cohesive visual design aligned to ATA’s premium positioning
A ready-to-populate, fully configurable Shopify theme
What I Learned
Early alignment across teams is critical to avoid rework
Operational workflows—not just customer flows—shape the overall experience
Designing complex configurators within Shopify requires thoughtful constraints and clear developer documentation
Next Steps
The platform is currently in testing and preparing for launch.
You can try at https://atanyforall.com/