Overview: Cloud UI Full-Page Pricing Calendar
- Sarah Holst
- Jenni Buonanni
- Erin Hunter
This feature is supported for Aspenware Cloud customers only.
One of the many benefits of Cloud UI is the ability to quickly and effectively refresh UI designs. The Redesigned Pricing Calendar is a fresh look at Aspenware’s larger dynamic pricing calendar with loads of research, iterative design, and testing behind it. Price and inventory scarcity design has been optimized to maximize conversions and user comprehension based on Usability Testing and A/B testing results
Price Scarcity Display - Green vs. Red
Tiered pricing is a common strategy to encourage immediate purchases by hinting at impending price increases. When using tiered pricing, Aspenware lets resort users define "limited-time deal" dates by setting a price scarcity threshold. We suggest a threshold that triggers urgency for many but not all dates in a season to optimize this.
Our recommendation stems from A/B tests during pre-season sales. These tests aimed to enhance metrics by highlighting low-priced dates on a full-page calendar. Red text didn't work, but green text significantly improved results. This was especially true for first-time users or "window shoppers," a segment notoriously hard to convert. With green prices on the calendar, this group's likelihood to purchase increased by 6.7%, and their revenue per visitor surged by 27.5%. Overall, revenue per visitor increased by 19% for all users exposed to green prices.
You may now customize the color of dates for which the price is about to change and control the messaging presented to the guest. This customization, backed by Usability Testing and A/B testing, optimizes the pricing calendar's design for maximizing conversions and user understanding.
Increase Conversions with Inventory Scarcity Indication
If products that use the pricing calendar have inventory added, we recommend indicating which dates have lower-than-usual availability by setting the inventory scarcity threshold. Research shows that creating a sense of urgency for inventoried products motivates guests to purchase and is proven to drive more revenue and boost conversions. Low inventory date background shading offers the messaging that creates that sense of urgency.
One resort ran an A/B test on its inline calendar with this scarcity design for lesson products for the 2023/24 season, splitting traffic 50/50, with 50% of the traffic seeing the current calendar, which only shows sold-out dates. The other 50% of traffic saw the inline calendar with yellow background-shaded dates to indicate low inventory. In this test, the color-coded experience won with a 4.4% increase in lesson purchases and $110k more revenue.
The background shading for inventory scarcity on the full pricing calendar is optimized to maximize conversions and comprehension based on Usability Testing and A/B testing results.
Comparing Inventory and Price Scarcity on the Large Calendar Versions
Use the chart below to compare how the new Cloud UI Redesigned Pricing Calendar stacks up against the standard Commerce calendar and the Advanced Pricing Calendar.
Scenario | Commerce Pricing Calendar | Commerce Advanced Pricing Calendar | Cloud UI Pricing Calendar |
|---|---|---|---|
Product uses tiered pricing, and the threshold has been hit to trigger the “Only 10 left at this price!” message. | A banner shows how many are left on all dates with price scarcity. | Background of dates with price scarcity can be shaded and the legend may be customized. Banner indicating how many left display. | Dates with only price scarcity have green text and no background shading. Banners showing how many are left have been removed to simplify pricing information presented to the guest. |
Product has inventory and has reached the threshold to trigger messaging that inventory is low for that date. | A banner shows how many are left on all dates with inventory scarcity.
| Background of dates with inventory scarcity can be shaded and the legend may be customized to indicate plenty, low inventory, and sold out uniquely, and customize the legend for each status. A banner indicates how many are left on that date. If date has both inventory and price scarcity, dates with price scarcity have red text. Red text is not customizable and has no legend. | Triggered dates are shaded yellow. The yellow color is configurable in the Aspenware Styling pluginr, but we recommend #F6D241 for ADA compliance. A legend for background shading is available to help with user comprehension.
|
Product has inventory and sold out threshold has been triggered. | Sold out dates show the day in grey, have a grey diagonal slash through them, and have the words “SOLD OUT” displayed. (Note that this treatment is different from the “Unavailable” treatment for days in the past, past the cutoff time, etc. Unavailable dates will simply have a light grey date and not be clickable.) | Sold out dates have a grey background, and the legend value for sold is customizable.
| Sold out dates have a grey background, and the legend value for sold out is customizable.
|
Date Scenario Examples
The following table containsexamples to help you understand how various common date scenarios will be displayed on the calendars.
Date scenario | Pricing Calendar | PDP Calendar | Radio button date | Admin notes | Theme notes |
|---|---|---|---|---|---|
Available unselected with no scarcity | Date appears as selectable Oct 31 - without base price
With base price
| Date # is black and centered in square box with
| Oct 29 - inherits radio button design system treatment
| AUS/NZ/CA culture date format adjustments for radio button date and how date is displayed in item summary and cart notice
| Not customizable |
Available and selected | Hover state on the 15th
Clicking will remove grey and set a heavy outline in resort’s primary color right before page change | July 17 Selected date has a heavy outline in resort’s primary color right
| Oct 28 - inherits radio button design system treatment
|
| Selected date outline color. |
Available with price scarcity - which means tiers are configured and are below the store-wide price inventory threshold (same as legacy) | Dates that are $15 have tiered pricing with limited amount left
| No indication
| No indication
| Global store-wide Lang string for price scarcity key= calendarsettings.pricingcountmessagethreshold Global store-wide setting to display great value = Store-wide threshold. If Pricing inventory is equal or below this threshold the date will appear as green on pricing calendar catalogsettings.dynamicpricingcalendar.pricingcountmessagethreshold
| Green color - defined in Theme Designer. We recommend #28763A for ADA compliance and based on A/B test results. |
Available with inventory scarcity | Unselected date with scarcity has entire cell shaded with configurable scarcity color and black text.
| Unselected date with scarcity has entire cell shaded with configurable scarcity color and black text.
Selected date with scarcity | Item summary only
| Background color is configurable with setting calendarsettings.lowinventorybackgroundcolor Requires that product is set up with calendar templates. The low inventory legend key comes from calendar template configuration “legend label”. | Badge is not configurable. Background color is a store setting and can be changed outside of Theme Designer. |
Unavailable because it is sold out, meaning POS inventory is returned and none is available | Key displays on calendars if they have inventory. Grey background is not configurable. Dates cannot be selected if sold out. | Grey background is not configurable. Dates cannot be selected if sold out. If no future date availability, a message is displayed.
| Date will not appear. If no dates are available, then the “no dates are available for your selection” message will appear.
| If a product has inventory added, the sold out key will display. Global language string for sold out dates legend calendarsettings.soldoutstatustext
| Grey is not configurable. |
Unavailable for any other reason:
| July 1 -15 Date displays as grey and strike through. No key value.
| July 1 -15 Date displays as grey and strike through. No key value. | Date will not appear. If no dates are available, then the “no dates are available for your selection” message will be displayed. |
| Unavailable date appears as grey and strike through across all. |