BBC GoodFood’s website serves as a primary destination for UK food lovers and complements their program and magazine.
BBC Worldwide noticed a growing mobile audience in 2012 and wanted to optimise the website with a mobile serving layout. Their brief was to focus on the core journey of search to recipe discovery and provide mobile layouts for them.
I worked on this project as a UX designer for Nimble Mobile, an agency retained by BBC Worldwide to provide mobile strategy, design and production services.
I started work by taking a content audit of the desktop website to identify common elements and to list the different components that needed to be included.
The existing functionality had to be retained and this meant accommodating all the elements in the design.
With the large number of recipes, I opted for infinite scrolling to display as many results on mobile as possible.
Recipe cards were used to present the information in a visual yet reasonably dense format. We discussed various layouts before settling on a vertical format for a denser display.
The search widget was displayed prominently while the numerous search filters were tucked away to be revealed only if required.
The popular Binder allows regular users to store their favourite recipes and menus.
This was retained in the mobile layouts but compressed to integrate the sign in and display states into as slim a profile as possible due to the limited screen real estate.
Home, search and recipe pages incorporated all existing elements in a dense display while ensuring that none of the content or ads were left out.
Reworking all existing content into a mobile format proved challenging, particularly as it made the display very information dense. But keeping all ads, content and partnerships from the desktop proved valuable in initiating dialogue internally, bring about an eventual balance between business needs and a mobile audience.
While the search functionality performed well, certain development constraints meant the final outcome wasn’t executed as per design. This hindered full implementation but also brought forward a complete overhaul of the website in the long run.
On the whole it was a useful exercise to explore search function on mobile and to understand usable limits of content for mobile websites.
