Pattern Library
Pattern Library was created to support all of Polaris Industries brand websites. It is a series of blocks that range between style elements (fonts, colors, button, etc.) to functional elements (forms, shopping, tools, navigation, etc.) All of these components are used within their content management system.
The goal of this project was to identify shared patterns / elements across all brand websites and design blocks to support those style and functional needs in an effort to streamline page creation and cost savings.
ROLE
Site Analysis, Wireframing, UI Design, Documentation, Gathering Feedback
Understanding the Problem
After meeting with the business teams it was quickly identified why the team wanted to move towards a content management system.
Everything is custom - Whenever a new page is required or updates needed to be made it required custom code.
Changes equaled delays - When changes needed to be made in QA it required additional time, if it went past the designated timeframe it would cause launch delays.
It's a costly method - The amount of developers that are needed to maintain the sites equals a higher cost per project for businesses.
Identifying Scope
Along with another UX designer, I conducted an audit of all of the brand sites in order to identify common patterns throughout each of the experiences. The audit paired with interviewing the business units allowed us to identify different themes that accounted for the various components needed for the CMS.
We were able to sort those patterns into the following categories:
-
Style - Colors, typography, actions, form elements, icons
-
Wholegoods - Anything that requires information be pulled from vehicle catalogue
-
Navigation - Clickable elements that direct you to another page or creates an action (not including navigation bar)
-
Media - Images, videos, carousels, galleries, 360 elements
-
Text & copy - Copy layouts
-
Tiles - Grouped components that include an action
-
Tools - Shopping tools
-
3rd party - Social media widgets
-
Forms - Templated forms
-
Layouts - Containers
From these categories we were able to work with the product teams to break these components down to level of effort and assigned several components for 3 sprints.
Design
Took the atomic design approach when creating the library. By breaking down the basic components of a site, we were able to provide the flexibility needed for the varying businesses styles.
ATOMS
Fundamental components of an interface that define styles of all elements
TEMPLATES
Combine all elements to create commonly used pages
MOLECULES
Consist of two or more atoms to perform a specific function
PAGES
Refers to a page that is used for a specific functionality in to work
ORGANISMS
Consist of two or more molecules to create complex functionality
Atoms
Created a template that defined all of the atoms (css styles) used for each site.
Atom Template
Gathering Feedback
Designs were reviewed by content team to ensure that all functional needs were met. If needs required business sign-off then review sessions with all brands were had in order account for their needs as well.
XD artboard in prototype mode
Gathering Feedback
Designs were reviewed by content team, as the primary user of these blocks, I wanted to ensure that they understood all the potential options available. If there were major functional needs, business units were brought in for unified review sessions in order account for each brands individual needs.
Defining a Block System
The next phase where we defined and documented new functional blocks (molecules / organisms). These documents were used in development as well a guide for business units and content team.
Various Block Documentation
Implementation
After blocks were approved by both groups there was a handoff process where I would walk development team through the design and answer any initial questions and any further questions that were uncovered along the way.
Assisted in the QA process to ensure that all visual and functional expectations were met.
A pattern library was also built to document all feature variations so that the content team could reference whenever a new page request was made.
Once the pattern library was established content team went through the exercise of doing site migrations from genesis platform to EPI server. Collaborated with content team as they were learning the system to establish block strategy on page builds.
Block strategy - GEM homepage
