Device led shopping

Responsive Web Design
UX Design
Prototyping
A/B Testing
User Flows
Scroll to see full case study
Client

Xfinity

Team
Kathryn LaPann
Lead Product Designer
KJ Jena
UX Designer
Isabella Dahl
UX Designer
Grace Berry
Copwriter
Blaire Hill
Product Manager
Stefan Backhaus
Creative Director
Jonathan Connolly
Dev Lead
Sandeep Pothuganti
Dev Partner
Matthew Hancock
Dev Partner
Challenge
The existing multi-platform approach required customers to navigate between Xfinity.com and a separate mobile sales channel, creating operational inefficiencies and a disjointed customer experience.
Additionally, users were forced into a plan-centric journey, leading to missed opportunities to convert prospects who prioritize choosing their device first.
My Role
Led a team of designers to spearhead the design and implementation of a converged Xfinity Mobile device-led shopping experience on Xfinity.com. Worked closely with developers and product partners to analyze user research, craft the design vision in Figma, build and test interactive prototypes, and lead weekly syncs to bring this net new experience to life.

Opportunities

1.
Improve speed to market
Utilize a single platform to merchandise Xfinity Mobile, reducing the design and development load by 50%, streamlining operations, significantly improving speed to market, and reducing acquisition costs.
2.
Sell more products
Enable a flexible shopping experience with a converged sales funnel to drive multi-product sales.
3.
Push visual design
Implement net new catalog and product pages, taking advantage of development resourcing to assess opportunities for new components such as a feature carousel.
User Flows
As a net new experience on Xfinity.com, this work significantly impacted the current user journey. We began the project by mapping user flows for new and existing customers, including those who bring their own devices — to analyze impact areas and strategize a holistic solution.



As design lead, I held weekly syncs with our product owner and dev partners to align with business requirements and better understand technical impacts and limitations as early as possible.

Research Mindset

On average, it takes a user 2.4 visits to the site to convert.

Buying a device through Xfinity Mobile requires Xfinity Internet. Based on this challenge, we designed a solution that leads with helpful content to educate our users on the benefits of bundled services. This includes updated promo badges and a new modal that features all device deals, as well as plan comparison information, and a transparent cost breakdown throughout the shopping journey.

Flexible Shopping

Non-linear shopping puts the user in control of their experience.

The addition of a device-led approach allows customers to seamlessly switch between browsing devices and exploring plans at any point in the shopping journey. This significant advancement enabled our SEO and e-commerce partners to better track, promote, and convert on device sales.

Bottomline Pricing

Users call for transparent pricing to make more informed decisions.

Increased overall cost transparency and checkpoints allow customers to see how promos, trade-in pricing, and plan specific deals will affect the bottom of the bill as they shop.

Key features

Enhanced Filters & Sorting
The existing device catalog had limited sorting options, only allowing customers to sort by manufacturer. Our enhanced filters and sorting capabilities allow users to refine their search by a wider range of criteria, including new releases, current offers, and strikethrough pricing with trade-in value.

Key features

Flexible merchandising and promotions
We worked closely with our e-commerce partners to incorporate flexible merchandising and promotional deal placements throughout the experience. A new promotional modal houses multiple promotions per device, displaying relevant offer details such as redemption steps and applicable legal terms.

Key features

Updated Design Language
The scope of this project offered a rare opportunity to design several new components from scratch. We worked hard to push the boundaries of the design system to modernize Xfinity.com, while staying true to the brand.

Key features

Enhanced product discovery
SEO enhancements on the catalog and product pages improved our non-brand mobile rankings and streamlined branded results to drive incremental traffic to the site. Rankings were improved through optimized copy, breadcrumbs, enhanced filtering, and distinct URL structures.

Key features

Shop plans and devices together
Users can now shop for their plan while customizing their device. This new enhancements reduces steps in the flow, and provides the user with the context they need to make this decision with the addition of a comparison modal that highlights the differences between each plan.

Outcomes

Predicted increase in non-brand mobile SEO rankings
Improved UX to accommodate a flexible, educational experience
Design and development time cut in half to maintain Xfinity Mobile