Search Results Page
BBC iPlayer

Artboard 4 Copy.png

Leading this project I worked with UX Designers, Research, Developers and Product throughout, contributing at the discovery phase, facilitating usability testing and providing the UX and UI across all breakpoints.


Brief

Redesign the search results page on iPlayer

Solution

Leading this project I worked with UX Designers, Research, Developers and Product throughout, contributing at the discovery phase, facilitating usability testing and providing the UX and UI across all breakpoints.

The result changed the current list layout to a grid format, allowing for results to be clearly displayed to users in a more visual and easy to navigate page that reduced space wastage caused by the initial list pattern.

My Role

To begin the process I had an initial conversation with our Business Analyst and Product owner, this allowed me to establish the key stats on the page to highlight painpoints.

The layout we originally had in place can be seen above. The examples shown highlight when unavailable items appear first and when there is no available items shown. 

The layout we originally had in place can be seen above. The examples shown highlight when unavailable items appear first and when there is no available items shown. 

The main challenge was that we had to accommodate both unavailable and available items, meaning our two areas of discovery were the structure/layout of the page and how to clearly define an unavailable and available item.

I diverged on ideas and brought together a discovery presentation. This was then shared with Product and Developers in a workshop format to gauge the tech feasibility and encourage further ideation.

Layout Exploration

Using Sketch I explored different variations of how each search result could be displayed to clearly define available and unavailable items, whilst also exploring the option of displaying results in a grid – a more common pattern for this search result pages and the direction iPlayer was heading on other pages.

We held a UX review in order to go through the range of UI options. After this discussion I could then go on to build a prototype for user testing. In Sketch I learned to populate the file with real data, allowing me to quickly pull together an accurate, high fidelity prototype. (Examples from this can be seen in the video below)

I then worked with our researcher to provide the goals and define the scope of the research, whilst also working with her to write the discussion guide.

We tested with 8 users, of which I facilitated and ran 4 sessions. Overall this was a success, with users commenting positively on the grid layout. 

I then gathered the findings and presented them back to the wider iPlayer team and senior leadership to gain further feedback.

We completed a further round of discovery to iron out final details. The focus of this was onward journeys, exploring 3 different interaction patterns. These were guerrilla tested with 8 users. 

Interaction Exploration

The third option matched expected behaviour and therefore was the choice to move forward.

In sketch I brought together the specifications, catering for each breakpoint and highlighting the behaviours of the items.

Final explainer.png

Once completed I then sat down with Product, our BA, Project Manager and Lead Developer to go through the specification. These were well received and were ticketed on JIRA to be built.

Following this meeting I sat with the lead developer in order to ensure what was being built matched the design specified.

Final Devices

Summary

Stats following the page going live were positive with a greater percentage of users going on to watch content from this page.

I was given a great deal of responsibility on this project and lead throughout. A key part of the success of this was using stats/data in order to drive the design process from the very beginning.

  • Understanding of data
  • Concept Generation
  • Research
  • Self-Initiated work and Teamwork
  • Facilitation
  • User Scenarios
  • Present and communicate research findings
  • Collaborate cross discipline
  • UX Design
  • UI Design