E-commerce · UI/UX · Responsive Web
House of Nirvan
A Full-Moon Crystal Shopping Experience
- Client
- House of Nirvan
- Role
- UI/UX Designer
- Tools
- Figma
- Scope
- Custom Shopify E-commerce Website
Overview
Creating an immersive shopping experience through thoughtful design.
For House of Nirvan, I designed a custom Shopify website that balances bold typography, atmospheric visuals, and generous negative space. Working from the client's vision for a dark, minimal aesthetic, I developed the visual direction, responsive layouts, and interactive elements. The focus was on creating a distinctive interface that makes product exploration engaging while keeping the overall experience simple and intuitive.
Challenge & Goals
Create a bold visual experience. Keep every interaction simple and intuitive.
Distinctive visual identity
Create a dark, minimal interface using bold typography, strong contrast, and generous negative space without overwhelming visitors.
Interactive product exploration
Design engaging hover interactions that allow visitors to discover crystal details without cluttering the page.
Seamless responsive experience
Maintain a consistent visual hierarchy and intuitive navigation across desktop, tablet, and mobile devices.
Interface Exploration
Interactive details for a deeper connection.
The C218 collection features interactive crystals, allowing visitors to explore additional information through simple hover interactions. I designed the experience to keep the interface minimal while presenting detailed crystal information in a focused and engaging way.
Clean overview
All four crystals are displayed in a consistent layout, allowing visitors to explore the collection without visual clutter.
Interactive trigger
Hovering over a crystal reveals an expanded information panel without navigating away from the page.
Focused content
The expanded panel uses clear typography, subtle dividers, and generous spacing to make detailed information easy to read.
Wireframes
From initial concepts to refined interfaces.
I started with low-fidelity wireframes to explore page layouts, content placement, and visual hierarchy. These early concepts helped establish the structure of the website before developing the final dark-themed interface, where typography, imagery, and negative space bring the design together.
Home
C218
Visual Direction
Refined visuals.
Functional design.
Logo
- #E56A25
- #EFEDE5
- #202226
- #63645B
Colour palette
Bebas Neue
(Header + Titles)
Poppins
(Body)
UI Elements
Key Design Decisions
Every detail designed
with intention.
01/ Visual atmosphere
Bold contrast, minimal distractions
A dark colour palette, striking typography, and generous negative space create a distinctive visual experience without overwhelming the content.
02/ Product exploration
Interactive crystal details
Hover-triggered information panels allow visitors to explore each crystal in greater detail without leaving the C218 page.
03/ Content hierarchy
Storytelling through structure
Carefully arranged imagery, headlines, and supporting text guide visitors through the brand story and C218 collection.
04/ Waitlist experience
A clear and focused action
Prominent calls to action direct attention towards the waitlist, keeping the experience focused on the collection rather than a traditional shopping interface.
Responsive Design
One experience. Every screen.
I adapted the website's bold typography, atmospheric visuals, and spacious layouts for desktop and mobile. The focus was on preserving the visual identity while adjusting content hierarchy, navigation, and interactive elements to create a clear and consistent experience across screen sizes.
Final UI
The complete House of Nirvan experience.
Outcome & Reflection
A distinctive digital experience built around simplicity and interaction.
The project brought together atmospheric visuals, bold typography, responsive layouts, and interactive crystal exploration into one cohesive website design. Working as the sole designer allowed me to develop a consistent visual direction from initial wireframes to final interfaces, strengthening my ability to balance creative expression with clarity, usability, and thoughtful interaction design.
Next project
Cheers Mate
E-commerce Website
Have a design project in mind?
Currently taking on web and brand work for small studios and product teams. Tell me what you're making and what it needs to do.
Available for new projects
A good first email
- 01What you're making
- 02Where it stands today
- 03Timeline and budget range