Digital Style Guide and Pattern Library

Work_Examples_WestfieldStyle.jpg

Design language for Westfield digital products

We created the design language for Westfield digital products and the Food ordering platform. The style guide was a living document accessible by all Westfield stakeholders.

Project Goals

  • Develop new design language for Westfield digital products

  • Create documentation site to communicate design language with broader company and third party vendors

Role and Responsibilities

  • Visual Designer

  • Helped develop design language by contributing to the selection of typeface and refining the color palette

  • Assisted with site architecture design and documentation

  • Designed Icon set

  • Provided site assets such as images and SVG elements

  • Created sketches, wireframes, and documentation throughout the process

How we worked together

It was early in the life of Westfield Labs when a team of 3 designers and I embarked on this mission. We had a very tight deadline and were tasked with defining the design language for the future digital products at Westfield. There were a lot of early mornings followed by late nights, then more work when we got home. We put our heart and soul into this project and were able to meet our deadlines. We incorporated daily stand-ups (2 a day), and were in constant communication with the executives and stakeholders abroad in Australia and the United Kingdom. 

Style guide - Web overview section

Design and engineering white-boarding session

 

So, what happened?

We successfully launched the Westfield Digital Style Guide, complete with code snippets and downloadable UI kits. The style guide has evolved since then, but is still referenced by the design, product, and third party teams.

 

Some key insights

  • We initially started out with a custom font for our UI across iOS and Android. We quickly learned that we compromised accessibility and updated the UI with native font solutions while keeping any brand and marketing language in our custom font.

  • It was very difficult to incorporate a digital style guide with the physical print assets needed in center. We had to separate them.

Actions taken so far

  • A new, living, digital style guide has been released, including responsive page components and page builders for previewing designs in live code.

  • Updated Typeface based on revised global brand update.

Other Designers

Lissette Arias, Kevin Freeland