Hello. I’m Simon Meredith, a Junior Experience Designer and recent recruit to the UX&D GEL (Global Experience Language) team.
GEL is the visual toolkit and design principles used to build our entire online output. The GEL team provides guidelines, UX patterns and know-how for deg across all BBC digital platforms and services.
This blog post is about how we worked with departments, teams and individuals across the BBC to develop a particular UX solution that could be used across all the BBC’s websites. It’s about process, the journey we went on and the things we learned along the way.
The Brief
The brief was to create a responsive UX pattern for searching and setting a ‘preferred’ location across the BBC. We needed a unified UX solution – something that would make the experience more intuitive and reduce the need to repeat location searches.
The Challenge
Location services already existed as a fundamental part of many BBC websites such as BBC Weather and BBC Travel. But the offering wasn’t unified and only BBC Weather allowed you to store locations.
Location service offerings across different BBC products.
The list of searchable locations across sites was also inconsistent: BBC Weather offered international locations; BBC Travel let you search for motorways; and BBC iPlayer and BBC News only offered regions.
The Process
To get started we gathered all of the relevant product owners, designers, business analysts and developers. Together we looked at the current offering, any existing exploratory work and the audience statistics.
This session allowed us to involve different products and really explore their needs. It gave everyone the chance to express their thoughts and contribute to the process from the start.
To help facilitate the session we presented a series of ‘identify and understand’ questions such as ‘What are the differences between location searches across the BBC and why do they exist?’. These questions helped us identify all the areas that needed exploring during the design process.
Hopes and Fears
One of the most enlightening exercises involved asking everyone to write down their ‘Hopes’ and ‘Fears’ for the following statement:
‘The core interactions and appearance of location search and preference do NOT need to vary across the BBC Online service.’
The outcome of this showed that, even though people were thinking about their own product needs, generally everyone wanted the same thing.
People’s ‘Hopes’ included creating a consistent experience, design and code. And getting teams working closer together to learn and create more intuitive experiences, leading to more content discovery.
‘Fears’ contradicted the ‘Hopes’ in some ways as they included worries about one size not fitting all, increased effort and resource, and greater complexity.
'Hopes' and 'Fears' from the workshop.
Nonetheless, getting together at the start meant we formed a line of communication we could keep open throughout the project. It made for a collaborative project with everyone having a hand in the final design and outcome.
A collaborative process for a responsive design
During the process we teamed up with designers from different products to sketch journeys and scenarios. This helped us quickly establish edge cases and develop solutions.
Sketching out scenarios and edge cases.
We worked with our copywriter to explore a range of terminology, experimenting with messaging and ensuring we kept the language consistent.
Accessibility specialists cast their eyes over the work to make sure the structure and ordering was suitable for people using keyboards and screen readers.
We were also fortunate to be able to work alongside the Location Services development team from the start. This meant we could design and prototype simultaneously, identify technical issues early and test ideas on the fly.
It also meant we developed technical solutions during the prototype phase rather than having to address them during the final build.
Testing
The key part of this process was collaborating with lots of different people and using their expertise. But I can’t stress enough the importance of testing.
Throughout the design process we conducted quick guerrilla testing with colleagues. And thanks to Gemma Newell, our research specialist, we were also able to conduct a full day of lab testing. This allowed us to test concepts, designs, messaging and accessibility with real people, and identify and develop solutions for any problems.
Testing helped us overcome specific design challenges like what terminology and iconography to use for different types of location.
In this case we had to distinguish between a set location and additional stored locations. Initially we had grouped the two types of locations under one heading: ‘Your locations’. Through guerrilla and lab testing we were able to try a variety of and ask participants for their own suggestions.
The we received allowed us to make an informed decision on the terminology. And it resulted in us choosing to separate the types of location, placing them under two headings: ‘Main location’ and ‘Other locations’.
We also needed to give a clear way to change the ‘Main location’. We had decided to use iconography but had a number of options and styles to choose from. Through testing we were able to establish which icons were clearest and easiest to understand.
Ideas and options for iconography and terminology.
Design challenges
So what did we learn? Developing a full understanding of what is required from the start is key. Presenting work regularly in its raw state, rather than creating polished presentations, allowed us to identify issues early and iterate easily.
Collaborating with a range of different people including designers, copywriters, developers and product owners helped us establish needs and develop solutions from all sides. And bringing more people together at the outset dramatically reduced overall time spent – avoiding duplication of effort and ensuring our solution could be used in all cases.
Finally, testing helped to back up and justify our thinking and designs. And it helped to highlight any problem areas.
The UX pattern implemented on BBC Travel.
You can see the outcome of this process live on www.bbc.co.uk/travel
Thanks to all the people who were invovled:
- David Bailey, Stephen Robertson and Sara Salsinha – GEL
- Mala Vadhia, Julian Kirby and Nick Beese – Weather
- Dima Jarkas, Ulrik Hogrebe, Adil Hussein - News
- Edd White – Copywriter
- Chris Henden, Amanda Dahl, Kevin Bradwick and Iwan Roberts – Location Services
- Karolina Iwaszko and Mike Burnett – Product
Simon Meredith is a Junior Experience Designer, BBC Future Media.
