DESIGNING EXPERIENCES
Bose Headphones Website
Introduction
Project Description
That was my first ever UX/UI project so that’s why I wanna keep it here 🙂
As part of an academic project, I developed
a comprehensive UX/UI solution for a Bose headphones website, focusing on usability improvements and building trust in the brand.
My Role: Company Analysis, UX Researcher, Wireframes, UI/UX Designer, Product Developer, Usability Testing
Project Duration: 3 weeks
Used Tools: Ai, Ps, Adobe XD, Brackets
Problem: How to design a website that not only highlights the quality of Bose headphones but also meets the needs of its diverse audience?
Goal: To create a prototype website that:
– Is user-friendly
– Supports purchasing decisions.
– Communicates Bose’s core values (innovation, quality, passion).
Design Process
UX Research
Company Analysis
Target Audience Analysis
Benchmarking
Ideation
Persona
Customer Journey Map
UX/UI Design
Moodboard & Style Tile
Wireframes
Mockups
Development
Technologies
Structure
Testing
Usability testing
Research
Target audience analysis
Bose Corporation, founded in 1964 by Dr. Amar Bose, is renowned for its commitment to sound research and innovative audio solutions. The company has built strong partnerships with NASA, the U.S. military, and MIT, which emphasize its technological excellence and credibility. Bose’s mission and values are centered around integration, excellence, innovation, passion, respect, and delivering value to its customers.
Mission, Vision, Values
Bose’s mission focuses on creating exceptional audio experiences that enrich people’s lives. The company envisions becoming a leader in innovative audio technologies while maintaining its dedication to quality and customer satisfaction. The core values—integration, passion, and innovation—are consistently reflected in their products and operations.
Key Bose Corporation values: INTEGRITY, EXCELLENCE, INNOVATION, PASSION, RESPECT AND VALUE.
SWOT analysis
- Strengths: Dedication to research, trusted partnerships with prestigious institutions.
- Weaknesses: Limited product portfolio targeting a niche audience.
- Opportunities: Increasing demand for high-quality audio products presents opportunities for new product line.
-
Threats: Intense competition from brands such as Sony, Creative, and JBL.
Target group and persona
Following a thorough analysis of the company, I identified a specific target group for my solution: adults aged 21 to 45. This demographic was chosen based on their significant potential as Bose headphone customers. Typically, these are individuals who are either in the process of completing higher education or have already graduated, often holding stable jobs and earning a steady income. They are likely to value high-quality audio equipment and possess the financial means to invest in Bose products, making them an ideal audience for this project.
Ideation
Creating ideas
The development of the website concept began with an in-depth exploration of user needs and how they could be addressed effectively. Sketching was an integral part of this process, allowing me to experiment with layout options, content structures, and potential features in a flexible and creative way. These sketches formed the foundation for more structured wireframes that clearly defined the website’s structure and navigation.
User journey mapping further enriched this phase by visualizing how different personas would interact with the website. By identifying key touchpoints, pain points, and opportunities for engagement, I ensured that the design catered to diverse user expectations. This approach provided clarity in how users would navigate through the site, from discovering product categories to making purchasing decisions.
Through iterative refinement, each concept was tested and adjusted to align with both user needs and Bose’s brand identity. This rigorous process ensured that the final framework was not only aesthetically appealing but also intuitive and highly functional, setting a strong foundation for the subsequent mockup and development stages.
Design
Moodboard
After preparing the sketches and placing the content, it’s time for Moodboard. One of my favorite parts of the project, because it allows you to create a leitmotif of the project thanks to completely unrelated graphics. Such a perfect example of synergy, where 2 and 2 do not give 4, but much more.
There is a lot of black on this moodboard. Of course, this is a direct reference to the Bose logo, which is available in black and white. But about this in the last part of this chapter.
Style tile
Having sketches, i.e. the arrangement of the entire content and moodboard, I could start preparing style tile. As I mentioned at the beginning of this chapter, I wanted my project to refer to the Bose classics, while giving it a slightly minimalistic character. I really wanted to use an industrial style characterized by simple shapes, black / concrete colors and austerity.
In my style tile I present 3 basic colors that I used during the project. They are shades of gray and white. Using a bit faded black I wanted to give the matte character to the page. The font I chose was „Hurtmold” created by Billy Argel.* It seems to have a very professional and fashionable character that fits perfectly with the Bose organization.
Wireframes
Traditionally, I started by transferring sketches into the world of vectors. Of course, on the screen, having lines and accurate pixels and distances, everything looks a bit different, which is why my wireframes are not a perfect reflection of sketches. They are definitely more readable and give a better view on the arrangement of individual parts. It can be seen that some parts have shifted slightly or changed their location, but these are small aesthetic changes towards a higher good of creation this project.
Mockups
After preparing empty templates for my project, I started dressing them in colors, specific shapes and content. Creating mockups is always a positive activity because it gives us full power without the need to panic about not knowing the CSS language good enough. When designing mockups,
I had in front of me moodboard, style tile and Lucas, who looked at me crookedly whenever the fantasy took me way too far away. I wanted the website to present a minimalist design and at the same time to represent the professionalism of the brand. Simple geometric shapes are supposed to refer to the simplicity and severity of industrialism. When designing mockups, I also realized that since I am building a website offering products for sale, and company offers free deliveries and returns, this could be emphasized, which will probably increase its attractiveness even more.
After creating all the mockups and switching between them, I sent a prototype to friends asking for comments, mainly regarding the ease of navigating the menu. Also while making tests I came across interesting articles about user experience and read that „69% of shoppers check the returns page before making a purchase”* which should have been obvious to me, but it wasn’t. My testers gave me actually the same advice. So based on research and my friends advices, I decided to add subcategories „Return” and „Help” so that Lucas could find information easily if there was a problem with the headphones or If he would have any questions.
Implementation
Coded website using HTML and CSS
I started coding by making a main page, index.html, and two subpages: sport_and_gym.html and example_of_products.html. The common file that makes up the whole is stylesheet.css and also the file encoded only with menu -navmenu.css. Two additional subpages also have their individual sport.css and product.css files. I created such a division that everything was clear and transparent and that the codes did not interfere with each other. I’ll start by presenting the code for the responsive navigation menu. The tutorial is from YouTube. I reconstructed the code and converted it a bit stylistically for my own needs. I think that this version suits the nature of the site very much. The menu is modern and minimalistic.
