Spectrum
E-Commerce Website Redesign
Enhancing the Online Shopping Experience to Boost Sales and Improve Customer Satisfaction
PROJECT OVERVIEW
Problem
The Spectrum e-commerce platform faced several challenges, including high bounce rates, low add-to-cart rates, and poor checkout conversions. Customers were frustrated by incorrect service availability, overwhelming options, difficulty modifying selections, a complicated checkout process, and unclear confirmation steps
Solution
I led the UX design strategy, focusing on simplifying the shopping journey and aligning user needs with business goals. Key features implemented included:
Simplified side-by-side service comparisons
Interactive filtering and sorting options
Impact
The redesign resulted in significant improvements:
A 4% increase in order conversion rates
25% faster decision-making by users
80% of users felt confident in their service selection due to "Recommended" and "Popular" package callouts.
Role
Senior UX Designer
Research
Design Strategy
Interaction and UI Design
Prototyping and Usability Testing
Company
Charter Spectrum
Year
6 months in 2021
PROJECT BACKGROUND
Recognizing the Disconnect and Clarifying the Path Forward
When I joined the Spectrum project, there was significant uncertainty surrounding the goals and strategy for improving the customer-facing shopping experience for residential services like internet, TV, and bundled packages. The vision lacked direction despite a product roadmap, A/B testing, and reports highlighting key issues—high bounce rates, low add-to-cart rates, and poor checkout conversions.
Recognizing an opportunity to connect the user experience and conversion rates, I took the lead in defining a UX design strategy. My approach centered on simplifying the shopping journey, aligning user needs with Spectrum’s business objectives, and creating a more intuitive, user-centric process.
USER RESEARCH
Gathering Insights from Customer Interviews
With the support of the design manager and research lead, I initiated a series of online usability tests with ten potential Spectrum customers to better understand their overall experience when placing a new order.
From the interview findings, I created a map illustrating the points of customer frustration on each page during new order placement while shopping for new orders.
Summary of Key Challenges Customers Faced
Through user research and mapping, several key challenges were identified that negatively impacted the shopping experience and potentially contributed to high drop-off rates:
Incorrect Service Availability
Overwhelming Service Options
Difficulty Modifying Selections
Complicated Checkout Process
Unclear Confirmation and Next Steps
DESIGN EXPLORATION
“How Might We” Approach
How might we simplify comparing services so customers can easily understand differences in packages?
How might we guide customers through the selection process by providing personalized recommendations based on their preferences?
The next step in addressing the key challenges was to explore potential solutions using a “How might we” approach. This allowed us to frame each problem as an opportunity for improvement.
I worked closely with the product manager to brainstorm and sketch quick solutions for each issue, focusing on simplifying the shopping process and enhancing the user experience.
How might we introduce filtering and sort options based on their need to reduce choices?
TEAM ALIGNMENT
Vetting and Prioritizing Design
After exploring and developing several design solutions to address the identified challenges, I presented the concepts to Spectrum’s leadership team.
This step involved sharing product briefs and sketches and outlining the expected impact of each solution on the customer experience and key business metrics, such as conversion rates and user satisfaction.
The following solutions were integrated into the product roadmap:
Simplified Side-by-Side Comparisons to reduce decision fatigue by allowing customers to compare features, potentially boosting add-to-cart rates and reducing bounce rates.
Interactive Filtering and Sorting to streamline the service selection process, potentially improving overall conversion rates.
Guided Service Selection Tool to provide personalized package recommendations, potentially increasing user engagement and upgrades.
A/B Testing
Analyzing Two Versions of the Storefront Page
Experience A experienced lower conversions, as many users abandoned the process before finalizing their selections due to the effort required to sift through all the available options.
After the design priorities were approved, the next step was to test the Storefront page. The main focus was on adding an interactive filtering option.
The A/B test demonstrated that adding filtering options in Experience B significantly improved user engagement, add-to-cart rates, and order conversions.
Data supported the recommendation to roll out the filtering functionality across the platform, showing that simplifying the service selection process results in better business outcomes.
Experience B also led to a 4% increase in order conversion rates. By simplifying the process of finding and selecting services, the filtering system reduced drop-offs and encouraged more users to complete their purchases.
DESIGN
Wireframing Ideas
Presenting information in a grid format
One of the main ideas explored during the design phase was making the service comparison process easier, as users were overwhelmed by too many options. To solve this, I created wireframes for a Simplified Side-by-Side Comparison layout designed to provide users with a more straightforward and user-friendly way to compare services.
DESIGN REFINEMENT
Managing Current and Future State Design System
Current State Design
One of the biggest challenges during the project was designing for Spectrum’s e-commerce platform's current and future state. While improvements were urgently needed to address user pain points in the short term, we also had to align our designs with the platform's long-term vision.
Future State Desktop Design
Future State Mobile Design
USABILITY TESTING
Testing the New Design
Once the wireframes for the Simplified Side-by-Side Comparisons layout were developed, the next step was to conduct usability testing with a group of potential Spectrum customers. The goal was to observe how users interacted with the new design and assess whether it simplified their decision-making process.
Positive Findings:
Improved Navigation: 85% of users found the navigation through the service selection screens intuitive, allowing them to find relevant services without much effort.
Quicker Decision Making: Users were able to compare services and make choices 25% faster with the new side-by-side comparisons layout.
Higher Confidence: The "Recommended" and "Popular" package callouts helped guide users toward their decisions, with 80% of participants reporting that they felt confident in their choices.
Areas for Improvement:
Information Overload: Some users felt overwhelmed by the information presented at once. This feedback indicated a need to streamline the visible details and present secondary information only when needed.
Filter Requests: Participants wanted additional filtering options, such as narrowing choices based on internet speed or TV channel preferences, allowing for a more personalized experience.
FInal Design
Final Spectrum Redesign
After multiple rounds of testing and refinement, the final designs were created to enhance the user experience by addressing pain points, streamlining the information displayed, and improving navigation through filtering
CONCLUSION
Impact and Final Thoughts
The Spectrum Buyflow Redesign represents a significant success in improving the overall user experience for new and potential Spectrum customers. The redesign effectively addressed both business objectives and user needs by simplifying navigation, reducing decision fatigue, and providing more personalized service options.
