Supernormal
Designing digital strategy for iconic brands
Team
Cohesive platform for multi-brand discovery
Role
Interaction Design and No-Code Build
Sector
Design & Furniture
Timeline
2 months
Supernormal
Designing digital strategy for iconic brands
Team
Cohesive platform for multi-brand discovery
Role
Interaction Design and No-Code Build
Sector
Design & Furniture
Timeline
2 months
Supernormal
Designing digital strategy for iconic brands
Team
Cohesive platform for multi-brand discovery
Role
Interaction Design and No-Code Build
Sector
Design & Furniture
Timeline
2 months
Setting the Stage
Supernormal is a multi-brand organization representing iconic design labels such as Vitra, Kvadrat, Kvadrat Acoustics, Kvadrat Shade, Artek, and Impact Acoustic. The project aimed to create a digital presence that reflects their role as a premium curator while making brand discovery effortless.
Setting the Stage
Supernormal is a multi-brand organization representing iconic design labels such as Vitra, Kvadrat, Kvadrat Acoustics, Kvadrat Shade, Artek, and Impact Acoustic. The project aimed to create a digital presence that reflects their role as a premium curator while making brand discovery effortless.
Setting the Stage
Supernormal is a multi-brand organization representing iconic design labels such as Vitra, Kvadrat, Kvadrat Acoustics, Kvadrat Shade, Artek, and Impact Acoustic. The project aimed to create a digital presence that reflects their role as a premium curator while making brand discovery effortless.
Problem
Supernormal had no web presence, making it difficult for designers, architects, and partners to explore their portfolio or understand their curation value across brands.
Problem
Supernormal had no web presence, making it difficult for designers, architects, and partners to explore their portfolio or understand their curation value across brands.
Problem
Supernormal had no web presence, making it difficult for designers, architects, and partners to explore their portfolio or understand their curation value across brands.
Goal
Build Supernormal’s first digital platform that elevates each brand individually while still feeling unified, enabling simple exploration and directing users to the right sales team.
Goal
Build Supernormal’s first digital platform that elevates each brand individually while still feeling unified, enabling simple exploration and directing users to the right sales team.
Goal
Build Supernormal’s first digital platform that elevates each brand individually while still feeling unified, enabling simple exploration and directing users to the right sales team.
What I accomplished
I led the end-to-end design and development of the website, from visual direction and layout to the final build in a no-code platform. I defined the visual language, designed interactions that enhanced clarity, and ensured the experience remained consistent across desktop and mobile.
What I accomplished
I led the end-to-end design and development of the website, from visual direction and layout to the final build in a no-code platform. I defined the visual language, designed interactions that enhanced clarity, and ensured the experience remained consistent across desktop and mobile.
What I accomplished
I led the end-to-end design and development of the website, from visual direction and layout to the final build in a no-code platform. I defined the visual language, designed interactions that enhanced clarity, and ensured the experience remained consistent across desktop and mobile.
Define
Moodboard & Concept Alignment
Define
Moodboard & Concept Alignment
Define
Moodboard & Concept Alignment
Defining the Creative Direction
To define the creative direction, I first synthesized insights from stakeholder conversations and developed a moodboard that captured the intended tone, style, and mood of the website.
Defining the Creative Direction
To define the creative direction, I first synthesized insights from stakeholder conversations and developed a moodboard that captured the intended tone, style, and mood of the website.
Defining the Creative Direction
To define the creative direction, I first synthesized insights from stakeholder conversations and developed a moodboard that captured the intended tone, style, and mood of the website.
Mapping Structure & Hierarchy
Wireframes helped translate the concept into a structured layout, clarifying hierarchy, flow, and what content mattered most.
Mapping Structure & Hierarchy
Wireframes helped translate the concept into a structured layout, clarifying hierarchy, flow, and what content mattered most.
Mapping Structure & Hierarchy
Wireframes helped translate the concept into a structured layout, clarifying hierarchy, flow, and what content mattered most.
Design
Design Execution
Design
Design Execution
Design
Design Execution
Desktop Experience
After aligning with stakeholders on the final direction, I moved into designing the website. Each brand was presented in a full-screen layout to maintain focus and allow its identity to stand out individually. The call-to-actions guided users directly to the respective brand’s specialised sales team.
Desktop Experience
After aligning with stakeholders on the final direction, I moved into designing the website. Each brand was presented in a full-screen layout to maintain focus and allow its identity to stand out individually. The call-to-actions guided users directly to the respective brand’s specialised sales team.
Desktop Experience
After aligning with stakeholders on the final direction, I moved into designing the website. Each brand was presented in a full-screen layout to maintain focus and allow its identity to stand out individually. The call-to-actions guided users directly to the respective brand’s specialised sales team.
Making Interactions Meaningful
I designed micro-interactions across the website that felt simple, purposeful, and aligned with the visual language while still making key call-to-actions feel playful and engaging.
Making Interactions Meaningful
I designed micro-interactions across the website that felt simple, purposeful, and aligned with the visual language while still making key call-to-actions feel playful and engaging.
Making Interactions Meaningful
I designed micro-interactions across the website that felt simple, purposeful, and aligned with the visual language while still making key call-to-actions feel playful and engaging.
Mobile Experience
The mobile design followed the desktop structure and visual language, ensuring the experience remained consistent and seamless across devices.
Mobile Experience
The mobile design followed the desktop structure and visual language, ensuring the experience remained consistent and seamless across devices.
Mobile Experience
The mobile design followed the desktop structure and visual language, ensuring the experience remained consistent and seamless across devices.
Impact
Impact on SuperNormal’s Digital Presence
Impact
Impact on SuperNormal’s Digital Presence
Impact
Impact on SuperNormal’s Digital Presence
Launched SuperNormal’s first digital presence for multi-brand discovery.
Launched SuperNormal’s first digital presence for multi-brand discovery.
Launched SuperNormal’s first digital presence for multi-brand discovery.
Maintained an average of 184 monthly visitors and 253 page views over 1.5 years.
Maintained an average of 184 monthly visitors and 253 page views over 1.5 years.
Maintained an average of 184 monthly visitors and 253 page views over 1.5 years.
Consistent device engagement with 111 desktop and 70 mobile visits per month.
Consistent device engagement with 111 desktop and 70 mobile visits per month.
Consistent device engagement with 111 desktop and 70 mobile visits per month.
Delivered a cohesive, premium experience that strengthens long-term brand visibility.
Delivered a cohesive, premium experience that strengthens long-term brand visibility.
Delivered a cohesive, premium experience that strengthens long-term brand visibility.
Learnings
Insights & Reflections
Learnings
Insights & Reflections
Learnings
Insights & Reflections
Through this project, I learned how to translate multi-brand complexity into a cohesive and intuitive web experience. I also deepened my technical and creative skills in building production websites using no-code tools, creating scalable layouts and interaction patterns that elevate navigation and overall usability.
Through this project, I learned how to translate multi-brand complexity into a cohesive and intuitive web experience. I also deepened my technical and creative skills in building production websites using no-code tools, creating scalable layouts and interaction patterns that elevate navigation and overall usability.
Through this project, I learned how to translate multi-brand complexity into a cohesive and intuitive web experience. I also deepened my technical and creative skills in building production websites using no-code tools, creating scalable layouts and interaction patterns that elevate navigation and overall usability.
