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.

Design Thinking • Emphathise Phase • User Journey

Design Thinking • Emphathise Phase • User Journey

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.

Design Thinking • Define Phase • User Story Mapping

Design Thinking • Define Phase • User Story Mapping

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.

Design Thinking • Ideation Phase • Wireframes

Design Thinking • Ideation Phase • Wireframes

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.


Design Thinking • Prototype Phase • MVP designed on Bubble.io

Design Thinking • Prototype Phase • MVP designed on Bubble.io

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.

Design Thinking • Testing Phase • Information Architecture

Design Thinking • Testing Phase • Information Architecture

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.

Metaverse Style Tile • Competitors • Font • Colours • Components

Metaverse Style Tile • Competitors • Font • Colours • Components

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.

Luxury Style Tile • Inspiration • Font • Colours • Components

Luxury Style Tile • Inspiration • Font • Colours • Components

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.

Luxury Style Tile • Material IO • Font • Colours • Components

Luxury Style Tile • Material IO • Font • Colours • Components

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!