Shaw Direct - Plan Builder Improvement

Overview

I joined Shaw in September 2022 as the lead UI/UX designer for Shaw Direct, a direct broadcast satellite television distributor in Canada and a subsidiary of Shaw (now Rogers) Communications. My primary focus was enhancing the website’s buy-flow to streamline the customer journey and improve overall site navigation, ensuring a more intuitive and seamless experience for users.

The problem

Improving customer experience with a "plan builder". A builder will allow customers to customize their television service package according to their preferences and needs.

DESIGN PROCESS​

I. Confusion regarding how to modify selected plans within the builder interface.

After conducting a content square analysis to pinpoint friction points on shawdirect.ca, a notable issue emerged: 5.60% of customers exit the plan builder interface to revisit the packages page after their initial view. This behavior stems from a desire to alter their selected package, as they're unaware that they can modify their plan directly within the builder. This results in a 6% drop in conversion rates when compared to customers who remain within the builder to make adjustments.

To address this, we aim to enhance the user experience by ensuring all customers understand they can modify their selected plan from within the builder interface, thereby reducing cart drop-off rates.

Customers are currently able to change their plan by clicking on the “Select a TV plan” CTA. But it seems to not prominent enough to encourage them to click on it instead of going back

Proposed solutions:

Reframe the "Select a TV plan" CTA as "Edit plan selection" and underline it to clearly signal to users that they can modify their chosen plan within the builder interface. This adjustment aims to reduce the cognitive load associated with decision-making, users can more easily comprehend their options and navigate the interface efficiently the likelihood of premature exits to the packages page. By explicitly indicating the option to edit the plan, we aim to enhance user awareness and empower them to make informed decisions without unnecessary navigation.

Option 1:

Adding an edit block below the block indicating the package has been added
This option provides a clear and direct way for users to edit their selected package. Placing the edit block below the "Added" block maintains visual continuity and guides users to the appropriate action without confusion. This approach aligns with the principle of visibility, ensuring that the edit option is easily accessible and prominently displayed.

Option 2:

Adding a link CTA below the "Added" block
Introducing a link CTA below the "Added" block offers a more subtle approach to indicating the edit option. While this option may provide a cleaner visual design, there is a risk that users may overlook or miss the link, especially if it is not clearly differentiated from surrounding elements. It is essential to ensure that the link CTA is noticeable and stands out enough to attract users' attention effectively.

In conclusion, both options offer viable solutions for allowing users to edit their selected package. Option 1 provides a more explicit and visually prominent edit option, while Option 2 offers a cleaner design with a potentially less intrusive link. The choice between the two options should be based on the specific user experience goals and design preferences for the Shaw Direct builder interface.

Our decision

Option 1 was chosen because it seamlessly integrates with the existing system. By placing the edit block below the "Added" block, we maintain consistency and familiarity for users. This ensures that users can easily locate and utilize the edit option without confusion. Overall, Option 1 provides a user-friendly solution that fits seamlessly within the existing interface, facilitating a smooth editing experience.

II. Excessive header size and unnecessary dominant CTA cause visual clutter and confusion to customers.

The header within the builder interface is presently oversized, consuming an excessive amount of space on the page. Additionally, it features a "Back to Shopping" call-to-action (CTA) that, upon clicking, directs users to the home page. While we aim to prioritize guiding customers through the configuration process, it's important to provide them with options to backtrack, albeit not as prominently.

Proposed solutions:
• Shorten the header and ensure the sub-head text appears on a single line, reducing visual clutter and optimizing space utilization. By condensing the header, we improve the overall layout and enhance readability, aligning with the principle of simplicity in user interface design.
• Consider removing or resizing the “Back to shopping” call-to-action (CTA) to reduce its prominence without compromising its functionality. This adjustment aims to strike a balance between providing users with the option to backtrack and minimizing distractions, thereby improving the user experience and encouraging users to focus on completing their configuration.

