BBC GoodFood
BBC GoodFood’s website serves as a primary destination for UK cooking enthusiasts and complements their TV and magazine offerings.
BBC Worldwide noticed a growing mobile audience in 2012 and wanted to optimise their 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.
My role
I worked on this project as the UX designer for Nimble Mobile, an agency retained by BBC Worldwide to provide mobile strategy, design and production services.
Analysing core features
Existing functionality had to be retained and all existing elements had to be accommodated for the mobile layout.
Starting with a content audit of the desktop website, I identified the elements across the 3 features that form the backbone of their website. Some content groups had to be removed or reduced to reduce page load size but the overall content was retained.
Visual density of recipes
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 evaluated various layouts before settling on a vertical, card-based format for a denser display.
Recipe cards were used to present the information in a visual yet reasonably dense format. We evaluated various layouts before settling on a vertical, card-based format for a denser display.
Search functionality on a compact display
The search widget was displayed prominently while the numerous search filters were tucked away to be revealed only if required.
Their popular recipe Binder allows users to collect their favourites and store menus.
This was also 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.
Outcome
Reworking all existing content into a mobile format proved challenging, particularly as it made the display very information dense.
The final outcome was a series of mobile layouts for the Home, Search Results and the actual Recipe pages for deployment to mobile viewers. As part of the process, I audited their content, provided end wireframes for development and built a prototype that we then used for usability testing.
While the search functionality performed well in tests, 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.
The ample advertising woven in to provide ad placements inbetween the content maintained the business partnerships from the desktop and proved valuable in initiating internal dialogue. This helped bring about an eventual balance between business interests and the needs of their mobile audience.
Website
