Introduction
As part of my UX/UI training at neue fische, I collaborated in a three-person
team to design an interactive fashion e-commerce app. The project began with a predefined user story, which we adapted to the fashion context to identify concrete user needs. Based on these insights, we developed a new app concept that guides users intuitively to relevant products through mood-based navigation, collection drops, and event filters. Over the course of two weeks, we built a component-based design system in Figma, created a clickable interface enriched with micro-interactions, and tested it in multiple feedback loops.
From Insight to Interface
Based on our self-developed user story, we identified the core needs and expectations of our target audience and formulated our working hypothesis.
One key insight: users don’t want to search endlessly — they want to be guided through smart categories, moods, and event-based filters to quickly discover relevant products. Our hypothesis: a fashion app needs to offer more than just functional filters — it should provide orientation, curate brands and trends, and deliver a modern, visually engaging design that both inspires and leads users efficiently to their goals.
The 3 design principles of NØDE
Our three design principles consistently guided the project: Aesthetic with function means that visual design should be both appealing and intuitive to use. Orientation through inspiration is reflected in the image-based navigation – users discover products through moods, occasions, or collection drops. Trust through expertise is conveyed through the curated content strategy: the app highlights upcoming events and emerging trends early on, giving users confidence that they’re always seeing the right styles at the right time.
The User Story
"As a fashion-conscious online shopper, I want to navigate the app intuitively, be guided by inspiring imagery, moods, and categories, and quickly discover relevant products — ideally in the context of current drops or upcoming events. This helps me make informed, style-conscious (and potentially sustainable) purchasing decisions while staying on top of the latest collections. An interactive, visually engaging user experience further motivates me to return to the app regularly."
Aesthetics
with Function
Orientation
through Inspiration
Building Trust
through Expertise
Role: UX/UI Designer (Team of 3)
Type: Concept sprint
Scope: Competitive Analysis → Concept Framing → Interaction Design
Duration: 2 Weeks
Focus: Market positioning & core interaction model
Status: Concept defined
Introduction
As part of my UX/UI training at neue fische, I collaborated in a three-person
team to design an interactive fashion e-commerce app. The project began with a predefined user story, which we adapted to the fashion context to identify concrete user needs. Based on these insights, we developed a new app concept that guides users intuitively to relevant products through mood-based navigation, collection drops, and event filters. Over the course of two weeks, we built a component-based design system in Figma, created a clickable interface enriched with micro-interactions, and tested it in multiple feedback loops.
The User Story
"As a fashion-conscious online shopper, I want to navigate the app intuitively, be guided by inspiring imagery, moods, and categories, and quickly discover relevant products — ideally in the context of current drops or upcoming events. This helps me make informed, style-conscious (and potentially sustainable) purchasing decisions while staying on top of the latest collections. An interactive, visually engaging user experience further motivates me to return to the app regularly."
From Insight to Interface
Based on our self-developed user story, we identified the core needs and expectations of our target audience and formulated our working hypothesis.
One key insight: users don’t want to search endlessly — they want to be guided through smart categories, moods, and event-based filters to quickly discover relevant products. Our hypothesis: a fashion app needs to offer more than just functional filters — it should provide orientation, curate brands and trends, and deliver a modern, visually engaging design that both inspires and leads users efficiently to their goals.
The 3 design principles of NØDE
Our three design principles consistently guided the project: Aesthetic with function means that visual design should be both appealing and intuitive to use. Orientation through inspiration is reflected in the image-based navigation – users discover products through moods, occasions, or collection drops. Trust through expertise is conveyed through the curated content strategy: the app highlights upcoming events and emerging trends early on, giving users confidence that they’re always seeing the right styles at the right time.
Aesthetics
with Function
Orientation
through Inspiration
Building Trust
through Expertise
User Flow
The user flow of NØDE was designed to ensure intuitive navigation while maintaining a visually driven, immersive shopping experience. Starting from a welcoming entry screen, users can either explore curated collections, search by gender and category, or dive directly into upcoming drops. The flow guides users step by step — from inspiration and product discovery to pre-ordering — with a clear structure that minimizes friction.
Dynamic pathways, such as the “Soft Techwear” and “Future Drops” sections, offer personalized access to seasonal and exclusive items, while consistent touchpoints support seamless interaction and a sense of orientation throughout the journey.
Mid-fidelity Wireframes
Our mid-fidelity wireframes follow the bento box principle, providing maximum visibility for products while offering a clear visual structure. The modular layout enhances orientation and allows users to quickly navigate between collections, moods, or categories.
A key feature is the 360° view of garments – an interactive element that adds
a playful touch and emphasizes the app’s attention to detail and fashion focus.
This approach combines gamification and product presentation in a
contemporary way.
NØDE
The design system
NØDE stands for stylistic clarity and a modern, international appeal.
The Scandinavian-inspired name with its distinctive “ø” evokes design minimalism and reflects the app’s aesthetic. It positions the platform as a future-oriented and fashion-conscious space—selling functional, sustainable designer clothing. As a “node,” it becomes the connecting point for curated fashion, inspiration, and conscious choices.
Headline 1
Anton
Regular (400)
48
120
%
Headline 2
Anton
Regular (400)
24
140
%
Subheadline 1
Inter
Bold (700)
20
120
%
Subheadline 2
Inter
Bold (700)
16
120
%
Label 1
Inter
Bold (700)
22
120
%
Label 2
Inter
Regular (400)
16
120
%
Label 3
Inter
Light (300)
16
120
%
Button 1
Inter
Semi Bold (600)
20
120
%
Button 2
Inter
Light (300)
16
120
%
Button 3
Inter
Semi Bold (600)
14
120
%
Body 1
Inter
Medium (500)
16
130
%
Body 2
Inter
Light (300)
16
130
%
The final Product
The final UI design of NØDE is bold, clean, and product-focused — placing fashion items at the center of the experience while maintaining a strong, modern visual identity. A clear typographic hierarchy, reduced navigation, and striking use of color help guide the user and establish a confident, high-impact aesthetic.
Throughout the process, the three core design principles defined at the outset — clarity, engagement, and efficiency — proved essential. Clarity shaped the overall structure and visual hierarchy, enabling a layout that feels light, intuitive, and easy
to scan.
Engagement informed the use of dynamic elements like countdowns and 360° product views, which add interactivity without distracting from the core content. Efficiency influenced the navigation flow and content prioritization, ensuring users could explore and discover products quickly and seamlessly.
Together, these principles helped align visual expression with functional needs — resulting in an interface that is both emotionally resonant and effortlessly usable.
Conclusion
The final design demonstrates how visual clarity, functional precision, and strategically applied user insights can be combined to create a coherent digital experience. Structure, typography, and interaction follow a clear hierarchy that supports intuitive navigation. By integrating UX research, prototyping, and a consistent visual language, the interface achieves both brand alignment and usability at a high level. Throughout the project, I strengthened my ability to build structured UI systems and translate user feedback into meaningful design improvements — such as refining category navigation and CTA placement. Tools like Maze helped me better understand how real users interact with design, and how to iterate with purpose.
I also deepened my understanding of how visual hierarchy and microinteractions contribute to orientation, engagement, and emotional resonance. Most importantly, this project reinforced my belief that good design is a conversation: it requires balancing aesthetics, usability, and brand expression in a thoughtful and intentional way.
The 3 design principles of NØDE
Our three design principles consistently guided the project: Aesthetic with function means that visual design should be both appealing and intuitive to use. Orientation through inspiration is reflected in the image-based navigation – users discover products through moods, occasions, or collection drops. Trust through expertise is conveyed through the curated content strategy: the app highlights upcoming events and emerging trends early on, giving users confidence that they’re always seeing the right styles at the right time.
The User Story
"As a fashion-conscious online shopper, I want to navigate the app intuitively, be guided by inspiring imagery, moods, and categories, and quickly discover relevant products — ideally in the context of current drops or upcoming events. This helps me make informed, style-conscious (and po-tentially sustainable) purchasing decisions while staying on top of the latest collections. An interactive, visually engaging user ex-perience further motivates me to return to the app regularly."
User Flow
The user flow of NØDE was designed to ensure intuitive navigation while maintaining a visually driven, immersive shopping experience. Starting from a welcoming entry screen, users can either explore curated collections, search by gender and category, or dive directly into upcoming drops. The flow guides users step by step — from inspiration and product discovery to pre-ordering — with a clear structure that minimizes friction. Dynamic pathways, such as the “Soft Techwear” and “Future Drops” sections, offer personalized access to seasonal and exclusive items, while consistent touchpoints support seamless interaction and a sense of orientation throughout the journey.
Mid-fidelity Wireframes
Our mid-fidelity wireframes follow the bento box principle, providing maximum visibility for products while offering a clear visual structure. The modular layout enhances orientation and allows users to quickly navigate between collections, moods, or categories.
A key feature is the 360° view of garments – an interactive element that adds
a playful touch and emphasizes the app’s attention to detail and fashion focus.
This approach combines gamification and product presentation in a
contemporary way.
The design system
NØDE stands for stylistic clarity and a modern, international appeal.
The Scandinavian-inspired name with its distinctive “ø” evokes design minimalism and reflects the app’s aesthetic. It positions the platform as a future-oriented and fashion-conscious space—selling functional, sustainable designer clothing. As a “node,” it becomes the connecting point for curated fashion, inspiration, and conscious choices.
The final Product
The final UI design of NØDE is bold, clean, and product-focused — placing fashion items at the center of the experience while maintaining a strong, modern visual identity. A clear typographic hierarchy, reduced navigation, and striking use of color help guide the user and establish a confident, high-impact aesthetic.
Throughout the process, the three core design principles defined at the outset — clarity, engagement, and efficiency — proved essential. Clarity shaped the overall structure and visual hierarchy, enabling a layout that feels light, intuitive, and easy
to scan.
Engagement informed the use of dynamic elements like countdowns and 360° product views, which add interactivity without distracting from the core content. Efficiency influenced the navigation flow and content prioritization, ensuring users could explore and discover products quickly and seamlessly.
Together, these principles helped align visual expression with functional needs — resulting in an interface that is both emotionally resonant and effortlessly usable.
Conclusion
The final design demonstrates how visual clarity, functional precision, and strategically applied user insights can be combined to create a coherent digital experience. Structure, typography, and interaction follow a clear hierarchy that supports intuitive navigation. By integrating UX research, prototyping, and a consistent visual language, the interface achieves both brand alignment and usability at a high level. Throughout the project, I strengthened my ability to build structured UI systems and translate user feedback into meaningful design improvements — such as refining category navigation and CTA placement. Tools like Maze helped me better understand how real users interact with design, and how to iterate with purpose.
I also deepened my understanding of how visual hierarchy and microinteractions contribute to orientation, engagement, and emotional resonance. Most importantly, this project reinforced my belief that good design is a conversation: it requires balancing aesthetics, usability, and brand expression in a thoughtful and intentional way.
From Insight to Interface
Based on our self-developed user story, we identified the core needs and expectations of our target audience and formulated our working hypothesis. One key insight: users don’t want to search endlessly — they want to be guided through smart categories, moods, and event-based filters to quickly discover relevant products. Our hypothesis: a fashion app needs to offer more than just functional filters — it should provide orientation, curate brands and trends, and deliver a modern, visually engaging design that both inspires and leads users efficiently to their goals.
Introduction
As part of my UX/UI training at neue fische, I collaborated in a three-person team to design an interactive fashion e-commerce app. The project began with a predefined user story, which we adapted to the fashion context to identify concrete user needs. Based on these insights, we developed a new app concept that guides users intuitively to relevant products through mood-based navigation, collection drops, and event filters. Over the course of two weeks, we built a component-based design system in Figma, created a clickable interface enriched with micro-interactions, and tested it in multiple feedback loops.
Aesthetics
with Function
Orientation
through Inspiration
Building Trust
through Expertise
Headline 1
Anton
Regular (400)
48
120
%
Headline 2
Anton
Regular (400)
24
140
%
Subheadline 2
Inter
Bold (700)
16
120
%
Subheadline 1
Inter
Bold (700)
20
120
%
Label 1
Inter
Bold (700)
22
120
%
Labels 2
Inter
Regular (400)
16
120
%
Label 3
Inter
Light (300)
16
120
%
Button 1
Inter
Semi Bold (600)
20
120
%
Buttons/Button 2
Inter
Light (300)
16
120
%
Buttons/Button 3
Inter
Semi Bold (600)
14
120
%
Body/Body 2
Inter
Light (300)
16
130
%
Body/Body 1
Inter
Medium (500)
16
130
%