Brightspeed Buy Flow Redesign
Associate Director of UX | Level Studios
Brightspeed, after noticing significant user complaints with their current buy flow experience, asked us to remedy their purchase flow. Our goal was to erase user pain-points and build a new experience that could grow to match business needs.
My role tasked me with leading all UX research, ideation, and wire-framing. I regularly presented prototypes and designs along the way.
*Below is Brightspeed’s old buy flow experience.
This lengthy endeavor was built out with phases. Firstly, we conducted user testing sessions to better understand the exact pain-points users were experiencing. Then, I conducted and led extensive research into similar brands and out-of-category competitors to see how they handled similar experiences. Through these early steps, I articulated a new vision for Brightpseed’s buy flow that utilized multi-page layouts, a far departure from their antiquated, accordion approach.
Early steps involved flow articulation in order to identify the different demands of each flow.
This is a bird's eye view of the research doc I had worked on. This included direct competitors and out of category examples.
Once research was complete, the next step was to identify the many users/flows this new experience would have to accommodate. I did so by building multiple flow charts that captured the various differences this experience would have to accommodate.
With that complete, I then began work on the global elements of the experience. This is where I answered the most important questions of the project.
Questions like, how does the user navigate to the next page? What elements remain sticky when a user scrolls? What are the actual steps of the buy flow and how do we represent them to the user?
Throughout this process, I also constructed various prototypes at different fidelity levels in order to present and display progress to the client. Each phase of the project was handed off to the UI team on a rolling basis. This allowed us to work parallel to each other and ensure our deadline.
In an effort to offer clarity and design intent, I supplied "anatomy" layouts like this to denote all the important functions of our new global elements.
Special attention was paid to the cart component, mainly how it evolved over the course of the user journey. I made detailed components which were included into my wireframes.
My final wireframes, delivered in two viewports, often looked like this. Here, I explored the different experiences users might see during the checkout phase.
In the end, we conducted a new round of user testing. The results from this session were much better than our initial ones, indicating that we were successful in remedying our initial pain-points. Through this new design, we also witnessed a 4.5% growth in attach rates for Value Added Services.
Ultimately, what we created here was the groundwork for future endeavors. This buy flow system was created with scale in mind, thus allow the client to carve their own journey and craft experiences yet to be conceived.•
*Below are the final designs for the buy flow experience.
This first step placed emphasis on education around our fiber offerings. The user is allowed time to peruse product details ahead of making their selection.
The user can select their fiber plan on step two. Special attention was paid to the treatment of the Broadband Facts, an FCC mandated label.
Step three allows the user to add a voice plan, an additional and optional add-on. The persistent cart component also makes an appearance for the first time in this flow.
On the forth step, the persistent cart evolves to include more information like taxes and monthly fees. Disabled CTAS were used, but only alongside directional copy.
It was crucial for this new design system to allow for the purchase of additional add-ons. This was designed with scale in mind, should the client ever wish to add more product offerings.
The final checkout step provides clear indication as to what is owed today, as well as options for payment.
Once the payment is submitted, the user will arrive at a confirmation screen. Here, several CTAs instruct the user on next steps.