Design Pillars
The ODP Design System is based on a set of principles that help guide our decisions while building Canadian Tire Corporation’s digital experience. Each principle is related to one of our three design pillars: Concise, Consistent, and Considered.
Concise
Designing for a device-first environment for those who scan versus read. The principle of elegant simplicity is used to drive succinct content, strong visual hierarchy, and a human tone of voice to ease the cognitive load and give customers control over their own narratives.
Less is More
Users will scan and read a limited amount of content, so adhering to this principle will allow users to execute tasks with ease. Less is more means reducing clutter, and excess noise while presenting a clear message and hierarchy of information.
Product is Priority
Use the design system to support and augment the product and supporting information, never distracting or interfering.
Anticipate Actions
Leverage user behavior patterns to intelligently anticipate user needs, be proactive in sending reminders, and complete routine transactions with little user input or interaction.
How to apply “Concise” to design?
Modern User Interface
Users will scan and read a limited amount of content, so adhering to this principle will allow users to execute tasks with ease. Less is more means reducing clutter, and excess noise while presenting a clear message and hierarchy of information.Focus on Primary Tasks
Prioritize the most used features and functionalities within the navigation and page design. They should be easy to access, simple to complete, and effortless to repeat.Human Language
Copywriting & tone skew more human than utilitarian. Users will not read web content unless the text is clear, the words and sentences are simple, and the information is easy to understand.
Consistent
Instilling learned behaviors across the entire customer
experience by creating conventions and patterns that increase efficiency and performance. A tightly-knit system that increases brand recognition and creates a fluent experience across all banners and touch points.
Feel Familiar
Use established patterns to make experiences easy to use and memorable across banners. Look for similar design patterns before creating something new.
Design for Efficiency
A single design system enables the team to solve problems faster while maintaining a consistent visual language. Leverage a unified experience to create a more enriched experience.
Unify the Experience
Treat inconsistencies with caution and consider how to reunite them. Each element within each brand is a part of the whole, and everything contributes to the overall brand recognition.
How to apply “Consistent” to design?
Personalized Options
Surface unique features and functionality are based on user habits that adapt naturally over time as their demands of the service change. Leverage personalization to anticipate the customer’s needs and provide the right information when and where they need it.Simple Visual Language
A detailed, annotated language that is accessible across all working groups to ensure consistency across banners.Performance Driven
Applying efficiencies using a live component library with detailed documentation. Design and development working closely enable both teams to work faster, and smarter.
Considered
Trust in the brand starts with a feeling of care for the customer
at every interaction point. That care is reflected in the attention
to small details. Time spent upfront is prioritized to deepen customer relationships through the correct versus the fastest
route to market.
Gift of Time
Allowing the right amount of time to unearth the right solutions for the right problems.
Leverage Technology
Use technology to drive memorable experiences, enhancing versus letting technology drive the experience.
Instil Shopping Confidence
Providing an intuitive, empathetic user experience for all digital literacy levels through personalized offerings that help support faster buying decisions while reducing the burden and anxiety of online shopping.
How to apply “Considered” to design?
Measure with Intent
Qualifying decisions is critical and must be applied with intent. Consult with many sources, quantitative and qualitative to understand the reason behind the metrics, and to provide valuable insights.Magic in Motion
Smooth transitions between UIs are as important as the UIs themselves. Be selective, and add dimension and depth through movement where it’s unexpected to create elements of delight.Accessibility to All
Design for the lowest common denominator. Allow users who are less technically skilled to understand the UI, while allowing power users to do the same actions more efficiently.