Homepage mobile, our range archive.

Our Role

UI/UX Design | Typography | Design System Application | Development | Content Population

Industry

Food & drink

Mr Kipling’s website has a clear job: help people find products, understand what’s in them, and get answers fast through FAQs and support. The old site was boxed in. Colours could not keep pace with the brand. Updates were slow. Mobile usability lagged. And the web team had limited control over what stayed live, what got removed, and how new products, recipes and promotions were added.

We worked with the web and marketing teams to focus on what mattered most: findability, product clarity, and a CMS the team could use day to day. That included sitemap guidance to make key content easier to reach, not just easier to design.

Mr Kipling also needed to feel like Mr Kipling. We built within the Premier Foods design system, then applied it in a way that protected the brand’s iconic cues while improving consistency and flexibility across templates. We also updated colours to meet AA accessibility requirements without washing out the brand.
Photograph of cakes.
Tablet modules.

Product content, made easier to manage.

Product pages carry detailed ingredients, allergen and nutrition information. We designed modules that let the team manage these details cleanly, including regional requirements like UK traffic light labelling. Content publishing was treated as a priority, not an afterthought.

We launched the rebuilt site and trained the web team so they could confidently manage content, retire old product pages, and keep information current.

The team can now update content quickly, keeping product information and support pages accurate and useful. The experience is now infinitely more usable on mobile, so consumers can find what they need without friction.

Sitemap.
Mobile navigation breakdown.
Colour palette.
Type breakdown.
Mr Kipling product cards.

Shared system, brand-specific execution.

Mr Kipling is rebuilt as part of the wider Premier Foods website system, with shared rules for layout and content modules. These modules are the building blocks of each page, making it easy to structure and present the right information. That includes standard components like text, imagery, video and carousels, alongside food-specific modules such as UK traffic light labelling and nutritional tables. The web team can update and remove content quickly, giving them a stronger, more capable platform for new products, recipes and promotions.

Click here to read about how we built a flexible website system for Premier Foods, capable of deploying websites just like Mr Kipling’s for any brand, accessibly and consistently.

Mr Kipling, desktop and mobile of different product pages.