warburtons-logo

B2B Customer Portal

warburtons-top-laptop-img

Warburtons B2B Customer Portal Web Design Overview

Warburtons is a family business headquartered in Bolton, North West England. Founded in 1876, they are the number one bakery brand in the UK. The challenge was to create a web application for their independent trade network so that users could manage orders and get current product information.

Layout

Based on Warburtons brand guidelines, the website has been designed to allow for complex data to be presented in an easy to digest and efficient manner so that their broad range of independent retailers can access a system that is simple to use and adds value.

Colour Palette

Warburtons have a vibrant colour palette that is very distinctive. We focused on the orange colour range to mirror the corporate website and interspersed this with supporting colours form the guidelines to help highlight certain areas of the site.

warburtons-colour-swatch-1

Lime Green

#bec425

warburtons-colour-swatch-2

Blue

#6baadf

warburtons-colour-swatch-3

Purple

#905ba7

warburtons-colour-swatch-4

Tan

#c98c34

warburtons-colour-swatch-5

Orange

#f17d29

warburtons-colour-swatch-6

Dark Orange

#cf4520

Typography

Warburtons use a series of fonts from the Shire family and the Hernandez family which have a very bold and unique set of characters. The fonts are based around a very British style of display type. Using this for headings and combining with sans serif fonts helped give the web application a connection to the other websites within the Warburtons family.

warburtons-typography

Font Family: Hernandez

Iconography

Icons and graphical elements are centred around a particular styling that Warburtons use across their identity. This includes grainy illustrations used throughout backgrounds to enhance the layout alongside industry standard simple icons to highlight actions.

warburtons-iconpgraphy
warburtons-browser-window-1

UI Components

Designed and built around SAP ERP technology and given that the application needed to present tabular data in a simple to read format, the UI has been designed with simple, efficient components in mind. It is imperative that users require no training to uptake and use the system, therefore, we removed complex design and instead introduced UX friendly components wherever possible.

warburtons-ui-buttons-primary warburtons-ui-buttons-secondary
warburtons-browser-window-2
warburtons-browser-window-2

On Page Marketing

Warburtons use of celebrities and movie icons is used across promotional on page messaging, along with pack shots and graphical ‘pings’ to enhance details. Promotional banners and messaging ‘pings’ appear throughout the application.

warburtons-ipad

Get in Touch

If you think we’d make a great partner for your business, get in touch and let’s discuss how our creative and technical expertise can bring you clarity and risk-free accelerated growth.

Contact Us Today

Take A Look At Some Of Our Other Projects

smyths-toys

Smyths Toys

B2C eCommerce Website Design

What We Did
flair

Flair Leisure Products PLC

B2B eCommerce Websites for Europe

What We Did