Hameda
Product Strategy & Design
Made with

Purolator
- Digital Style Guide

To create a scalable digital style guide for Purolator Brand to support their global initiative to refresh all their digital properties

  • Client: Purolator
  • Time: April - July 2019
  • Role: UX Lead
  • Deliverable(s): Digital Style guide/Design System based on new rebrand guidelines & a scalable digital web platform that displays the rules and live samples of the components
  • Platform: Responsive Web app

The Approach

Stakeholder Interviews and Audit 

Since the original pitch was created more than 6 months prior to my joining the company, the original stakeholders and requests might have changed slightly.  I decided that interviews to gather the expectations and goals of relevant stakeholders will allow us to define our users and the final delivery format of the Digital Style guide.

  • Main users are internal developers, designers, marketing teams as well as contractors 
  • We need to audit all existing UI, Interactions, Components and patterns and update all based on latest company rebrand 
  • Identify & fix Accessibility and usability issues to meet WCAG 2.1 standards 
  • Design and develop a scalable, accessible digital style guide to allow users to view, reference, copy snippets of code, download assets and view interactions of components in realtime

Purolator - Digital Style Guide

Audits & Inventory Logs

I moved onto auditing and completing a complete inventory on the existing UI assets and components to ensure that the system we design can be transferred to their new digital platforms

Challenges

  • Multiple versions of UI assets with complex overrides
  • Sort through many overrides to provide recommendations on a new modular approach 
  • Lack of designers on their team to help answer & make key decisions in turn slowing down approval and feedback process

Purolator - Digital Style Guide

Wireframes

I created wireframes for the templates that we need for every level of the Digital Style Guide website.

Templates Breakdown

  • Primary Landing page (links out to Brand, Design Language & Components)
  • 2nd Level - Brand, Design Language & Components 
  • 3rd Level - Assets page

UI Design

I worked with an Art Director to create the Designs for the site that will host the UI Assets, components and modules.  

Retro

Providing Context and Knowledge Sharing

I've always been very thorough and like to provide context to whatever projects, workshops or presentation.  However, working with this particular project has allowed me to develop a system to properly onboard, brief and provide relevant content prior to internal team meetings as well as with clients.


Key Takeaways:

  • never assume everyone remembers where we left off (don't we all have super memory?) 
  • provide an overview of things that were discussed, outstanding, blockers and key decisions will allow everyone to move forward in a timely manner without missing timelines