3D Design Platform
SaaS • Platform Design • Responsive
2023
Product Manager & Designer (UX/UI)
Introduction
In today’s fashion industry, brands face dual pressures: reducing their environmental footprint and staying relevant in a rapidly digitizing world. Traditional methods—physical samples and photoshoots—are not only resource-intensive but also unsustainable. Simultaneously, entering virtual markets is a technical challenge for brands new to digital tools.
To address these challenges, I designed a SaaS platform enabling fashion brands to convert their collections into 3D models effortlessly. This solution bridges the physical and virtual worlds, facilitating reduced waste, resource savings, and easy entry into the metaverse.
Made with Microsoft Designer
The problem
Our research identified a significant gap: fashion brands needed an intuitive tool to create digital versions of their collections without technical skills. The solution had to:
Provide a user-friendly interface for non-designers to create 3D fashion models and engage with virtual markets.
Support sustainability goals by minimizing physical samples and resource consumption.
Integrate cutting-edge technologies like VR, AR, blockchain, and social media for a comprehensive digital presence.
The process
Working at a startup with low UX maturity, advocating for good UX practices was key to steering stakeholders away from immediate design decisions. The development of the SaaS platform was guided by the Design Thinking, prioritising remaining adaptable to evolving project needs.
Empathise
I conducted qualitative research with business stakeholders in a low-stakes setting to understand user pain points and needs. This research highlighted the industry's desire for sustainable solutions and the barriers to adopting digital tools.
Results from the data laid the project’s foundation and informed the business plan, design and development of the platform.
The user journey below takes us through Alicia's experience. Alicia is a Fashion Designer who is aware of the benefits of digital fashion but needs help getting started. User journeys allowed us to uncover issues and ways we could improve the user’s experience along the different touch points.
Define
User story mapping broke the project into manageable features, facilitating clear task definitions and fostering communication with development teams to ensure alignment with user needs.
Ideate
Collaborating with Co-Founders (CEO, CMO & CTO) and other stakeholders (3D designers and developers) we brainstormed potential solutions.
Balsamiq low-fidelity wireframes allowed me to get to a design solution quickly and add interactions that helped me communicate ideas. As it was perceived as an unfinished product, my teammates felt comfortable suggesting improvements and it was very quick and easy for me to make changes in there and then.
Here are some of the wireframes I created to illustrate the onboarding, 3D design, user account, user creations and support centre.
Prototype
Initial MVP designed and built with Bubble.io
I led the design and build of the first MVP. The objective was to test the concept as quickly as possible so we built it with the low-code builder Bubble.io. I managed a team of two developers to achieve this milestone. It was showcased at major global exhibitions, including 4YFN (GSMA MWC), Transfiere, and The Digital Enterprise Show.
Using a low-code platform helped us meet our deadline despite the steep learning curve for all involved. It also severely limited us with their pre-built templates and components. We realised that relying on this builder would hinder our ability to meet new functionality requirements and impact our future scalability.
Despite this, feedback from these events was invaluable in refining the platform’s design.
Second MVP designed in Figma
We decided to build a second MVP with React to:
Overcome the limitations posed by the low-code builder.
Leverage the team’s ability to design and build components that meet business and user needs.
Deliver a unified overall user experience across multiple platforms.
We validated the concept before developing in React to mitigate risks and prevent costly iterations during development. As a result, we reduced the workload of the external dev team by 30% and saved €10K.
We used Material 3 to jumpstart the design process with pre-designed UI elements like buttons, forms, and icons, which I built on to meet the requirements of the project. Using Material Design meant:
Less time spent remaking components.
Developers can translate the design faster.
More consistent digital products.
Better customer experience due to consistency and accessibility.
Test
Throughout the prototyping phases, I conducted usability testing sessions to gather feedback and iterate on the design. Testing was crucial in identifying and addressing usability issues and in ensuring the platform met the needs of users.
Below is an example of some of the platform's IA (Information architecture). IA diagrams were used to test platform functionality, ensuring a logical and intuitive user journey before adding visual elements. This approach aligned technical implementation with the intended user experience.
Aesthetic and theme
As our project evolved, it became clear that the original metaverse-inspired color palette, characterised by vibrant and futuristic tones, no longer aligned with our target market's preferences or the brand's new direction. We undertook a significant rebranding effort to transition to a luxury neutral tone palette, reflecting a more sophisticated and timeless aesthetic.
Rebranding: From Metaverse to Luxury Neutral
Original Palette
Initially, the project embraced a metaverse-inspired colour scheme, featuring bright, electric colours that resonated with a tech-forward and experimental vibe. This palette was well-suited for the early vision of the platform, which was geared towards a futuristic digital environment.
Shift to luxury-neutral
As the product matured, we identified a need to reposition the brand to appeal to a more refined, luxury-oriented audience. We transition to a neutral tone palette, emphasizing muted, elegant colours like soft greys and blues, beiges, and blacks. This new palette not only better represented the brand's values of sophistication and exclusivity but also provided a more versatile and timeless foundation for the UI.
The shift in colour palette significantly impacted the overall user experience. The luxury neutral tones offered a calming and focused environment, enhancing the usability of the platform by reducing visual noise and allowing the content—such as 3D models of fashion collections—to stand out more prominently.
Adoption of the Material.io Design System
The rebranding, combined with the adoption of Material 3, allowed us to elevate the platform’s user experience to new heights. The luxury neutral palette brought a sense of elegance and sophistication, while Material 3 dynamic and accessible colour features ensured that the UI remained both beautiful and highly functional.
The Solution
The platform simplifies the conversion of fashion collections into 3D models, focusing on ease of use for designers without technical expertise. It supports sustainability by reducing the need for physical samples and aids brands in entering virtual markets with a seamless digital solution.
The video demo showcasing the user journey became a key tool for communicating the platform's value to stakeholders and potential investors.
Learnings
Adaptability: Navigating leadership changes and evolving team structures emphasised the need for flexibility and adaptability in the design process to ensure that the project stayed true to the original vision.
Low-Code Platforms: The initial use of Bubble.io highlighted the strengths and limitations of low-code platforms, underscoring the importance of validating concepts early to avoid costly iterations.
User-Centered Design: The Design Thinking approach reinforced the value of constant user involvement in creating a product that truly meets their needs.
Exhibitions as Feedback Channels: Global exhibitions were crucial for gathering industry feedback and validating the platform’s value proposition.
The development of this platform was a testament to strategic innovation and adaptability. By addressing the twin challenges of sustainability and digital transformation, we created a product that empowers fashion brands to confidently embrace the future. The successful launch of two MVPs and the insights gained from each phase demonstrate the importance of flexibility, collaboration, and continuous iteration in digital product management.
Looking ahead, the lessons learned will guide future projects ;) Can't wait!