Dynamic interaction

For the dynamic interaction, the information that is displayed can be adapted to the user’s musical preferences. This can be done with cookies remembering the pages that the user visited or other products the user has previously purchased through the website. This will create a more personal store experience. Plus it might increase sales, as the web site can now show the users’ music they might like and thereby stimulates them to try new artists, whose albums they might want to buy as well.

Other interactions that can be used are:

1. When someone hoovers over a button at the top bar, a drop down menu will appear beneath the button. 

2. Changing images for the recommended CD’s at the CD page and for the new and expected CD’s on the home page.

3. When a user wants to play a preview of a CD he can drag the CD from the cover to the recordplayer which would be added to the page.

Aesthetic Redesign

After the functional redesign the aesthetic redesign was made. All the pages now have aesthetics that fit better with the visual identity of Velvet Music. This way the different pages have a corporate identity that is characteristic for Velvet Music. For example the main banner with logo is given a wood print. This creates the old record store atmosphere. Also the colours used on the web pages now fit the colours of the Velvet logo. The logo was of course left unchanged. For example the background colour of the pages is the same light yellow colour as the logo. The different bars and headings have the same purple/blue colour as the outside colour of the logo. Also the fonts on the web pages were changed to fit with the font used in the ‘Good Music’ logo slogan. The total appearance of the webpage looks more relaxed and at ease in comparison to the original design.

Visual Identity

Keywords: Vintage, Retro, Dutch, Expert Music, Lifestyle

Velvet Music store is a Dutch company chain with several stores spread through the country. It has a retro style that adresses musicians and real music fans who feel serious about music and rejoice listening to it. Besides, people can search for new items as well as discussing about their musical experiences in the website. Velvet aims for a personal approach, so it's website should give a feeling of an old record store with its ambience. This should make the store feel like a musical living room for serious music fans, for whom music is an important part of their lifestyle. Also musicians should feel that this is the right place to buy some new CDs, gaining new experiences by listening new music styles and enjoying themselves due to the friendly space of it.

 

Physical experience & Context of the product

A webshop differs very much from a normal shop, especially in the sense that you cannot physically experience the product you are buying and that the context of the product might be less noticable or different. Therefore these important aspects are described below for the new Velvet music website.

Physical experience

Of course the customers miss a certain experience since they cannot touch the CD or feel it in their hands, but this experience of the actual physical product is not as important for CD’s as it is for clothing. However it should be possible to listen to examples of tracks on the CD before purchase, so people will be able to explore music as they would in stores. 

The feeling of the CD can be simulated by showing the cover of the CD in its specific case and by adding the opportunity to flip the CD case to see the backside of it and open the case to see what is inside. 

Also the online shop lacks the experience of an offline shop. People miss the great atmosphere: the retro looking store where music lovers and musicians come to find and explore music by going through hundreds of CD’s and talking with other people. Thus setting up a music sharing community could greatly improve the web store experience. 

Velvet tries to encourage people to share their music by creating social media buttons. However sharing music should be something actively social: instead of just clicking a “like” button, people should talk and discus with others. Therefore we would recommend creating a forum to share music preferences and delete most of the social media buttons. 

Context of the product

Since CD covers generally are already obviously present it is not a good idea to add more context to the CD’s at the home page. However, for the CD pages it could be nice to add a link to an autobiography/ description of the band and their music style. Also it would be nice to add a section that provides recommendations for other CD’s that fits the music style of the CD people are looking at. This is not because of pure aesthetical or functional reasons, but to create a better atmosphere around the web shop.

In the image below an example of the 'Last.fm' website is shown, in which they recommend other artists based on your music style:

Functional redesign

Home page

In the picture above the redesigned home page on the left is shown next to the original page on the right. This makes explaining the changes in comparison easier.

The original page seems to not have been designed for broad screens. To update the look and help the website fit better with wider screens, the sidebar has been deleted, as currently the sides of the screen show white. The buttons which could originally found here are partly combined and placed on top. Also the search box was integrated with the other buttons.

The search box is an important element of the site, but seemed very out of place in the top part of the screen. Also originally there was a second ‘Advanced search’ button in the sidebar. These are now combined into one button in the top bar.

The Facebook ‘Like’-button has been deleted, as it seemed very oppressive. The other social media links have been put in the bottom of the page. As these links contrast with the idea, that Velvet is an old school music store.

Also in the original page a lot of albums are displayed in the ‘New’ and ‘Expected’ categories. People found it hard to find a specific one during the tests, so these categories are now limited to three and are made slightly bigger.

CD page

From the tests it can be concluded that the original CD page has so much information on it, users found it quite hard to find the desired information. Therefore in the redesign a lot of the information next to the album cover that most users are not interested in or is not of any use to them, is left out. 

Also users told us they thought the interesting information like the track list was harder to find than the less interesting like the kind of disk and the release date. Therefore the sequence of the information was shuffled as well according to their statements and our own insights. 

