Responsive Design of a Sharing Flow
for a Classical Music Streaming Service
This was a month-long project consisting of an initial week of project planning and research, a 2-week design sprint and a final week for presentation and delivery of the final spec doc. The problem identified was a lack of engagement from users of the service. Discmuseum wanted to add value by empowering users to do more with their collection of music. The solution found through user research was the ability to share pieces of music with people who were not yet subscribed to DiscMuseum and could not access the service's content. The new flow had to be modular and easily slot into the client's already existing responsive website.
The Details: One of my key roles during this project was to lead both the design studio session held with our clients and the affinity mapping session held amongst the team. It was important in these sessions to clearly state the goals we were looking to meet and the tasks that we needed to complete to do so. As well as include short warm-ups to get everybody energised for the critical thinking necessary and keep everything running on time. One other responsibility was to create templates and recommendations for how to best present and communicate our final solution, as well as final spec doc, to our client. 
Affinity mapping (left), persona building (right)
In undertaking this challenge we asked the question. What would drive their users to share in the first place? An initial stakeholder meeting was held to kickstart our sprint. We took this opportunity to ask our clients about their current service, its user base and their goals to measure success. After obtaining metrics from DiscMuseum we were able to identify the key demographics we were looking for in our user interviews. They were aged 50 and over a may have recently retired, giving them the time to explore or just enjoy classical music. The key aha moment and insight from these interviews and the subsequent affinity mapping was that – For this user group, sharing is associated with a lack of privacy. Many stated a preference for direct email when sharing anything considered personal.
The Details: We used affinity mapping to collate interview findings. Quotes, thoughts, feelings, actions and other interesting insights were written down on Post-it notes. We looked for patterns and began grouping them under themes with the goal of forming a common understanding of our users. From this rose a total of 9 themes further refined by focusing on the 3 themes where sharing was most prevalent. These 3 themes were labelled as exploration, connection and fear. With a better understanding of our users, the activity of persona building could begin and 'Classical Arthur' was born.
User journey mapping
User Journey Mapping
To get in the headspace of Arthur, how he might approach sharing when using DiscMuseum’s website. We developed scenarios which further explored his problems and goals. The most interesting of which was expanded by mapping Arthurs start to end journey with the current service. This aided in our understanding of Arthurs process of sharing. What drove him to share in the first place and the complete experience he had in getting to his end goal. This activity also revealed multiple areas of opportunity which we recorded for sharing with the client and possibly for a future sprint.
The Details: When it came to sharing there were two key moments in the journey you see mapped above. Arthur was driven to share through the act of hearing a piece. This leads us to start with the thought that the most natural point to introduce any sharing functionality for our users would be in the play bar. We were also able to investigate one such way of sharing using the sites current mental model. This involved adding a piece to your library, navigating to that library and downloading it to attach to an email. A process that was prime for rethinking and innovation and this is what we focused on in the very first sketched prototype we tested with users.
Design studio (left), paper prototype sketches (right)
Prototyping & Iteration
Our first testable paper prototype approached the act of sharing with the assumption of a profile page. We would later reflect after a round of user testing that this was needlessly creating more actions then were necessary for Arthur to complete his goal. As a current subscriber, Arthur was already familiar with the service and introducing too many changes all at once could lead to a cognitive overload that may push him away from the service. It wasn't all bad though we had built what a lot of testers felt was an intriguing way to send a piece of music to another person. By building a custom player which included a personalised message and cover image for the piece.
The Details: As we moved from low to mid to high fidelity prototypes and each subsequent round of user testing. The most meaningful changes happened in terms of our form structure and the language we used to communicate functionality and options to the user. What was initially a one screen form was broken out into two both to allow the content more room to breathe and to ensure the process was familiar for users when moving between the experience on different screens. In following best practice, we researched how other services such as GOV UK approached their form elements.
Mid-fidelity wireframes designed in Sketch
The solution was presented to our clients in the final week. We communicated our design decisions by referring back to our research and the process we used. Below is a GIF of the final high fidelity prototype created in Invision that focuses on a single key journey we designed for Arthur. There is a story available to go along with this final prototype which you can check out in the full Medium case study. Alternatively click on this link to explore the prototype yourself. One of our biggest success during this project was in opening up a new path to introduce people to DiscMuseums service. Bringing them onto the website to listen to the piece that was shared and using content to show them what else they could explore and experience while there.
The Details: One of the biggest struggles for our team during this project was in writing copy that felt in line with DiscMuseums current branding but also felt natural and could be easily understood. What was most helpful in this regard was actively listening to how users talked about what they were thinking and what words they used when moving through our testable prototypes. We also constantly spoke any written copy out aloud to each other and discussed multiple options to decide which may be best.
"We strongly recommend working with Tim for his capacity to understand client needs, be pragmatic and come (up) with nice designs" 
- Guillaume Descottes / CEO / DiscMuseum

You may also like

Back to Top