BOSE HEADPHONES WEBSITE
Case study
PROJECT OVERVIEW
This project was my first individual exam project during my studies at Multimedia Design and Communication program in Denmark. The aim of the project was to select a company (out of 5 selected) and to create an optimal solution based on the company’s business goals. The whole thing was to do research, create an idea, design it and then create a website based on HTML and CSS.
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 definition: Designing a website dedicated to Bose Corporation headphones to be even more accessible for the users. Making the company gain trust among customers through the website.
Design Process
Research
Company and target group analysis. Gain user insights and understand the challenge.
Ideation
Deciding on content, sitemap, creating sketches.
Design
Creating moodboard, styletile, wireframes, mockups and prototype.
Development
Developing website using HTML and CSS languages.
Testing
Get user feedback and draw conclusions.
Research
Company Analysis
It was created by Dr Amar Bose in 1964. Dr. Bose was an ardent fan of sound research, creating speakers that gave him the best possible experience was his passion throughout his life. The founder of Bose Corporation was an optimistic protagonist who motivated his subordinates and his students at MIT (Massachusetts Institute of Technology). He died in 2013, but his legacy and history have so far motivated more Bose employees to create and improve further models of headphones, speakers and sound systems.
The incredible phenomenon of this company can also be said by the fact that it cooperates with NASA, US military and also the sound systems of this company can be heard at most major national stadiums or concert halls. Shortly before his death, Dr Bose as an MIT graduate and dedicated scientist gave his company into possession of one of the best universities in the world.*
Mission, Vision, Values
After getting acquainted with Bose corporation, the next step was a detailed analysis using a technique created by Alexander Oswalder and Yves Pigneur, which discusses the construction and work of individual companies, which can be briefly called Mission, Vision, Values. So in this part I would like to briefly present the Business Model Canvas of Bose Corporation.
The values that Bose Corporation uses are INTEGRITY, EXCELLENCE, INNOVATION, PASSION, RESPECT AND VALUE.
SWOT analysis
After analyzing the business model, it was time to analyze the strengths and weaknesses, i.e. the SWOT analysis. Taking into account the information obtained so far, I have determined what can be considered strengths and weaknesses of Bose Corporation. Additionally, analyzing the external environment, I pointed out what factors constitute opportunities and threats to the said organization.
Strengths for this company will include the fact that the company is very focused on constantly conducting scientific research, which helps them improve their equipment and be up to date with the development of technology. Another strong point may be the fact that the organization cooperates with such American powers as NASA, the US Army or MIT, which has already been mentioned several times.
The weaknesses can certainly be attributed to the lack of an obvious leader who could take over the role of the inspirer who was Dr Bose. In addition, the fairly small selection of products and their price mean that Bose Corporation products are intended only for a selected part of society.
When it comes to the opportunities that the company faces, it is certainly the continuous development of the needs of the clients who drive the market, and thus give the company a chance to introduce new, more perfect products. However, the threats include the continuous development of competing companies such as Sony, Creative or JBL, whose products are equally well known on the headphone market.
Going further with the TOWS analysis, we can come to the point where the individual items cross. We can therefore draw some interesting conclusions. By crossing the first point of Bose’s strengths with its opportunities, we notice that the company knows perfectly what it is doing by conducting continuous research and constantly improving its products. The needs of customers change at an enormous speed, which is why the company’s behavior is very well targeted due to the needs of the community. Unfortunately, looking at the weaknesses and threats, we can come to some very worrying conclusions. Again, I will take after the first point from both lists. Since the death of Dr Bose, the company has no obvious leader who would motivate and run the company as its precursor did, which is why the idea of the company and its values may be shaken when other competing organizations such as JBL, Sony and Creative develop and they are growing at their best.
Target group and persona
After a thorough analysis of the company, it is time to select a specific target group for which my solution will be. Considering the target groups selected for BM analysis, I decided that my main target group would be adults 21-45. Why? I think that this group has the greatest potential to decide to buy Bose’s headphones. They are people during or after graduation who probably have a permanent job and a steady income. A community that values good equipment and can afford to buy Bose headphones
Ideation
Sketches
I really wanted to show as much important information as possible while being as minimalistic as possible. Having gone through several versions, I got to the one which I thought was final. This version, however, is accurately mapped into wireframes and only at the stage of creating mockups are some changes.
At the beginning we see graphics that are to catch the eye and a note, title or quote. In the next part, I immediately went to show the individual categories. Lucas has them sorted and presented by dividing the headphones into the different. All categories present graphics. Then we have a part encouraging a slightly broader knowledge of the company, its history, values and activities. I think that companies with interesting stories will increase consumer confidence much more.
Next we go to the page that presents „Sport and gym” section. We can find here several motivating quotes interspersed with graphics. The last page I prepared was a page of a specific headphone model. It immediately presents the product photos with short characteristics as well as the option of adding the item to the basket. Below are the product specifications presented in graphic form and supplemented with short descriptions. Headphones are compatible with a special mobile application, which is why I think that placing a description of such an application on a specific product page is the perfect solution. Before the newsletter and footer we will find technical facts about the subject.
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.
