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
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.
Embarked on THE USER JOURNEY
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.
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.
Addressing the Issue Head On
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.
I AM GETTING SOMEWHERE
With these insights in hand, I initiated a comprehensive platform refresh.
What I focused was:
-
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.
IMPROVING Buttons and ICONS
Ready for CLients
Final Design Refresh
The latest version of Fashionr was a testament to UX/ UI meticulous methodologies.
SCROLL LEFT AND RIGHT TO SEE THE DIFFERENCE
What was WORKING?
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.
Simplifying the Pop-Ups and USER Steps
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.
KEY FEATURE DEVELOPMENT FOR APPLICATION
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.
Location
Last Ideation
Developing Better Feedback Loops
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.
USER SUCCESS and BUSINESS SUCCESS
My 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 form 6 months to 3 months on projects.
-
Introduced multiple money-saving features that supported user productivity.
-
The LAST ITEM
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.
My 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
Click here to visit The Clothing Tech Website and the Clothing Tech Marketing Video.