The Project
Design Sprint
I led a design sprint to define and draft a shopping checkout process that delivered on the promise of shopping without restrictions. We defined all decisions in the purchase journey and identified which of those were part of the shopping experience and which were part of the checkout experience.
Hub & Spoke Architecture
Using the inputs from our client sessions, we had rapid design sessions each day to work towards a way to shop. We designed a mobile-first hub & spoke checkout. Focusing on a single product at a time reduces user frustration, lowers cognitive load and improves accuracy. It also allows users to only explore the products they wish to purchase.
Pricing Cards
One of the most complicated parts of the Cox website are the pricing cards. These components display dynamic pricing, personalized offers and key features. We vary the design according to the number of products being sold together.
Based on A/B test results, we streamlined the content on the card when it loads, but included additional information when the card is “flipped”.
Further testing on these cards is in the works to validate and refine.
(Implementation constraints temporarily use a modal to display information)
Product Pages
As part of the shift in sales, the marketing/product pages needed to evolve to support the new way of buying. We re-worked the designs from the ground up – making both interaction and visual design changes.
In testing we learned that users wanted to see prices and get products in the cart right away, even if they weren’t quite ready to buy.
Adding a product to your cart moves you into the product spoke to customize your plan options – making that transition seamless and low-pressure.
Some key features such as a persistent cart & sticky pricing bars were put on hold for the initial launch but are currently being worked on.
Final Purchase Flow
The hub & spoke checkout stayed largely unchanged from concept to final interfaces., and our experience concludes before payment due to technical restrictions.
A key improvement from site testing results was to include a little product information information in the checkout to help users make choices. We also reduced the prominence of branded terms that didn’t help identify the product (eg using speed to label plans rather than “Internet ultimate”).
(Implementation constraints temporarily use a modal to display information)