Allconnect
Designing a Checkout Experience That Scales
About Allconnect
Allconnect, a Red Ventures company, is a free resource that simplifies how you shop for internet and TV services.
Allconnect’s main priority is to provide customers with the most simple and accurate way to compare and purchase the best service plan for their needs.
Here’s how it works:
Overview
Since 1998, Allconnect has helped more than 33 million customers set up home services and switch providers.
Allconnect was acquired by Red Ventures in 2017. Nearly two years after the acquisition, the team noticed that having a consistent checkout experience across all providers was crucial for Allconnect and its customers.
In 2019, we began working on a redesign of the checkout experience to support the next phase of Allconnect’s growth.
role
Lead Product Designer
location
Charlotte, NC Office
duration
12 months
company
Red Ventures
Selected provider experiences — before the redesign
THE PROBLEM
The checkout experience for providers on Allconnect was inconsistent and challenging to maintain
Before the redesign, the inconsistencies between each provider’s checkout experience were huge.
As a result, optimizing and maintaining the checkout experience at scale was challenging.
Additionally, it would take the creative team ~6 weeks to complete a project, and the engineering team would need another ~8–10 weeks to ship product updates.
(For context, I know that doesn’t seem like a long time, but Red Ventures is known for having a fast-paced culture, so six weeks may as well be six months.
Provider inconsistencies
THE challenge
Design a checkout experience that scales across all providers
Our goal for this project was to design a checkout experience that adapts to support Allconnect’s providers, and addresses their individual business needs.
Our high level priorities for the redesign were to:
01.
Reduce the inconsistencies between providers.
02.
Bridge the gap between designers and developers, making it easier to collaborate and ship product updates.
03.
Streamline the checkout experience.
04.
Consider the unique needs of each provider.
My role
I led the redesign of the Allconnect checkout experience from the outset of the project in 2019.
Until January 2021, I worked closely with the Cart Innovation Team to design and optimize Allconnect’s checkout experience.
I collaborated with business stakeholders, UX researchers, and content strategists to oversee the product's user experience and new feature development from concept to launch (and beyond).
The process
How we designed a scalable checkout experience
At the outset of the project, we analyzed the existing checkout flows for providers on Allconnect. The objectives were to spot patterns and uncover key opportunity areas for each provider.
Analyzing existing checkout flows
Establishing the design
After learning more about our providers and their needs, the team and I whiteboarded the ideal checkout flow.
It was important to ensure the proposed flow could support all providers.
We then reviewed our key findings and strategy with the broader team and project stakeholders. I refined the sketches based on their feedback before wireframing.
Early sketches of the proposed checkout flow.
Wireframes
I started working on the wireframes after we had alignment between the broader team and our key stakeholders.
I used InVision to handle feedback and create a tappable prototype to vet the UX framework.
Sketch and Platforma 2 made it incredibly easy to put the wireframe together in days instead of weeks.
I also used an InVision board to host the work, so stakeholders could actively check in on progress.
The pilot
Validating our concept
Before rolling out the new checkout experience to every provider, we wanted to run a pilot on one provider to see how it would perform. This approach helped us mitigate risk.
We decided to start with one of our high-performing providers – Cox. Using Cox as the pilot provider would allow us to gather rich performance data and iterate faster.
Additionally, we thought it would be easier to work backward from Cox since they were one of our more complex providers to design for.
Selected screens from the Cox checkout experience before the redesign.
Tailoring the wireframes to Cox
It was essential to get final buy-in from our stakeholders (including Cox) on the UX framework before moving into detailed design, so I took a few days to wireframe a tailored experience for Cox.
This process didn’t take long because we ensured that the new checkout experience would support most providers.
the first phase
Shipping the pilot
After frequent jam sessions and iterations with the creative team, stakeholders, the producer, and Cox, our pilot was ready to ship.
This first phase resulted in 200+ responsive screens for desktop, tablet, and mobile.
I used InVision Specs to handoff the designs. This tool made collaborating with engineers in the development phase pretty seamless.
Seeing green
One month after launch, we got the performance report back.
The results were promising. The business saw lifts in key KPI’s including cart orders and cart conversion.
This positive performance confirmed that our new checkout experience was on the right track. Now it was time to bring our other providers on board – starting with Xfinity.
Cox redesign performance report.
the second phase
Back to the drawing board
To avoid double effort and save time, we printed out the Cox flow and outlined the key differences based on Xfinity’s requirements.
Whiteboard session for Xfinity
Adapting to Xfinity (and beyond)
Immediately after our whiteboarding session, I wireframed the unique screens for Xfinity.
The result of this second phase was cut to 18 screens because I could recycle many components and elements from the Cox checkout experience.
Since we had such a robust template for Cox, we only had to provide creative references for two additional providers.
Showing a unique step for Xfinity's checkout experience.
the design specs
Communicating design
I created thorough documentation to help guide the initial development of the checkout experience. Additionally, I built this system as a resource to help the team achieve higher efficiency and consistency for future projects.
This work included writing design guidelines and building a comprehensive component library in Sketch.
I hosted the documents in InVision to make it easier for designers and engineers to reference when needed.
Snapshot of detailed design documentation
the impact
Positive results and much
more to do
The redesign of the checkout experience on Allconnect has positively impacted the business and its customers. However, not all providers saw the same shades of green as Cox did on its initial launch, so there was still a lot of work to be done.
Performance highlights:
Reduced build time up to 34%
Increased cart orders by 21%