Beebs challenge

Design for the needs of a wide but fragmented demographic audience. Maintain coherence and consistency across the network while providing the flexibility to express the radio singularity and own brand character. All this staying within the BBC GEL vocabulary.


What we have learned
The radio is a cultural treasure and a daily companion, but what millions of users want most from a digital radio experience?
In three months of exploration, interviews and data analysis, We learned that expectations are very different among audience groups, but a common patterns emerged during the testing and research sessions... everybody wants at least, replicate weather not to improve, the same physical analogical radio experience they are familiar with.


Background
Existing legacy contract with a third party supplier and relative code-base that dermined the experience unti then. The actual Radio was launched via a floating Pop-up window (Not a .tab) with a Flash Player (RIP) providing the Audio; that window eventually disappeared when users clicked anywhere else while the audio persisted. Users listened from a magical unknown source after few clicks.

Pop-up Window Script – Very popular at the time!
· newWin = window.open("about:blank", "radio_pop", "width=460,height=500");
· newWin.document.write("iPlayer, Radio");



Process · insights and requirements
Remove the pre–existing pop-up window to reduce friction and unify the experience (Audio/Visual).
Apply the findings, prioritising features and actions to take without compromising the existing platform. Introducing new modules and components one by one while testing in order to avoid potential disruptions.
Maintain the basic radio functionalities while providing a full digital consumption (eg. Browsing schedule on papers then consume Digital Audio) that could potentially bring many advantages.
Create a personalised but flexible and relevant experience for every individual, whatever their needs or interest are (12 Network Core audience segmets).


THE BIG idea
Introduce a main responsive sticky–top component that combines the Branding + Live program (Present) + Schedule (Past/Future) always available to the users.


OUTPUT·impact
The specific Radio anatomy is now based on a single vertical scrolling page. It is composed by 12 different module groups designed around the whole network publishing needs. Program Radio managers are able to pick and publish the responsive modules they need to empower them to create their own structure.

– On the "sticky-top" of it ...

The Branded Live/Catch-up/Schedule widget supersedes all users' expectations through a simple, seamless and delightful immersive listening experience.
It also provides a simple and intuitive digital service, delivering a station specific daily overview without compromising a deeper content discovery and perusal.


Role Lead UX/UI Consultant
Other activities Partial systematic branding | Existing assets optimisation
Design Team BBC Music - 2 full time Senior Product/Interaction Designer, 1 Midweight Visual
Development Team BBC Music - 12 full time engineers (6 Back-end/6front-hand), 2 PO, 2 QA
Network stakeholders 47x Radio Network rapresentative
Client BBC Future Media
Year 2015–2016 (9 months)
Partial live implementation 2016–2017

Ways of working ⚒
Because of continuous software and workflow improvements I had to drop Photoshop replaced by Fireworks–RIP around 2004 but as the tools evolved I adopted Sketch around 2011. Advantages were clear, the precision, development hand–over and specifications, savings hours to designers whom now had more time to finally focus more on actual design. At the time I was using a plug-in called Marketch back in the days; way before Zeplin, Abstract or Avocode.
When I realised that the Adobe–stack (PH/AI) was in use at the corporation I 😬 cringed... I had to shine a light for better ways of working. When I simply run a little presentation explaining the benefits someone shouted to the miracle. I knew I was doing someone a huge favour.

I believe that since then Sketch has still a seat at the BBC "tool-table" along with Figma, I hope. And the story goes on and on... This is a Post published in 2015, before the official Figma release (2016).



Live–Schedule widget

Original sketches and hi-res wireframes. Header | Main Navigation/Search exploration.

Exploration Phase

Previous top–navigation abandoned in favour of further architectural simplifications

Priority tasks patterns

Qualitative research. The analysys shaped a matrix emerged on saturation.

7 is the magic Number – Responsive content reflow

Flexibility to select and create hierarchy within the component groups on every Break–point. Each Station manager has now the opportunity to create a bespoken and fluid structure.

HTML/JS

From prototyping to Live testing all coded and comformed to the actual codebase to properly test realistic users interaction and reduce the waste. Keeping it Lean!

Sticky·Live–Schedule

The original concept was supposed to work with the main component sticked to the top after the user interaction scrolling down. Unfortunately in the end this relevant and simple planned feature pattern it was never implemented.

More Work