hmv

Responsive website

The Brief

Following their 2013 takeover by Hilco, Code Computerlove were appointed to work with HMV to replace their temporary holding website (that had been in place since they went into administration) with a content focused entertainment hub that connected customers to their local HMV store and the film, music & games they love, whilst also re-establishing HMV’s reputation as entertainment experts.


My Role: Lead UX Architect @ Code Computerlove

What we did

Audience Research

In order to gain a deep understanding of customer needs, behaviour and motivations I worked closely with our strategy team to conduct user research.

Interviews

Interviews

We spoke to customers and staff in-store about their current perceptions and experience of HMV.

Customer Survey

Customer Survey

We posted an incentivised survey on social channels to gather quantitative data from both new and existing customers.

User Personas

User Personas

Based on our research findings we created user personas to represented the different customer types.

Ideation workshop

Mixed discipline

To kick off the solution design phase I facilitated an internal ideation workshop involving developers, creatives, strategists and user experience specialists. The session was designed to generate initial creative ideas that solved a number of the key project challenges whilst working together as a mixed discipline team. This collaborative approach enabled us to come up with well-rounded and achievable solutions.

Process flow

mapping

A key challenge we faced was connecting HMV’s various other platforms with hmv.com. To ensure that users had a smooth transition between their browsing experience on the hmv.com platform and purchasing on HMV’s separate digital download and physical product platforms, I mapped out user flows. This helped me to identify opportunities to simplify journeys and improve consistency between platforms.

Sketched wireframes

Low fidelity

 

Due to the short initial deadline we worked in fast paced design sprints towards a minimum viable product for launch. I worked closely with designers and developers to sketch low fidelity wireframes in order to quickly develop and validate potential solutions. We worked on a component basis and approached sketching mobile first to allow for progressive enhancement. During sketching sessions I considered appropriate psychology techniques to apply in order to meet journey objectives.

Prototyping

In order to further explore and validate our interface design I created interactive prototypes using Axure. This allowed us to bring the sketches to life and better understand how interactions and transitions would work across various screen sizes.

Usability testing

Guerrilla

 

I conducted guerilla usability testing in local HMV stores to evaluate how intuitive the user interface was to use, and whether it supported the needs of actual customers. This allowed me to get input from a large number of actual HMV customers in a short space of time and ensured a customer centred approach. We tested a mix of interactive prototypes and flat designs and evolved the interface based on user feedback and insights.

Optimisation

On-going

Since the site launched we have continued to work with HMV to optimise the site. I’ve analysed heat mapscroll map and Google Analytics data to understand what people are doing on key pages of the site; where people are clicking, and where people are scrolling to. This data has enabled me to identify key opportunities for improvements and areas to base further qualitative research to dig deeper into why people are behaving in certain ways. This approach has informed the continual improvement and evolution of hmv.com.

The results

Responsive

Responsive

Crafted to look and function beautifully no matter what screen size you're viewing it on.

Music Player

Music Player

Users can preview tracks wherever they are using the mobile friendly music player.

Staff Recomendations

Staff Recomendations

Showcasing staff knowledge & expertise to help customers discover new products.

International Roll Out

International Roll Out

The site has been rolled out to Canada & Ireland, each carrying its own locally generated content.