The Brief

Make the mobile design experience more useful, and throw in the best of user experience and design for mobile, whilst making the most of all the hard work currently done on the responsive site.

Our design approach

We should bring all the bells and whistles from the desktop website redesign to the mobile design. The key was making the information easy to view in a format that was big on quality yet pleasing on the eye.

We knew a responsive mobile style guide would create the wow factor for many years to come. Striking a balance between visual language and aesthetics would play an important role.

Insight

Content curation was key. Bringing all the snap, crackle and pop from the desktop site to a speedy mobile-shell. Surfacing more types of content would make for a better more enjoyable mobile experience

Content curation

We wanted the user to have a sharper overview of all the content, and not be bogged down with endless layers of content. This content curation helped reduce load time, whilst also clearing a path for the mobile user to keep finding exactly what they want.

So, if a user stumbled on something they like, they would just be one click away from lots of similar content. This made the content discoverable, really giving the user more of what they wanted. On our landing pages we wanted less of the same content, and to surface more varied content.

A piece of cake

Typographically we kept font sizes, colours and weights to a minimum range – providing a unified mobile experience, and making future font changes a piece of cake.

Displaying the white category lists as accordions matched the simplicity of the site design when revealing the list of links; Popular recipe categories, Popular recipes this week, Top keyword search.

We added a Restaurant locator to the restaurant section of the mobile design, bringing the user that step closer to restaurant of their choice.

Results

Designing with the best features, and best practices for mobile.

Over-delivering on the brief requirements, and having fun with it, resulting in an extensive mobile style guide and new mobile Homepage.

Longevity – designing the mobile style guide gave a timeless look & feel.