We were asked to take the new Pizza Express branding, adapt it for digital and apply it to the existing website structure. A cohesive design system and guidelines were to be created with key-screen designs and prototypes.
UI, Responsive web design, Building Design systems and guidelines
Design Director – Matt Fenn
Senior Designer – Emma Mealy
Junior Designer – Belinda Ingrid D.
The challenge ——————
Solving UX problems through the UI design
The existing UX and user journeys had to remain the same and only 5 new components could be introduced, while the rest of the UI would be a simple reskin. After extensive research, we designed 5 components that would improve the user experience overall and have the biggest brand impact throughout the site, targeting navigational components and headers along with promo elements to make the site surprising, immersive and bring balance.
Intentional design ——————
The branding has bold and playful illustration and photography at its core. When adapting these elements for digital, we added logic to when these elements should be used throughout the experience, using illustration for function and photography for promotional elements.
The result ——————
An intuitive design system
We audited the existing components to simplify and add logic to the way in which they are used in order to build a scalable design system. We introduced a grid, typographic hierarchy, accessible colour logic, notes on interaction design, and component variants. The design system also contained clear instructions on how and when the components should be used along with advice on content selection and scaling in order to maintain consistency.