Project:
Fashionr™ by Clothing Tech - 3D Clothing Creator
Role:
Senior UX/UI Designer
Objective:
This project aims to enhance or create the UI and interactions of the application as it pertains to the user utilizing the application of the SaaS product. The goal is to create an exceptional experience and drive user adoption and engagement. Influence and collaborate with Stakeholders and product and development teams to ensure seamless user interactions.
Challenges:
Create, rework, and update application features, user journies, wireframes, interactions, micro-interaction, and updated icons to enhance responsiveness, accessibility, and intuitive designs that serve the users needs.
Process:
Assessment + Exploration + Design + Production + Deployment.
Tools:
Figma, Adobe Creative Suite, Unity, Google Teams, Pen and Paper, Miro, Google products, Collaborations, Azure, Stakeholder reviews, Competitive Analysis, Github.
Methods:
Scrum, Agile
Clothing Tech Case Study: Transforming the Fashionr Application
When I joined Clothing Tech, the Fashionr application faced a major hurdle: we didn't fully understand our users. Without this crucial insight, we couldn't effectively address their pain points, leading to a product that failed to meet their needs. My mission was to bridge this gap, and my journey began with one question: How can we make Fashionr the go-to tool for fashion designers?
Application Issues
To truly understand our users, I embarked on a thorough research journey. By conducting A/B tests, interviews, and reviewing user interactions, I uncovered the real pain points and critical touchpoints within our system. This user-centric approach was the cornerstone of our transformation.
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.
Platform Refresh
Users encountered a myriad of issues with the Fashionr application. Their feedback painted a clear picture of frustration and inefficiency:
The red outline indicates the problematic areas based on user research and feedback.
With these insights in hand, I initiated a comprehensive platform refresh. While we tackled numerous problems, four key issues stood out:
Despite these improvements, the journey was far from over. There were still many areas requiring attention, but we were on the right track.
-
Unclear Button Labels: Users struggled to understand button functions.
-
Background and Button Highlight Clash: The design hindered readability.
-
Inconsistent Dropdown Spacing: The visual messiness distracted users.
-
Unclear Icons: Icons didn't resonate with our fashion designer users.
Final Design Refresh
The latest version of Fashionr was a testament to user feedback and meticulous UI methodologies.
SCROLL LEFT AND RIGHT TO SEE THE DIFFERENCE
Notations
-
Streamlined Menus: Combined left and right menus into a single, dynamic menu.
-
Simplified 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.
User Journey and Features
One of the most significant improvements was simplifying the use of pop-up windows, preventing user frustration. The Component Manager, previously a source of confusion, was overhauled. By grouping the Piece, Seam, and Openings Manager together, users could now access these tools with a simple right-click.
New 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 creation of Tech Packs, crucial for guiding clothing production and communication between designers and manufacturers.
By designing a user-friendly pop-up window for Tech Pack creation based on feedback, we simplified this process. Collaborating closely with developers, we ensured the implementation was accurate, efficient, and satisfying for users.
Location
Last Ideation
Micro Interactions
Micro interactions played a vital role in enhancing user experience. The bug report micro interaction, for instance, showed the user flow from start to finish when a bug was reported, greatly improving user support.
-
Initial Sketches: Developed a series of sketches.
-
Wireframes: Turned sketches into wireframes.
-
User Journeys: Created detailed user journeys.
-
Testing: Thoroughly tested the user journeys.
-
Optimization: Selected the best user journey based on feedback.
However, several micro interactions were eliminated as stakeholders prioritized feature updates and bug fixes. This decision, while necessary, led to long-term issues with unclear and inadequate user feedback.
Impact
User Success
Enhanced Efficiency: Reduced customer journey from 10 minutes to 2 minutes, significantly decreasing pain points.
Productivity Boost: Implemented over two dozen new or updated features, enhancing user productivity.
Cost-Saving Features: Introduced multiple money-saving features that supported user productivity.
In conclusion
Our journey with Fashionr was marked by a relentless focus on understanding and addressing user needs. While we made significant strides in improving the application, the road ahead required ongoing effort and adaptation. Users demanded personalization and customization—features already implemented by our competitors. 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.
<
In the works
One of the things that the user was looking for on our 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.
