top of page
E-commerce website redesign for DISH Network's post-paid wireless brand.
Tools used:
Adobe Target
Quantum Metric
Figma
Adobe Analytics
Tableau
Google Analytics
UserZoom
User Testing
Role:
Product Designer
Website:
Tools used:
Adobe Target
Quantum Metric
Figma
Adobe Analytics
Tableau
Google Analytics
UserZoom
User Testing
Context 🌿
Our team was tasked to enhance the user experience of Boost Infinite, DISH Network's postpaid retail wireless brand. Using UX principles and rigorous research methodologies, our goal was to create an experience that elevated conversions and addressed key performance indicators (KPIs) such as user engagement, retention, and customer satisfaction.
KPIs & OKRs 📈
1. Improve the % of quality visits from 13% to 16%
2. Improve cart abandonment during checkout process from 34% to 40%
3. Improve % of purchase completion from 4.1% to 4.5%
Challenge 🚩
Confusing Site
Lack of information
The Boost Infinite site was confusing and didn't have the information that consumers needed to make an informed purchasing decision which affected conversions. Business goals were in place to increase conversion rates, as listed below.
Solution 💖
Information Architecture
Provide transparency
We focused on redesigning the site specifically through improvements in the information architecture in order to provide transparency to our consumers so they can make a well-informed purchase decision.
OKR & KPI Results ✅
1. Improve the % of quality visits
-
Even before the end of the first quarter, we hit the expected metric and more by an additional 3%.
2. Improve cart abandonment during checkout process
-
Even before the end of the first quarter, we hit the expected metric and more by an additional 2%.
3. Improve % of purchase completion
-
Even before the end of the first quarter, we hit the expected metric and more by an additional 0.4%.
Other Results 🌟
1. Newly redesigned homepage
-
+%28 in conversion - this demonstrates the efficacy of our approach.
2. Newly redesigned plans detail page
-
+16% orders - This substantial outcome underscores the importance of user-centric design and clear communication in driving increased engagement and conversions.
Meet the team 👨🏻💻👩🏻💻
SVP, Chief Digital & Product Officer
Andrea Farris
VP, Product
Nick Baldwin
VP, Boost Infinite
Jeremy McCarty
Product Owner
Joel Huerta
Product Manager
Chase Jiron
Donica Wolf
UX Manager
Kim Mosberger
Design Manager
John Lindmark
Product Manager (Analytics)
Jason Faller
UX Researcher
Elizabeth Phillips
James Draper
Product Designer
Lahaina Pacaoan
David Partlow
Development Team
Kyle Baker
David Barber
Caitlyn Lynch
Process ✏️
Discover
Define
Ideate
Design
Test/Implement
1. Discovery 💡
During this phase, we began discussions in understand the requirements within the team to ensure that we were all on the same page in terms of expectations. This included examining the current state of the site, understanding the customer, and looking at analytics to understand any pain points.
Current State of the Site
The first step in redesigning the site was examining the current state of the site. This involved referencing not only best UX practices but also utilizing analytics tools such as Adobe Analytics and Quantum Metric. The two main pages that we looked at were the homepage and the Infinite Access for iPhone plans detail page.
Not a lot of attention or interactions here but lives higher up on the page than the plan cards.
We are seeing high clicks on the plan cards, but low attention rates because 39% of users are dropping out of the page before getting to this. Need to move this higher.
Most important information should live within this range.
Analysis
Using Adobe Analytics, we looked at different metrics, specifically bounce rate. We also utilized Quantum Metric which allowed us to measure interactions, clicks and taps, attention rates, and heatmaps within a specified time period.
The results of these analytics revealed 2 large issues:
1. The bounce rate of the site was high with a 50% bounce rate on mobile and a 37% bounce rate on desktop.
2. The information architecture throughout the site made it hard for users to find the information they were looking for. Users are also dropping out of the page before they get to the most important information because the current architecture of the page kept all the information users found the most important lower on the page which affected comprehension and conversion. This problem was even worse on mobile because users would have to scroll even farther down to find the information they are looking for.
Our Customer
The next step we took was understanding who our customers are. These profiles offer valuable insights into the specific needs, preferences, and behaviors of our target audience. This information is not only crucial for tailoring marketing strategies but also plays a pivotal role in informing sales tactics and product development efforts. This strategic use of customer profiles contributes to enhanced customer satisfaction, increased loyalty, and overall business success.
Gaining Customer Feedback
We knew it was important to understand user needs and pain points in order to know how to optimize the site's features. We gained profound insights directly from users by conducting in-depth user interviews and collaborating with the consumer insights and voice of the customer team. This qualitative approach, involving structured yet conversational sessions, unveiled nuances perspectives and allowed us to refine design strategies.
UX Research
As the product road map and backlog became more defined, we conducted numerous stakeholder interviews within the company to obtain project-relevant information and suggestions. These stakeholders had knowledge, wisdom and insight that helped our team make important product decisions.
Competitive Analysis
The primary objective was to understand the strengths and weaknesses in the competitive landscape, in order to find any strategic opportunities. This was critical in shaping our strategic approach and competitive positioning within the market.
Analytics
Quantum Metric
Identifying User Pain Points and Opportunities
Session Replays: Observe user behavior firsthand to uncover usability issues, frustration points, and unexpected paths they take.
Heatmaps and Click Maps: Visualize where users focus their attention and interactions to understand their engagement patterns.
User Journey Mapping: Visualize the complete user experience, identifying key touchpoints and opportunities for optimization.
Real-Time Insights: React quickly to user behavior changes and emerging trends with real-time data updates.
Adobe & Google Analytics
Generating and Prioritizing Ideas
Funnel Analysis: Track user drop-offs at each stage of a funnel to pinpoint specific areas for improvement.
Session Segmentation: Group users based on shared attributes or behaviors to discover patterns and tailor solutions for specific segments.
Adobe Target
Validating Hypotheses and Testing Solutions
A/B Testing and Experimentation: Compare different versions of features or experiences to measure their effectiveness.
Feature Flagging: Control the release of new features to specific user segments for targeted testing and rollout.
Adobe Target
Validating Hypotheses and Testing Solutions
A/B Testing and Experimentation: Compare different versions of features or experiences to measure their effectiveness.
Feature Flagging: Control the release of new features to specific user segments for targeted testing and rollout.
2. Define ✨
After the discovery phase, it was time to continue to define and refine the UX research and design direction.
Research Direction
We wanted to ensure that our UXR team defined a proper research plan so that they could work ahead of or in tandem with the design team throughout the entire product life cycle. This ensured that we were not only finding potential pain points or friction points, but it also allowed us to validate the design choices that we were making. We defined key methodologies and tests which assisted in ensuring the success of our redesign.
Some of these methodologies included:
-
SUS Score
-
Time-Out tests
-
Card Sorts
-
Usability Tests
Design Direction
Restructure Information Hierarchy
-
Using user behavior data and analytics, we revamped the information architecture to prioritize discoverability and intuitive navigation. This improved information findability, reduced friction, reduced bounce rate and enables users to effortlessly access the content they need.
Enhance Transparency & Trust / Empower Informed Decisions
-
We wanted to ensure that users were able to find the information that they needed quickly. This was important in building trust between our consumers and Boost Infinite. The content was rewritten and reorganized to be easy to find, easy to understand, and user-friendly. We prioritized easy-to-understand explanations that equip users with the necessary information to make informed decisions
Balanced and Aesthetically Pleasing Design
-
An evaluation of the visual elements led to a redesign focused on achieving a visually cohesive and aesthetically pleasing interface in order to enhance user engagement and create a more positive overall experience.
3. Design 🎨
Design Workshops
A big part of our design process was hosting weekly design workshops. These workshops included various members from different teams and served to ensure that we were meeting all business expectations. These workshops varied depending on where we were in the design process. Some workshops would serve as a brainstorming session when we began designing new concepts or as a demo session where the designers would present the work and get feedback.
New Information Architecture
The first step in our design process was to improve upon the current information architecture. Based on the research we conducted and the analytics we looked at, these were some of the major changes we had made in the site's architecture:
-
The plan cards were the most important piece of information that users looked for on the homepage. Therefore, with our new designs, we moved the plan cards higher up on the page and the other sections (about us and consumer reviews) lower on the page. This small change made impactful improvements on conversions.
"Boost" Clarity Plan Cards
One of the biggest pain points we found throughout our research was that users had a hard time understanding the different product and plan offerings of Boost Infinite. There was confusion surrounding the difference between the phone plans, specifically the Infinite Access plans. As a solution, we designed new plan cards that were more informative and easy to read.
Current Design:
Pain Points:
-
Aside from imagery, users found it hard to distinguish the difference between the Infinite Access for iPhone and Infinite Access for Galaxy plans because of the bullet points.
-
Across all plan cards, users found the bullets hard to read. It was hard to quickly and easily distinguish between the different plans.
New Design:
New Plan Cards: Based on research, we found that one of the most important things users look for is price. For these new cards, we:
-
Decreased the size of the device image and made the price a larger focal point.
-
Utilized iconography to help distinguish between the different plan perks so that users can easily identify the different points.
-
Included a "also includes" section so that users can easily tell what extra perks other plans have compared to the others.
"Boost" Clarity Plans Detail Page
Another issue that we found was that with the Infinite Access plans details page, users did not realize that these were plans. Rather, it looked more like a marketing page advertising the newest iPhone, especially when marketing posts automatically redirect consumers to this page. The solution was to redesign the plans details page in a way that highlights not only the plan offerings, but does so in a clear way that makes it known to users they are looking at a phone plan and not only the device.
Current Design:
New Design:
On the new redesign, we focused on highlighting 2 main elements: price and plan features. By putting plan features on the forefront, users can gain a better understanding that they are purchasing both a phone and a plan.
4. Test/Validate 📊
Testing and validating designs through different means such as analytics was critical in ensuring the success of this site redesign. Utilizing the UXR, analytics, and development team, we were able to launch our designs into different UXR and live A/B tests to understand where our designs succeeded and where they needed more work.
New Information Architecture Tests
Once we redesigned the information architecture on the homepage, we worked alongside the AEM authoring and development team to get the new pages built out in order to launch into A/B testing. The A/B test went live with 50% of traffic going to the original homepage and the other 50% going to the newly design homepage.
"Boost" Clarity Tests
Boost Clarity focused on redesigning the Boost Infinite Plan cards and the plans details pages, specifically the Infinite Access Plans details pages. UXR tests and A/B tests were critical to the success of this initiative. Many of the UXR tests included:
-
Time-out tests
-
SUS score tests
-
Series of open-ended question surveys
With these new designs, we also ran these tests through A/B testing where again we worked alongside the AEM authoring and development team to get the designs built and launched. These tests were critical in gauging the success of our redesigns.
5. Results & Next Steps 🚀
OKR & KPI Results ✅
1. Improve the % of quality visits
-
Even before the end of the first quarter, we hit the expected metric and more by an additional 3%.
2. Improve cart abandonment during checkout process
-
Even before the end of the first quarter, we hit the expected metric and more by an additional 2%.
3. Improve % of purchase completion
-
Even before the end of the first quarter, we hit the expected metric and more by an additional 0.4%.
Other Results 🌟
1. Newly redesigned homepage
-
+%28 in conversion - this demonstrates the efficacy of our approach.
2. Newly redesigned plans detail page
-
+16% orders - This substantial outcome underscores the importance of user-centric design and clear communication in driving increased engagement and conversions.
Next Steps
6. Reflection
Intentional Design
Utilizing UX research, analytics, and the consumer insights team was crucial for understanding how to best build the foundation of the designs. Using these resources allowed us to be more intentional with how we built these designs. The original designs were done with no prior research, so we knew that doing all the initial discovery research and continuous research during the design process would lead to a successful redesign. Utilizing research and collaborating with other teams was pivotal in providing users with all the tools they needed to convert.
Being Adaptable
Working alongside multiple business stakeholders and executive leadership meant that there were multiple perspectives and constant business needs shifting. Alongside AEM authoring limitations and lack of development resources, this site redesign required our team to be highly adaptable.
There were many iterations of designs based on the ever-changing business needs and AEM authoring restrictions. These iterations had to be done quickly yet efficiently in order to meet deadlines.
Collaboration
Collaboration in this project was critical to its success. By hosting weekly stand-ups and meetings with key members of different teams such as the development team, the AEM authoring team, the e-commerce team, the consumer insights team, and more, allowed us to demo designs and research and get feedback from multiple parts of the business. This allowed us to take into account different perspectives and needs and incorporate them into our designs so that when it came to launch time, we consulted with all the proper parties and got all the required approvals which allowed us to launch by our desired date.
© 2024 | Fueled by creativity and caffeine 🧋
bottom of page