Designing a responsive UX pattern for searching and storing locations

Every week millions of users search locations on BBC websites. These searches can vary from the latest weather in Edinburgh, travel updates in London or the local news from Birmingham.



The opportunity

To design a unified UX solution – something that would be more intuitive, reduce the need to repeat searches and allow users to set a ‘main’ location across the BBC.


Research & understand

What existed already?

Location search already existed across the BBC on sites like BBC Weather, BBC Travel and iPlayer. But the offering was uinconsistent with varying searchable locations, different user journeys and visual designs and only BBC Weather allowing you to save locations.

Pulling apart the problem

Facilitating a one-day workshop with product owners, designers, business analysts and developers from across the BBC we looked at the current offering, exploratory work, competitors, audience statistics and data. The session allowed us to explore different product needs and give everyone the chance to express their thoughts and contributing to the process from the start.

Looking at competitors, data and explority work to help understand the problem

To provide stimulus we presented a series of ‘identify and understand’ questions


- How Might We improve the experience for users?

- What are the differences between location searches across the BBC?

- Why do these differences exist?

Hopes & Fears

At the end of the session we looked to consolidate everyone’s thoughts. We posed the following question and asked everyone to give their hopes and fears for the project.


“The core interactions and appearance of location search do NOT need to vary across BBC”

The outcome was that, even though people were thinking about their own product needs, everyone wanted the same things. A consistent user experience, design and code whilst getting teams working closer together to learn and create more intuitive experiences.


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.


Defining a clear set of problems to solve

1

Unified location setting and shared recent searches across products

2

Consistent iconography, terminology, user journeys, interactions and visual styling

3

One code base

Ideas – Converge & diverge

User journeys & scenarios

Before we started generating ideas we mapped out all the possible user journeys. This allowed us to identify all the problem areas in the user experience.

Sketching ideas

I collaborated with colleagues from the different products to sketch out ideas for how we could both align the offering and increase functionality.

Aligning the current offering

We explored terminology, iconography and visual design allowing us to try different options in the lab testing.


Different icon and terminology options

Improving and increasing functionality

We designed new functionality that would allow user to set and store a location across all BBC sites.


Auto suggestions
Location settings
Location storage & managment

Prototype and test

Paper prototypes & guerrilla testing

Creating paper prototypes for designs allowed us to quickly test and gain validation. We would test ideas on anyone who had the time, in the park, shopping centre or coffee shops and colleagues around the office.


Building a live prototype

I worked alongside a developer from the start of the project. This meant we could design and prototype simultaneously, identify technical issues early and test ideas on the fly.

Terminology & Icons
Testing confirmation, remove and explanation text options
Location setting
Simplify the navigation through content and features
Cross product sharing
Create a more consistent and intergrated experience

Lab testing

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

Iterate and build

What we found out from testing

1. User don't read messaging

2. Users like being redirected to their main location in other products

3. Recent and shared locations across products is a good thing

Final implementation

Consistent visual style, terminology and iconography. Search results, auto suggest and unified location setting across all products.

See it in action here BBC Weather, BBC Travel and BBC Homepage

Thanks for reading