An optimizely test was done in June 2022 that tested removing the “Back to shopping” CTA and removing it actually reduced conversion rate, which is why the CTA was kept there following the test. A potential reason for this could have been the excessive empty blue space on the right since the text appears in 2 lines on the left. We could re-test with updating the spacing on the banner, or keeping the CTA but changing its size.

Option 1:

Retaining Functionality with Clarity
Maintain the button functionality but adjust the copy to accurately reflect its action, specifying that it leads customers to the channel packages instead of the homepage. This modification ensures transparency and aligns with users' expectations, enhancing the overall user experience.

Option 2:

Balancing Prominence and Navigation
Retain the CTA functionality based on the optimization test results, acknowledging its impact on reducing cart abandonment and maintaining conversion rates. However, given the potential for user confusion with the current copy, consider replacing the button with a less prominent link CTA. The updated label should clearly indicate its destination, such as "Back to TV packages," providing users with the option to navigate back to the previous screens while minimizing the risk of premature exits from the plan selector. This adjustment strikes a balance between offering users navigation options and encouraging them to proceed with the configuration process within the plan builder interface.

Our decision

The decision to deprioritize the "Back to TV packages" option aligns with the Hick’s Law UX principle, which suggests that minimizing decision points improves user focus and speeds up decision-making. By reducing the number of actions available—specifically removing an option that takes users backward—we streamline the flow and encourage forward momentum in the checkout process.
However, to avoid losing navigation entirely, we could offer a subtle, less prominent way to return to the TV package. This allows users to proceed without distractions while still providing a path for those who may want to review their selections, maintaining usability without cluttering the primary action path.

III. Cluttered channel selection interface with multiple identical "Add" CTAs, leading to confusion.

During our review of the channel selector in the Shaw Direct builder, we identified a significant usability issue. The presence of individual "Add" call-to-action (CTA) buttons for each channel creates visual clutter and confusion for users. Additionally, these CTAs closely resemble the primary conversion CTAs, leading to potential user errors and frustration.

Proposed solutions:
• Explore replacing the “Add” CTAs with another design element to improve customer experience and make the page cleaner and easier to navigate
• Implement a progress tracker for channel selection: Adding a progress tracker allows customers to track their progress as they add their favourite channels to their plan. This feature enhances transparency and provides users with a visual indicator of their progress, making the channel selection process more engaging and rewarding.
 • Revamp the channel selection interface with a counter: Instead of toggling between automatically selecting channels and manually selecting channels, introduce a counter to show users how many channels they have selected. This allows users to select some channels manually and then ask the system to fill in the remaining channels, providing greater flexibility and control over the selection process.

These UX improvements aim to streamline the channel selection process, reduce user effort, and enhance overall satisfaction with the Shaw Direct builder interface. By implementing these changes, we can create a more intuitive and user-friendly experience for customers, ultimately improving conversion rates and customer retention.

Decision

The positive feedback on the proposal can be attributed to several key UX principles:

• Progressive Disclosure: The step-by-step indicator provides just the right amount of information at each stage of the plan builder, reducing cognitive load. Customers can focus on the current task while having a clear view of the overall process, making the experience feel less overwhelming.

• Feedback and Visibility of System Status: The progress indicator ensures customers are always informed about where they are in the journey and what steps remain. This transparency gives users a sense of control and reduces uncertainty, improving overall satisfaction.

• Consistency: A modern, cohesive design and intuitive interface build familiarity and trust. When users encounter a clean and predictable design, they feel more confident navigating and making decisions.

By applying these UX principles, the new design enhances usability and empowers customers to have more control over their journey, contributing to a smoother, more engaging experience.

Conclusion

At Shaw Direct, I frequently collaborated with the development team to navigate design constraints. Shaw Direct wasn’t a business priority, and the outdated CMS made building new components time-consuming. This created a balance between business goals and customer needs.

As a UX designer, I prioritize delivering the best customer experience while considering business constraints. User needs drive the solutions, and business needs act as boundaries. My approach focuses on feasibility, ROI, and balancing impact versus effort, both in building and long-term maintenance, to help stakeholders make informed decisions.