top of page
Clothing Tech Logo.png

Fashionr™ by Clothing Tech - Digital 3-D Clothing Creator for fashion designers.
 
Created for apparel brands, Fashionr™ by Clothing Tech is an innovative SAAS application design software for fashion designers that simplifies processes by using AI tools, component libraries, and automated features that reduce cost, time, and design decisions all in one solution. 

 

Role: Senior UX/UI Designer

Duration: 2 years

Methods: Scrum, Agile, and Design Collaboration


Deliverables:  

  • Feature Creation and Updates

  • User Journeys Mapping

  • Wireframes

  • Interaction Design

  • Micro Interactions

  • Responsive Design

  • Accessibility Design

  • Icon Design

  • User Dashboard Creation  

  • Improving the end-to-end user journey

Tools:

  • Figma, Adobe Creative Suite, Unity, Google Teams, GitHub, Azure, Microsoft Teams, Pen and Paper, Miro, Google products, User Interviews, Competitive Analysis, Salesforce, Java, Fig Jam, Pen and Paper

Clothing Tech Mock Up 1.png
Clothing Tech Platform.png

Tackling the Challenge of Transforming the Fashionr Application

In this section a major hurdle for me was to move the application from BETA to ONBOARDING users. My mission was to bridge this gap, and my journey began with one question: How can I make Fashionr the go-to tool for fashion designers?

This Included:

  • Minimizing and streamline the the user journeys.

  • Update, review, and improve all features.

  • Clear, clean, and make seamless responsive modals, icons, and interactions/ micro interactions. 

Problems on the customer jounrey 

To truly understand our users, I conducted A/B tests, interviews, and reviewed user interactions. I uncovered the real pain points and critical touchpoints within our system.

Journey Map 2.png

User feedback and problems

  • Inconsistent design that confused users.

  • Poor navigation that made the app hard to use.

  • Non-intuitive icons and labels that led to missteps.

  • Long user journeys that wasted valuable time.

  • Inadequate error handling that left users stranded.

  • Insufficient feedback that made the app feel unresponsive.

  • Overuse of modals and pop-ups that interrupted the workflow.

 

Client on Platform.png

Addressing the applications issues

Users encountered a myriad of issues with the Fashionr application. Their feedback painted a clear picture of frustration and inefficiencies

The red outline indicates the problematic areas based on user research and feedback:

  • Accessibility issues with the colors, labels, and spacing.

  • Icon's are not understandable and unclear responsiveness to the user. 

  • Inconsistent distracting models that would pop up and be off screen.

  • User Journey "intended" next steps were not clear.

  • Overall the product feels and looks Beta/ not appealing to users.

Changes, updates, and getting somewhere

With these insights in hand, I initiated a comprehensive platform refresh.

 
What I focused on:

  • Alignment and clearing up spacing issues

  • Removing unnecessary lines, icons, and wacky coloration.

  • Clearing up icons and making them universally understandable/ readable. 

  • Button placement and intended action.

The issues that I encountered was all the items were build in Figma and deployed in Unity- which was not as easy to fix.

Red outlines indicate issues that the users had issues with in the program.

Despite these improvements, the journey was far from over. There were still many areas requiring attention, but I was on the right track.

Responsive buttons and icons

Interactions.png
Updated Icons for UDF.png

Component icon library examples

Ready for a big reveal

The latest version of Fashionr was a testament to UX/ UI meticulous methodologies.

SCROLL LEFT AND RIGHT TO SEE THE DIFFERENCE

Things were looking up

FINAL Notations based on feedback:

  • Streamlined Menus: Combined left and right menus into a single, dynamic menu.

  • Simplified Color Palette: Limited to three colors, reducing grey tones.

  • Clear User Feedback: Clearly displayed current tasks and tools.

  • Clutter-Free Layout: Aligned elements neatly with a light grey background.

  • User-Friendly Tools: Enhanced the top bar tools and consolidated tool menus.

  • Prominent Project Names: Ensured project names had dedicated space for visibility.

  • Simplified Right Menu: Streamlined the main area, removing unnecessary lines and boxes.

Easy roadmaps, simplified modals

One of the most significant improvements was simplifying the use of pop-up windows, preventing user frustration.

 

To illuminate frustration, each Pop-Up/ Modal was reviewed, tested, and improved.

The Finishing Manager, previously a source of confusion, was overhauled and I grouping the Piece, Seam, and Openings in the Finishing Manager together. Now users can access these tools with a simple right-click.

I designed and tested 4 different user journeys for the Finishing manager. I discovered that this particular one was the most user-friendly.

Finish Manager User Flow.png
Cloting Tech Finish Manager

Key feature development

Our primary goal was to make the app indispensable for fashion designers and technical designers. To achieve this, we prioritized understanding their challenges and requirements.

 

One essential feature was the access and use of Tech Pack , crucial for guiding clothing production and communication between designers and manufacturers.

​I conducted interviews and developed multiple options of a user-friendly pop-up/model window for Tech Pack focusing on  simplifying process. Collaborating closely with developers, we ensured the implementation was accurate, efficient, and satisfying for users.

Tech Pack Location.png

Location

Last Ideation

Developing feedback loops and progress steps 

Interaction/ Micro interactions played a vital role in enhancing user experience.

 

The Session Timed Model out  micro interaction, for instance, showed the user flow from start to finish when a session timed and needed to reboot.

 

This greatly improved  greatly improving user's journey and trust in the application.

Timed Out Options.png

Delight users and contribute to business success

Impact:

  • Enhanced Efficiency

    • ⏱️ Reduced user journey from 10 minutes to 2 minutes for key features, significantly decreasing pain points.

  • Productivity Boost:

    • ✅ Successfully implemented over two dozen new or updated features, enhancing user productivity.

  • Cost-Saving Features​

    • ⏳ Reduced lead times from 6 months to 3 months on projects.
      💰 Introduced multiple money-saving features that supported user productivity.

Three Words for CT.png

Last notes: Personalization

One of the things that the users wanted  was personalization and customization. Our competitors have already implemented these features, so having personalization and customization will be a significant value addition to the Fashionr system.

Clothing Tech Dark Mode.png

Notations and learnings

My journey with Fashionr and Clothing Tech was marked by a relentless focus on understanding and addressing user needs.

 

While I made significant strides in improving the application, the road ahead required ongoing effort and adaptation. The system had significant coding issues which cause multiple bugs to trigger that impeded onboarding and sales.

 

As innovative as the Fashionr was, the users demanded personalization, customization features, and familiarity/ consistency  that by our competitors had already perfected. Leaving the system lacking some fundamental setbacks. Adding these elements will be crucial for Fashionr’s continued success and user satisfaction.

This case study underscores the importance of empathy-driven design, continuous feedback, and a commitment to excellence in creating impactful user experiences.

Clothing Tech Team

Owner
CMO and Sales (2 People)
UX team (7 people)
Developers  and System Software Team (8-10 people)
Client Service Team (3 People)
External Marketing Team
External Business and Content Team 
Users and Onboarded Clients

External Links

bottom of page