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: 2 Months
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
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
Audits & Inventory Logs
I moved on to 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
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.
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