Digital Brand Refresh

Design principles
Visual language
Colour palette

Workshop Presentation

Lead designer on a brand refresh to define digital guidelines and develop a clean, vibrant and fresh new visual style across all touchpoints, providing a consistent brand experience for Ocado customers. Solving legacy problems and inconsistency across multiple channels and teams, using audit, research, best practice and design strategy to inform decisions.

Led internal workshops to define the Ocado core brand elements, design principles and creative messaging. Building this foundation empowered us to build a fresh, new and flexible visual style and design systems for all teams, improving workflow and lead times.

Facilitated and attended workshops, hangouts and meetings with UX Webshop, Product and Marketing teams to problem solve issues and complete project objectives. Worked closely with UX teams building the UI design system and live test projects, based on the new visual style principles and elements, giving regular feedback to ensure consistency.

The digital colour palette was simplified and reworked for the new vibrant visual style and to meet the needs of all teams, while aiming for AA accessibility standards. The number of colours in the core palette were reduced for simplicity and to strengthen the brand identity. A colour strategy was developed and applied to all global visual elements based on brand style, market research and best practice. For example colours attached to core Ocado services, primary buttons and colours with semantic and consistent meaning for the customer across touchpoints.

The type audit revealed over 800 font style variations on the website and legacy variation across all teams. Based on the Ocado logo, character style and budget, we selected a new brand typeface with very close characteristics with the original Ocado logo, but that had a full usage in digital and print. We tested this font in situ across all touch points and user tested for legibility and readability with the UX teams. A set of font hierarchy rules were agreed and the font was rolled out across Ocado.com and into all new design projects moving forwards.

Imagery guidelines were updated to bring more vibrancy and impact to photography and creative. The macro fruit and veg textures featured on delivery vans, a key part of the original brand identity, were revisited and developed as a photography style to play a key part in the new visual design. A scaling icon to illustration strategy was developed to allow flexibility in digital and keep a consistent thread throughout the visual language. New style pixel perfect UI icons were created, with a strict set of rules for consistency and meaning for the user. Global UI elements - like buttons, grids, links and icons - were defined and tested to work for both UX, front end and creative teams.