The Challenge
Create and build a design system for the new BBC Sounds product. The components need to be reusable and easily accessible by the UX team as well as wider disciplines. When designing these components, the needs of the user are to be taken into careful consideration in order for the product to function effectively.
Understanding Listening Habits
As a team, we knew we needed to find out what our user's listening habits were, so we worked closely with our UX researcher to construct a mental model to map these habits. Our UX researcher conducted 18 in depth interviews and diary studies around listening to both music and speech. The whole team then worked together to break down the transcripts from the interviews, jotted down all the user 'tasks' on post it notes, split them into 'towers', and then grouped these accordingly, forming a 'mental model'.
Mental model created for music. The same process was applied for speech.
Purpose Mapping
Multiple workshops with the product team allowed us to collectively define a list of modules we wanted to include on the page. After these modules were solidified, I outlined the purpose of each module for clarity, and mapped these against three user need scales which had emerged from the mental model:
• Scanning for vs browsing content
• Being shown familiar vs unfamiliar content
• Viewing personalised vs unpersonalised content
Outlining the purpose of the listen live module
Outlining the purpose of the continue listening module
Outlining the purpose of the recommendations module
The lines of measurement helped form an idea of how we could start portraying these different components on the homepage
Here shows modules which would be specific to the user vs editorially curated audio content
Mapping familiar vs unfamiliar content: Will the user be used to seeing this or does it feel brand new?
Visual Exploration
After purpose mapping, I explored how each module could be visually displayed using low fidelity wireframes. I'd started off by simply reusing one single component as a base building block, and added more as and when necessary.
Exploration by reusing one component for all modules: the horizontal card
I knew there would be a need for a more versatile card than one which has text sitting horizontally to the image, so explored a card with text underneath
For packages of content, or promotional content, I wanted to explore a more impactful component, so looked at a large card to flex the grid
To avoid a wall of squares, I'd introduced the idea of circles to depict live radio. This echoes how competitors depict live content, so will feel familiar to users
The final four components ready to be rationalised across modules 🙌
Rationalising
After constructing a flexible set of four components that I believed would work across all the modules we wanted to include in the product, it was time to rationalise them. The rationalisation process determined:
• Which component applied to which module and why
• Whether the components would flex and change across different breakpoints and why
• Whether the modules would take the form of a carousel, a grid or a list, and why
Mapping Across Breakpoints
Post-rationalising, I then mapped the modules onto breakpoints to help highlight:
• Whether the page order and structure felt right
• The amount of prominence given to each module
• Avoidance of visual repetition
Testing With Users
A high-fidelity prototype of the home page was built using the designed components, and lab testing was carried out with six participants. The main objective of this testing was to consolidate the visual hunches of the component library.
Overall it tested very positively, with one common finding to iterate on: recommendations felt too big on a desktop view. The recommendations subsequently changed to a 'small content card' and the component library went into build...
Prototype with final four components (Built using Proto.io)
Build & Pairing
After using Zeplin successfully in other projects across the BBC, I had introduced the tool to the BBC Sounds team to encourage stronger cross-discipline collaboration with the engineering team. The wider team could now access the latest designs and have complete parity.
The component library was then transferred onto Github. We built the components under the old iPlayer Radio branding and incorporated a 'switch' within Github that we could turn on when the new branding was ready to go. This meant designing for both old and new branding.
Being Adaptable
The launch of a new product is always going to be an iterative process, so naturally things were going to change along the way.
A prime example of this was the 'Continue Listening' module. After product discussions, we decided we wanted to give users the ability to view more episodes of the programme they've been listening to. As there was now an element of discovery for the user, we went from a horizontal card over to a small content card.
Aligning with the App Team
In order to keep a consistent look and feel across platforms, I'd put in regular component catch ups with the app team to ensure alignment. We had similar core components, and rationale for when these differed.
Next Steps & Involvement
Next steps: After the product went live, we started measuring data and noticed podcasts were performing very well. It would be ideal to start visualising these in a more 'heroic' fashion to prevent hitting the user with a wall of similar sized squares!
Involvement: Lead designer on component library mapping, visualising, rationalisation, prototyping and pairing. The mental model was led by UX researcher Amelia Still. App components designed by Christian Statham and Alex Ballantyne.
