Designing the world's first collaboration workspace for fashion designers
Dtail Canvas brings collaborative whiteboarding to the digital fashion design workflow
Platforms
About Dtail Canvas
Dtail Canvas is used by world-leading fashion brands to plan and analyze their collections.
By linking 3D samples with product data, it offers a comprehensive and visual overview of collections, thus enabling better decision-making.
The Project
Background
Dtail Canvas was originally built for data visualization to support the planning and analysis of fashion collections.
At its core is a powerful product grouping feature to organize collections based on parameters such as region, style, or margin.
Problem
Users were increasingly applying it to other use cases, like presenting product ideas or reviewing collection concepts.
To achieve this, they combined Dtail Canvas with tools like Miro, FigJam, and PowerPoint, leading to fragmented and cumbersome workflows.
Goal
Our goal was to develop a clear understanding of these new use cases for Dtail Canvas.
Based on the findings, we then had to evolve Dtail Canvas into a collaborative workspace without compromising existing functionality.
Project Kick-off
The prospect of tapping into these new use cases presented a huge business opportunity. However, it was clear that this would be a major and long-term effort.
With the support of executive leadership, we formed a dedicated project team, driven by a Product lead, a Tech lead and me as the Design lead.
Key Objectives
Expand Dtail Canvas to support creative ideation and review processes
Enable collaboration and seamless handoffs for all roles involved
Introduce the new capabilities without disrupting existing workflows
Project Leads
Design Lead
Product Lead
Tech Lead
Key Internal Stakeholders
Key External Stakeholders
UX Roadmap
To help us navigate the project's complexity, I created a UX roadmap to highlight the key phases, alignment moments, and deliverables. This helped us spot dependencies, understand timeframes, and establish benchmarks for progress.
The Research Challenge
We conducted preliminary interviews with clients to better understand their needs.
However, fashion brands like Nike and H&M guard their design processes as trade secrets, so they were against our idea to also conduct interviews with individual users.
In order to gather user insights despite these concerns, I convinced our clients to allow focus groups in the presence of a client manager.
In parallel, we also utilized micro surveys in our existing product to collect anonymized feedback.
Collection Methods
3 focus groups with 4-6 participants each
100+ responses across 4 separate micro surveys
Understanding the Ecosystem
Our research allowed us to refine our understanding of the digital fashion design process, the roles involved, and the key handover and collaboration moments.
Finding Our Place
Our research revealed how Dtail Canvas was used in the digital fashion design process in ways that went beyond data visualization.
Dtail Canvas was originally built to support the Assortment Planning phase.
However, we found it was also used in the Research phase to create mood boards.
In addition, it was used in the Review phase to present collections.
Personas & Journeys
These use cases were new to us. To better understand them, I created personas for the key roles involved: The Concept Designer, Product Designer and Planner.
With a journey map for each persona, I highlighted their activities, pain points, and touch points with Dtail Canvas.
Exploring the Competition
A study of our direct and indirect competitors proved that we were hitting a gap in the market, as none of them offered the capabilities we were targeting.
Consequently, I shifted my focus to collaboration tools used to create mood boards and presentations to understand their strengths and weaknesses and strategize how we would further differentiate Dtail Canvas.
Ideation & Prioritization
Equipped with a new understanding of both user needs and best practices, we brainstormed basic features.
We then applied MoSCoW prioritization to narrow them down to a feasible MVP level.
Bring to front/back
Grouping
Search board
Comments
Spotlight me
Sharing
Drag & drop templates
Timer
Image manipulation
Connectors
Presentation mode
"Last Seen" Information
Stamps
To-do list
Field locking
Notes
Typing indicator
Notes
Shapes
Products finder
Reactions
Copy + paste external
Drag, resize, rotate
Search
Avatar stack
Version history
Onboarding
Object alignment
Object styling
Live chat
Wireframing & Concept Development
I created early sketches to translate the prioritized ideas into tangible concepts.
These served as the initial blueprint for our product, allowing me to visualize the features and user flows, and enabling further discussions and refinements.
Prioritized Concepts
Free mix of 3D assets, images and text
Commenting on Products
Improved product grouping
Multiplayer
Avatar stack
Concept Testing
To validate the ideas in the early stages, I presented a combination of Figma prototypes and pre-populated Miro boards to a select group of users.
This combination enabled me to rapidly transform sketches into experiences that convey the different concepts.
Touchscreen Optimization
We knew that Dtail products were frequently used on touchscreen devices in showroom environments.
From the beginning, I incorporated touch-friendly design considerations into my process. I ensured elements were appropriately sized for touch interaction, and designed navigation for an intuitive touch experience.
Final Designs
Based on the findings from the user research and the concept tests, I refined the explorations into detailed concepts. The following section presents the resulting designs.
Free mix of products and objects
With the ability to add and edit rich objects such as images, shapes, text and sticky notes, we successfully enabled users to create mood boards without the need for external tools.
Refined Product Grouping
We also improved the existing grouping capabilities in a few ways.
Now, users were able to drag and drop entire assortments onto the Canvas, making the creation of groups faster.
In addition, the redesigned and contextual made it easier to modify groups.
Contextual Side Panels
Previously, users had to open the rich product info in a new page.
With the new contextual side panels, users could stay in the Canvas, seeing only the information that was relevant to their specific action.
Seamless Mobile Experience
We made sure that key functionalities, such as commenting, were usable on displays of any size.
For this, I optimized the design for smaller screens with touch-friendly , prioritizing readability and ease of use.
Usability Testing
Testing was key throughout the design process. We initially conducted usability tests with prototypes, and refined the designs based on the user feedback.
Key Results
Significant reduction in Time on Task for all key user actions
84% average Task Completion Rate
MVP Development
To accelerate development, we collaborated with Agora.io, which provides a set of flexible tools and APIs to build feature-rich digital whiteboards.
By handling the tech of a real-time workspace, the integration with Agora supercharged our development process and allowed us focus on refining the user experience.
Beta Testing
As the project advanced, we introduced an early build for beta testing. This allowed us to spot technical issues and evaluate real-world performance.
This combination of usability and beta testing gave us a 360-degree view of our product.
As a result, we were able to ensure we delivered a well-rounded, user-centric product at launch.
User Feedback
The way this tool has evolved is impressive.
We're really enjoying the collaborative aspect of the updated Dtail Canvas.
The new version of Dtail Canvas has proven to be a fantastic tool for collaborative collection planning. We're able to visualize, analyze and discuss all in one place. It's a huge step forward.
The new features have already made our brainstorming sessions more dynamic.
It's clear that this update was designed with fashion professionals in mind. It’ll save us a ton of time.
The new Canvas has the potential to bring our planning and brainstorming sessions to life.
Impact
We made significant changes to Dtail Canvas, so measuring their impact was essential. While A/B testing was not feasible, we tracked user engagement metrics such as session duration, product imports and usage of various features.
Session Duration
This was a key metrics to determine if we had reduced workflow fragmentation.
We saw a significant increase, indicating that users achieved tasks within Dtail Canvas that previously required other tools.
Feature Adoption
We tracked the usage of collaborative features such as comments, project shares, and presentations.
Usage was satisfactory but also varied greatly per feature, indicating areas for improvement.
Daily Active Users
We observed a significant increase in DAU, showing that users were engaging with our product more frequently.
This was indicative of the increased value and underscored the success in creating a more versatile platform.
Final Showcase
Next case study
TalentFirst is a job board for people with disabilities, that does not compromise accessibility with ease of use.
It is designed to remove the barriers that people with disabilities face when searching for work.
View case study
Comments on Products
Previously, users took screenshots in Dtail Canvas and then commented on them in other tools.
Now, users were able to leave on-the-spot feedback on products in Dtail Canvas, and track discussions in the comment feed in the sidebar.