Sale Patterns

Empower teams to design consistent, engaging, and effective promotional user interfaces across all digital platforms. These are essential for highlighting limited-time offers, showcasing seasonal discounts, or promoting seat sales, ensuring every promotion captures attention while aligning with our brand identity.

When to use

Sale patterns should be used thoughtfully and sparingly to maintain their effectiveness and impact. They are best suited for creating promotional content that drives customer engagement and highlights special offers.

Do

  • Limited-Time Offers: To convey urgency and prompt quick decisions for time-sensitive deals.
  • Seat Sales: To draw attention to discounted airfare or travel packages.
  • High-Value Promotions: For promotions with significant discounts or benefits that warrant extra visibility.

Don't

  • Exclusive Member Offers: Follow WestJet Rewards specific guidelines.
  • Low-Impact Discounts: Minor savings that don’t warrant prominent attention or applications that are “always on”

Do not use any of these treatments as solutions to “make things pop”.

Colour

Aurora Green was added as the foundation for sale patterns, chosen to stand out while complementing the brand, ensuring promotions capture attention without straying from the overall design identity.

  • Use only as an accent: Teal remains the primary brand colour and should be more prominent in the overall design hierarchy.
  • Aurora on white surfaces: Avoid using Aurora on white without supporting elements, the high contrast can cause chromatic aberration and uncomfortable eye strain.
  • Do not use Aurora on logos: Do not use Aurora on logos or brand devices, as it impacts brand strategy and integrity.
  • Do not use Aurora for actions or buttons: Aurora should be used as a visual cue to enhance and guide attention, rather than as a functional element or interaction.
  • Ensure text accessibility: Any text placed on Aurora Green must meet WCAG accessibility standards for contrast.

Strike-through prices

Strike-through prices are commonly used in sale patterns to highlight discounts by showing the original price alongside the reduced price. The original price should be subtly marked with a strike-through, while the sale price stands out in bold. This clear comparison helps emphasize savings and is a key visual element in promoting offers effectively. Take caution, strike-through patterns can cause accessibility issues, and the risks should be evaluated before using.

Do

  • Ensure proper contrast between the strike-through price and the sale price.
  • Place both prices in close proximity to help users easily compare them.

Don't

  • Rely solely on visual indicators. Always include appropriate HTML tags for accessibility, rather than just using a line through the price visually.
  • Overuse strike-through prices. Keep it clear and simple—only highlight discounts when they are significant.

Visual expression

Starting with the core elements of the system, sale patterns act as an extension of our design system. This visual expression builds on the foundations of the system, while driving customer action and making promotions stand out in a cohesive and compelling way.

Kelsey

Principal Designer