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'.
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
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.
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...
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.