Furthermore in the original page there are a lot of social media links. This kind of contrasts with the idea, that Velvet is an old school music store. Therefore a lot of them were taken out and the remaining have been put in the bottom of the page.

To make it possible for users of the site to get more of a feel for the product the option was added to listen to a preview of the music on the CD. For now this has been put in the same format as the other information displayed on the screen.

A lot of sites directed at music fans have a part where the site has suggested artists suiting your specific taste. People felt this was missing in the Velvet site. Therefore in the redesign this was added. This links to a page with information about the artist’s autobiography and samples of their music.

The button used for buying the product is now put underneath the album cover in order to make this stand out more from the other informational elements. Despite the colour it was found from the visual tests, not everybody could find it as fast as the store would want.

What We Can Easily See & Visual Search

Visual Search 

In the visual search test the participants first saw a black page with one element of the page. After pressing the spacebar the complete website was shown. People had to search for the element and to click on it. For the home page eleven elements were used. These can be seen in the image below:

The results of this for the home page  are shown in the graph below:

The elements used for the search of the CD page are shown below:

The results of this for the CD page are shown below:

Conclusion

Search home page

When looking at the graph in the results section, it becomes clear that it was the easiest to find the login button, the search section and the Velvet logo. The graph shows that finding the like button for Facebook was the hardest part of the website to search for, followed by offers.

Search CD page

When looking at the graph in the results section, it becomes clear that the price, barcode and order on the CD page were easiest to find. It took the participants the most time to find the ‘add a Facebook comment’ part on the website, followed by the track list, genre and delivery time. 

What we can easily see

For this experiment two different images of the website were used: the normal website page and the website page where an element is missing. These images were shown quickly after each other and with a grey screen between them. The participants had to search for the item that was appearing and disappearing. The results of this are shown in the graphs below.

For the home page:

 For the CD page:

Conclusion

When looking at the graph in the results section, it becomes easily clear that the Velvet logo, the chart and the Facebook-comment parts of the website were easy to be recognized to be appearing and disappearing. Meanwhile, the appearing and disappearing CD album was hardest to discover, followed by the expected date and price. But these two have values close to navigation, language, genre and order. 

Overall conclusion

When comparing these different conclusions, general conclusions about the website of Velvet music can be drawn. It was easiest for the participants to find the Velvet logo, the chart section, login button, search section, barcode and order. It was the hardest for the participants to find the CD cover, expected date, Facebook like button, offers, track list, genre and delivery time.

Discussion

The validity of the results can be doubted because of the setup of the test. First, the tests were all conducted at different places and different laptops with different visual qualities were used. This could have caused the participants to see the different parts easier or harder. For example, a participant could have conducted the test and had troubles with the size of the symbol on the screen while on another screen he would not have had this problem. 

Second, in the search assignments the participants had to search for a specific symbol and click on it. The program was built in a way that they had to click on one specific place on the symbol. Sometimes participants had trouble selecting the symbols while they already saw them. This increases the time to find the symbol significantly. This is especially possible for large items, such as the search section, the shopping chart, the Facebook comment, the CD cover and the Velvet logo. This could have caused the high measured search time of Facebook comment in the search the CD page part and the CD cover on the CD page.

Also, not all parts and sections of the website were tested. Perhaps there were parts on the website that were not included in the test that were very hard or easy to find. 

Finally, there was not a real participant group chosen. The ratio between ages and gender of the participants is maybe not representative for the results.

Eye tracking experiment

With the eye tracking test, it is possible to analyse what participants focus on when looking at the site and the way they take it in. This is important as it shows how people unconsciously react to the site lay-out and what information they see first. The goal with this test was therefore to find out which elements attract the eye and which don’t. From this it can be decided some elements need to be noticed more or which should be noticed less.

Results

The results from this test are displayed in the graph below. On the bottom axis are the elements and on the right axis is the amount of participants that looked at those elements.

Home page

CD page

Conclusions

Home page

The parts of the Home page on which the participants should have focused are: the Velvet logo, the (not loading) image and the new and expected CDs. However, though most looked at the image, the Velvet logo still scored high, but not maximum. This should be improved, as the logo is most important to the company. The expected CDs scored very low, so this should be made more noticeable as well. The Facebook button gets a lot of attention, just as the text. This should however be less.

Cd page

The focus points on the CD page should be the CD cover, the information about the CD and the Velvet logo. Now however the participants focused more on the standard page elements as the search area, the social media buttons and the navigation bar. These elements should become more part of the background, to help users of the website direct their focus to the actual CD.

Discussion

Possibly the results of this experiment are not very accurate, since calibration mistakes could lead to differences of interpretation in the results: elements that are placed close together are hard to distinguish when a participant is looking at one of them. Therefore the results of the larger elements are more certain than of the smaller ones, such as the ‘login/subscribe’ button or the title of the CD and social media buttons.

The results of the other experiments will be added soon!