Wants a headset that feels personal.
Custom colors, skins, lighting and clear device compatibility are key to making the product feel right for their setup and style.
01
The Brief
One webshop, two very different audio users.
The assignment was to design a complete desktop webshop experience for a high-end audio brand, supported by one focused mobile flow.
The main UX challenge was serving two distinct audiences within the same product ecosystem: a younger user looking for customization and gaming compatibility, and a professional user prioritizing focus, comfort and reliable performance.
Wants fewer distractions and fewer technical decisions.
Strong noise cancelling, long-term comfort, battery performance and a dependable microphone are essential for focused work and calls.
02
Research & Strategy
Understanding the market before designing the experience.
I started by studying established audio brands and comparing how they communicate product features, compatibility and personalization. This helped identify both familiar patterns and opportunities for NOIR.
Competitor analysis
I compared established audio brands including JBL, Bose and Sony across features such as noise cancelling, battery life, compatibility, personalization and call quality.
Patterns
The comparison showed that many expected audio features were already well covered, while compatibility information and personalization were not always equally clear or prominent.
Opportunity
This created an opportunity for NOIR to make product decisions easier while giving users more control over how their headset looks and fits their needs.
03
Designing for Two Audiences
Turning different user needs into focused features.
Beyond the required webshop functionality, I introduced four additional features to respond directly to the needs of the two target audiences.
01
Customizer
Customizer Studio
A visual customization flow where users can personalize colors, skins and lighting while seeing the result in a live preview.
Personal expression
02
Both audiences
Compatibility Checker
A simple way to check whether a headset works with a specific device, console or computer before purchasing.
Purchase confidence
03
Professional
Work Mode Selector
Preset modes for Focus, Office and Meeting help users choose suitable noise cancelling and call settings without dealing with complex technical controls.
Focus & simplicity
04
Professional
Comfort & Battery Check
A quick overview of long-session comfort and expected battery duration with noise cancelling enabled.
Practical decision support04
From User Stories to Flows
Mapping the experience before designing screens.
Before moving into wireframes, I translated the feature ideas into user stories, use cases and step-by-step flows. This helped clarify what each user needed to accomplish and where decisions had to happen.
User stories
Each additional feature started with a clear user need and a concrete goal rather than a predefined interface solution.
Use cases
The stories were translated into scenarios describing the user, the context and the sequence required to complete each task.
User flows
I mapped the key paths and decision points before designing the screens, making it easier to identify unnecessary steps and gaps.
05
Information Architecture
Organizing a complex webshop into a clear structure.
After defining the main flows, I created the sitemap to connect the different parts of the webshop and make sure key actions remained easy to reach across the experience.
Core shopping journey
Product discovery, filtering, product detail, cart and checkout formed the main path through the webshop.
Supporting features
Favorites, account management, order tracking and customer support were integrated without competing with the main journey.
Feature entry points
Customization, compatibility and work-focused tools were placed where they could support a purchase decision rather than exist as isolated features.
06
Wireframing & Iteration
Turning structure into screens — and refining them before visual design.
I translated the flows and sitemap into desktop wireframes, focusing first on hierarchy, navigation and interaction rather than visual styling.
Low-fidelity structure
Early wireframes helped define content hierarchy, product discovery and the position of the main webshop actions.
Feature integration
The custom features were placed inside the shopping journey instead of being treated as separate tools.
Iteration
Layouts and interactions were refined as the prototype became more detailed, reducing unnecessary steps and improving clarity.
Wireframes were created before the final visual layer to validate structure, hierarchy and interaction.
07
Interactive Prototype
Bringing the key interactions to life.
The final Figma prototype connected the core shopping journey with the custom features, allowing the main interactions and transitions to be tested as a complete experience.
01 / Customizer Studio
Personalization with immediate visual feedback.
Users can customize the appearance of their headset and see their choices reflected immediately, making personalization part of the product experience rather than an extra step.
02 / Compatibility Checker
Removing uncertainty before purchase.
Instead of searching through technical specifications, users can select their device and quickly understand whether the headset is compatible before continuing with the purchase.
08
Outcome
From research to a complete interactive experience.
NOIR Audio became a complete webshop concept built around the needs of two distinct audiences, combining the expected e-commerce journey with features for personalization, compatibility and focused work.
The project strengthened my ability to move from research and user needs into structured flows, information architecture, wireframes and an interactive prototype.
2
Target audiences
4
Custom UX features
25+
Unique screens
1
Interactive prototype