Redesigning and rebuilding bbc.com... from scratch.
AGENCY
UIC Digital
CLIENT
BBC.com
PROJECT LENGTH
1 Year
MY ROLE
Senior Product Designer
BRIEF
To productise the BBC offering outside of the UK. Redesign the current website, rebuild it and create a custom consolidated CMS for its content creators.
MY DELIVERABLES
UX - User research, Feature research, User journeys, wireframes, prototypes
​
UI - Design Strategy, Design Feature research, Design System creation and management, Token upkeep, Concept Design, Visual design, CMS design and consultancy
​
Testing - QA, Reporting
MAIN BUSINESS METRICS MET
Improves customer experience
Increased conversion rate
Increase in sales in ad placement offering
THE MOST ENJOYABLE PART OF THE PROJECT
Creative workshops with the key members of the team at the iconic BBC studio offices.
THE BIGGEST CHALLENGE
Redesigning a well known, well used website to improve customer experience as well as the publishing experience with over 250 stakeholders and 57 people in our team.
THE BIGGEST WIN
Seeing our work showcased as a talk for Config 2024
As Martina Fugazzotto, VP, Product Strategy & Creative, says:​
"There were many driving factors that led to relaunching the BBC product suite outside the UK, but our top priority was to create a more connected, contextual and frictionless experience for our ex-UK audience to interact with BBC content. The previous BBC.com experience had been built-up over time as an attempted mirror of the BBC UK experience, but with necessary omissions for things like content rights and necessary additions for things like advertising. When you take a strategic holistic package like BBC UK and start removing pieces here and there, then adding some new ones wherever they fit, you end up with something that doesn’t quite serve the audience or the business as well as it should. So we started over."
While at UI Digital, I was brought into the team to help re-design BBC.com. Everything had to be done from scratch, evaluating the smallest detail to the overall website and how a modular system will be future proof for its editors, improving the upload and writing process on a CMS.
Creating the Design System
I took the initiative to look into the initial design system and started to improve it to be understandable for the working team and the global BBC team. We introduced tokens via token studio and set them so they automatically synced within the figma file with any updates. Tokens really helped us with colour and font styles to sync within all our modules seamlessly. 1 update layered into everywhere.
A clear process to enhance our creativity
Between the creative team we would divide and concur different features to look after between the US and UK team. I helped across research, UX and UI work and would cross over to problem solve and create elements for prototyping and client feedback. Every detail in the design structure was considered for Desktop to mobile, iOS, Android and to be used within the new CMS.
Creative with content
From our research we were able to create a list of content needs to derive a form of requirements.
We designed content modules for every need the content team may need, for every type of article or page within the site. Each design was put through several design concepts in the design stage before the final variations were chosen.
Documenting detail
Each design piece would go through vigorous UX and design review rounds before we did thorough and detailed documentation for the tech handover.
Designing for a robust CMS
Another big challenge we had was to define and develop the product proposition and workflows for the CMS. We needed to improve the experience for the publishing teams. Every module created in our design system was named with an American state and its Variation with an UK city to highlight the collaboration between the two countries on this project. Each module was documented with functional and spacing detail, so the developers could build the module exactly how it was meant to behave. Then the CMS developers would then implement this into wordpress with a module graphic, so the editorial team would able to differentiate different modules for different sections for their pages. In total their were over 20 different modules available.
Scalable design system to support efficient CMS build
The aim throughout was to build a scalable digital design system that grows alongside the project but can rapidly adapt with efficiency and speed. Of course, bringing it all together spanned many, many technical solutions and challenges but, by using AWS for the backend and using React and React Native for the frontend, we were able to problem solve and build fast. We used WordPress for the CMS too, with a Guttenburg extension to give editors a responsive preview function to see the content in situ – critical for saving time in a fast-paced news environment.
Adapt for the app
I also had the pleasure of working on the BBC app where the same styling was layered into the design for iOS and Android.
​
I made sure the design system worked the same way as the web and the design tokens were set up correctly to allow for a seamless transition from web to app and the styling for each module were how it should be.
We had a great working core team with the BBC, from our deep dives, to workshops to BBC studios visits, each interaction was enjoyable and the team had a strong collaborative spirit, which made it a great space to do our best work.
