Shaw Direct - Plan Builder Improvement

OVERVIEW

Role
I joined Shaw in 2022 as the sole UI/UX designer for Shaw Direct, where I was primarily responsible for improving the website’s buy-flow and navigation to enhance the overall customer experience.
Teams
Digital Customer Experience, Shaw Direct
Timeline
Octoberber 2022 – March 2023
Skills
• Web & Responsive Design
• UI/UX Design
• User Testing
• Prototyping
• Design System
• Product Thinking

PROBLEM

Streamline Your Digital Experience: Elevating the Buy Flow with a Smarter, Intuitive Plan Builder

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. Reduce confusion with better CTA for a more intuitive design

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:

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 on.

Adding a navigate link below the "Added" block
This option 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.

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. Is a CTA necessary, or could it be replaced with a link?

The header within the builder interface is currently oversized, occupying too much space on the page. There is excessive white space between the supporting text, header, and buttons. Additionally, the 'Back to Shopping' button is highly prominent and redirects users to the home page when clicked. While it's essential to guide customers through the configuration process, we should offer them a way to backtrack without giving this option too much prominence.

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” buton 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.

Our decision​

Deprioritizing the 'Back to TV Packages' option helps minimize decision points, improving user focus and speeding up the decision-making process. By reducing the number of available actions—especially removing an option that takes users backward—we streamline the flow and encourage forward momentum in the checkout process.

However, to maintain usability without cluttering the primary action path, we could introduce a subtle, less prominent way for users to return to the TV package. This would allow users to proceed without distractions while still providing an option for those who wish to review their selections."

III. Simplify the channel selection interface for a more user-friendly experience.

During our review of the channel selector in the Shaw Direct builder, we identified a significant usability issue. The presence of individual "Add" 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.

Our 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.

The design was approved and sent to the development team, but due to changes in the management team, a new direction was taken for this product. I also transitioned to another team, so only two other improvements were implemented on the live website.

CONCLUSION

At Shaw Direct, I frequently collaborated with the development team to navigate design constraints. Due to some circumstances, 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.