The Headphone Company

Crafting the perfect experience that makes it easier to choose your next pair of headphones

The Problems

Choosing your next pair of headphones can be challenging
There is a plethora of brands with their own sites
Headphone specifications seem like gibberish to the average consumer
Comparing individual headphones in a simple manner is challenging

The Solution

The Headphone Company's website aims to solve these problems
A unified site that collaborates with multiple brands
Easy to read specifications that display what matters most
Adding a comparison menu that lets the user compare features

My Role

Conducting user interviews
Digital Wireframing
User Research with tools like Journey maps, Personas
Conducting usability studies
Competitive Audit

Competitive Audit
Boat

Boat is an Indian audio and tech brand that started their business with headphones. Their site is ideal for a competitive audit as it deals with audio devices and has a pleasant UI with no visible faults at a glance.The first step was to compile a set of screenshots to visually analyse the app.

Audit Findings

Main page seems a bit too cluttered
The constant reminders of sales distract from the product
No way to compare 2 or more headphones
Concise summaries of product absent
The long description page for each product adds to user time

User Research

The next step was to evaluate and identify a key demographic of people that may use our products. Personas were created based on these findings.

Personas

The first set of people consists of professionals and audiophiles, that are well-versed in their craft and have a thorough understanding of audioware

Another demographic are people who use headphones on the daily, but are not audiophiles and do not have a keen understanding of audioware

Based on these personas, a user journey map was created. The persona used as reference was Alice, as she represents a larger demographic.

User Journey Map

Initiating Site Design

Taking my research findings into consideration, I started by making a sitemap, to distinguish the various pages and features at an early stage. Following this were the digital wireframes, to nail down the layout of the site, and then Low fidelity prototypes designed on Figma. These prototypes are also linked to mimic a users flow through the site,

Site Map
Digital Wireframes
Low Fidelity Prototypes

The Lo-fi prototype is rigged up to complete the checkout process. It was used later to conduct a moderated useability study to test out the flow of the site.

View Lo-fi Prototype

Usability Study

After the Lo-fi prototype was created, a useability study was conducted.
Parameters of the study
Moderated Useability Study
10 mins per participant
Remote, conducted virtually
Participants were assigned a set of tasks to complete and comment of the difficulty of each task

Study Findings

Categories Tab need to be displayed prominently
Categories Page too complex
Customizable search filters were needed

Needs an address and add address page
Item Cards should be minimal and concise
Quick Comparison feature needed

Hi-fidelity Design and Refined Prototype

The results of the Useability study were crucial to complete the high-fidelity prototype. Changes were made to the design. Colors and details were added and the fonts refined, to fit the final look of The Headphone Company.

View High Fidelity Prototype
Instagram