• Home
  • Design & UX
  • Other projects
  • About me
  • Lets talk
Stevey
  • Home
  • Design & UX
  • Other projects
  • About me
  • Lets talk
An example of the BBC GEL responsive web guidelines for Typography, Filter and How to design for touch.

An example of the BBC GEL responsive web guidelines for Typography, Filter and How to design for touch.

Background

The way in which the BBC designed it's website was about to change, we were moving from designing separate web and mobile views to designing for responsive web. This meant our existing Global Experience Language (GEL) guidelines needed to be updated to reflect this change of design approach.

What next...

The foundations of the BBC website e.g. the grid, typography and iconography were the first guidelines that needed updating. When I joined the GEL team some of these guidelines had already been created, so I led the UX team and got them to complete their recommendations, before publishing them. The UX designers needed to write for the web and create graphics that would easily illustrate what the guideline is and how it should be used.

An example of the BBC GEL responsive web Typography guidelines.

An example of the BBC GEL responsive web Typography guidelines.

I also started to identify and create briefs for new and upcoming design patterns around the business, these would stem from UX requests to stakeholder discussions. I would play these back to the Creative Director and our Delivery Manager and start work on creating responsive web guidelines with my UX team.

I would encourage the design team to do an audit as a starting point here to identify what current versions of the pattern are being used internally across the BBC and what are being used externally across the industry. We would then identify what works well and what doesn't as a team, then make recommendations based on these findings. I would share these with our technical, accessibility and design research colleagues to ensure that our recommendations were technically feasible, accessible and to identify whether any previous design research recommendations on these patterns were included.

Internal review with design team on the navigation responsive web pattern.

Internal review with design team on the navigation responsive web pattern.

I worked with Planning Unit to capture internal UX&D's requests for new BBC logos, reviewed the agencies submissions and provide feedback - ensuring our internal design teams were happy with their outcome.

I worked with Planning Unit to capture internal UX&D's requests for new BBC logos, reviewed the agencies submissions and provide feedback - ensuring our internal design teams were happy with their outcome.

I would then play this back to the UX design teams in their products through a regular responsive web working group that I led and ran on a fortnightly basis - a group made up of a senior designer per product across the BBC - to ensure they were happy with our recommendations. If more work needed to be done, we would capture the working groups feedback. If the group were happy we would then publish this content to our internal wiki using PDF and communicate this to the wider team.

Overtime, we changed strategy and tried to encourage designers to collaborate with each other when they began working on a new pattern e.g. location.

Internal audit of existing location design pattern across the BBC

Internal audit of existing location design pattern across the BBC

Running a workshop with my designers and stakeholders to identify what their hopes and fears are when working in collaboration.

Running a workshop with my designers and stakeholders to identify what their hopes and fears are when working in collaboration.

An example of our BBC GEL pattern for location in use after collaboration with other BBC products.

An example of our BBC GEL pattern for location in use after collaboration with other BBC products.

Outcome

The BBC UX&D team use our grid, typography and iconography when designing their responsive websites across products. The UX&D team are encouraged to work in smaller groups at the conception of a new design pattern and or when they want to change an existing design pattern.

What I learnt...

Working groups weren't the best forum to sign off a design pattern, designers didn't feel confident in signing off a design pattern as a group off without trying the pattern first. Roadmaps for each product were different and not aligned, so this would be problematic for us as a design team, as designers didn't have the time to try these patterns out as they weren't required in their product at the time. The collaborative approach worked much better.

itsmestevey.com