2022
M.A.D. Shoppe
What if fashion e-commerce felt less like a checkout flow and more like a cultural moment? M.A.D. Shoppe explored editorial storytelling and commerce before livestream shopping went mainstream.
What if fashion e-commerce felt less like a checkout flow and more like a cultural moment? M.A.D. Shoppe explored editorial storytelling and commerce before livestream shopping went mainstream.
Overview
Every year, Québec has a very avant garde fashion festival that brings in smaller Québec and Canadian fashion brands in a space where they can celebrate and grow. This time around though, M.A.D. was looking for something more than just farmer’s market vibes, and so came the idea of M.A.D. Shoppe - a limited-time e-commerce, designed to extend that energy of the festival’s physical pop-up marketplace into a digital experience.
The goal was to reinvent fashion e-commerce through magazine-esque content and introducing live streaming to fashion e-commerce, well before concepts like TikTok Shop or YouTube Shopping became mainstream. Through this platform these emerging fashion brands had the opportunity to digitally showcase and sell their collections during the festival window, while engaging with audiences in brand new ways all on this one platform.
I worked as the sole UX Designer, alongside a physical-media-trained Graphic Designer, delivering a production-ready UX foundation that launched for the festival period.
Overview
Every year, Québec has a very avant garde fashion festival that brings in smaller Québec and Canadian fashion brands in a space where they can celebrate and grow. This time around though, M.A.D. was looking for something more than just farmer’s market vibes, and so came the idea of M.A.D. Shoppe - a limited-time e-commerce, designed to extend that energy of the festival’s physical pop-up marketplace into a digital experience.
The goal was to reinvent fashion e-commerce through magazine-esque content and introducing live streaming to fashion e-commerce, well before concepts like TikTok Shop or YouTube Shopping became mainstream. Through this platform these emerging fashion brands had the opportunity to digitally showcase and sell their collections during the festival window, while engaging with audiences in brand new ways all on this one platform.
I worked as the sole UX Designer, alongside a physical-media-trained Graphic Designer, delivering a production-ready UX foundation that launched for the festival period.
Determining what features were important based on what features/journeys would be commonly used by the widest group of users (sellers vs buyers, community-engaged vs quick-browsers).
Determining what features were important based on what features/journeys would be commonly used by the widest group of users (sellers vs buyers, community-engaged vs quick-browsers).
Context & Problem
The M.A.D. Festival was lively and a great chance for these small fashion brands to gain traction through the in-person fashion shows, pop-ups, and fashion culture. Now, how do small brands grow now beyond that physical presence? Out of sight, out of mind.
At the time:
Smaller Québec-based fashion brands lacked sustained digital visibility
Traditional e-commerce felt transactional and uninspiring
Editorial fashion sites rarely translated cleanly into shoppable experiences
The challenge was to design a platform that:
Preserved the curation and cultural energy of the festival
Supported multiple independent sellers
Balanced strong visual identity with usable, accessible commerce patterns
Context & Problem
The M.A.D. Festival was lively and a great chance for these small fashion brands to gain traction through the in-person fashion shows, pop-ups, and fashion culture. Now, how do small brands grow now beyond that physical presence? Out of sight, out of mind.
At the time:
Smaller Québec-based fashion brands lacked sustained digital visibility
Traditional e-commerce felt transactional and uninspiring
Editorial fashion sites rarely translated cleanly into shoppable experiences
The challenge was to design a platform that:
Preserved the curation and cultural energy of the festival
Supported multiple independent sellers
Balanced strong visual identity with usable, accessible commerce patterns
Breaking down overall site architecture into clear sections. Unlike a regular fashion e-commerce setup, we were additionally exploring a space for live streaming shopping.
Breaking down overall site architecture into clear sections. Unlike a regular fashion e-commerce setup, we were additionally exploring a space for live streaming shopping.
One of my favourite and enjoyable exercises to jump into divergent thinking and put behind the questioning mind to step into exploratory work. Come up with eight ideas in eight minutes~ - it'll definitely force you to come up with weird, funky and sometimes cool ideas!
One of my favourite and enjoyable exercises to jump into divergent thinking and put behind the questioning mind to step into exploratory work. Come up with eight ideas in eight minutes~ - it'll definitely force you to come up with weird, funky and sometimes cool ideas!
Role & Constraints
I acted as the solo UX designer, collaborating closely with:
A graphic designer responsible for visual identity
The festival’s digital lead and primary stakeholder
I was responsible for:
UX direction and information architecture
User flow mapping all core journeys
Upholding accessibility and usability decisions (especially when the visual identity pushes for typography and images that generally fare better in physical media)
Mid-fidelity wireframes and animated prototypes for handoff
Key constraints:
There was no room for wasted time as it had to be ready in time for the upcoming festival
Strong aesthetic ambition - the folks in the fashion industry judge quickly on visuals, it has to land with them
Multiple audiences - the website would be used by both sides, shoppers and independent sellers
Limited contract scope - I had to work with what I'd been told and given, no extra time for research, the festival's lead would be my test and I would also be unable to see where the project would head
Role & Constraints
I acted as the solo UX designer, collaborating closely with:
A graphic designer responsible for visual identity
The festival’s digital lead and primary stakeholder
I was responsible for:
UX direction and information architecture
User flow mapping all core journeys
Upholding accessibility and usability decisions (especially when the visual identity pushes for typography and images that generally fare better in physical media)
Mid-fidelity wireframes and animated prototypes for handoff
Key constraints:
There was no room for wasted time as it had to be ready in time for the upcoming festival
Strong aesthetic ambition - the folks in the fashion industry judge quickly on visuals, it has to land with them
Multiple audiences - the website would be used by both sides, shoppers and independent sellers
Limited contract scope - I had to work with what I'd been told and given, no extra time for research, the festival's lead would be my test and I would also be unable to see where the project would head
Some mid-fidelity wireframes showcasing various sections of a user profile - including hearted items, hearted videos, following brands/designers, order status and account settings.
Some mid-fidelity wireframes showcasing various sections of a user profile - including hearted items, hearted videos, following brands/designers, order status and account settings.
Key Insights
Early discovery and collaboration surfaced a few critical insights:
Fashion discovery is emotional and visual, but checkout must remain predictable
Magazine-style layouts increase desire but can quickly hurt readability
Animation is powerful when used to clarify hierarchy, not decorate it
A major insight was recognising that users would engage in two distinct modes:
Passive browsing, similar to reading a magazine
Intent-driven shopping, focused on products and checkout
The experience needed to support both without forcing one behaviour.
Key Insights
Early discovery and collaboration surfaced a few critical insights:
Fashion discovery is emotional and visual, but checkout must remain predictable
Magazine-style layouts increase desire but can quickly hurt readability
Animation is powerful when used to clarify hierarchy, not decorate it
A major insight was recognising that users would engage in two distinct modes:
Passive browsing, similar to reading a magazine
Intent-driven shopping, focused on products and checkout
The experience needed to support both without forcing one behaviour.
Mid-fidelity mocks of integrating shopping with live streaming in the chat feature. The product overlay that pulls up is also shown.
Mid-fidelity mocks of integrating shopping with live streaming in the chat feature. The product overlay that pulls up is also shown.
Decisions & Tradeoffs
Several deliberate decisions shaped the product:
Anchored the experience in a magazine-inspired layout, accepting higher design complexity
Formally prioritised accessibility and usability as the framework for visual creativity
Pushed back on overly small typography and dense compositions
Used animation to communicate flow and structure, not novelty
Delivered mid-fidelity designs that locked architecture and interactions, leaving visual flair for later stages
This required navigating real tension between visual expression and functional clarity, with accessibility guiding final decisions.
Decisions & Tradeoffs
Several deliberate decisions shaped the product:
Anchored the experience in a magazine-inspired layout, accepting higher design complexity
Formally prioritised accessibility and usability as the framework for visual creativity
Pushed back on overly small typography and dense compositions
Used animation to communicate flow and structure, not novelty
Delivered mid-fidelity designs that locked architecture and interactions, leaving visual flair for later stages
This required navigating real tension between visual expression and functional clarity, with accessibility guiding final decisions.
Execution Highlights
Ran Crazy 8s ideation sessions with the stakeholder to explore divergent concepts
Mapped the full “browse to add-to-cart” journey
Conducted secondary research across fashion, editorial, and marketplace platforms
Built animated prototypes to communicate interaction intent and secure buy-in
Delivered mid-fidelity wireframes covering core journeys across viewports
The prototypes became a key alignment tool for both design and production teams.
Execution Highlights
Ran Crazy 8s ideation sessions with the stakeholder to explore divergent concepts
Mapped the full “browse to add-to-cart” journey
Conducted secondary research across fashion, editorial, and marketplace platforms
Built animated prototypes to communicate interaction intent and secure buy-in
Delivered mid-fidelity wireframes covering core journeys across viewports
The prototypes became a key alignment tool for both design and production teams.
Outcomes
M.A.D. Shoppe launched for the festival period, supporting real commerce
Stakeholders aligned around a bold, non-traditional e-commerce direction
UX foundations enabled fast population of products and promotional content
I was brought back due to the success of the launch to help create animated assets for a promotional video campaign, which were used in paid advertising
While long-term metrics were unavailable due to contract scope, the project successfully translated a physical Québec fashion event into a functional digital product.
Outcomes
M.A.D. Shoppe launched for the festival period, supporting real commerce
Stakeholders aligned around a bold, non-traditional e-commerce direction
UX foundations enabled fast population of products and promotional content
I was brought back due to the success of the launch to help create animated assets for a promotional video campaign, which were used in paid advertising
While long-term metrics were unavailable due to contract scope, the project successfully translated a physical Québec fashion event into a functional digital product.
Reflection
This project represents an earlier stage in my career, but it shaped how I work today.
It reinforced:
The importance of accessibility as a creative constraint
How to collaborate across strong creative perspectives
When to hold the line on UX fundamentals and when to leave space for visual experimentation
It also taught me that ambitious ideas only work when grounded in real user journeys.
Reflection
This project represents an earlier stage in my career, but it shaped how I work today.
It reinforced:
The importance of accessibility as a creative constraint
How to collaborate across strong creative perspectives
When to hold the line on UX fundamentals and when to leave space for visual experimentation
It also taught me that ambitious ideas only work when grounded in real user journeys.
Good ideas usually start as half-formed thoughts.
Tell me about yours.
Good ideas usually start as half-formed thoughts.
Tell me about yours.
Good ideas usually start as half-formed thoughts.
Tell me about yours.