Web, User Experience, User Interface
I worked with the UX team to create a system that allows users to filter through all of the plans available to them, potentially hundreds. The current site only allowed up to 9 plans to be shown. In most scenarios only 3 to 6 different plans were being shown, even though customers were eligible for many more. To fix this, we incorporated filter and sort functionalities into the plans page.
Only 3-9 plans show up with the current design. The selection is streamlined, but is the user actually getting the best plan for them? The selection of which plans to show is completely arbitrary, based on what the business deems as the most effective. The bundles tab only has 3 random combinations of internet, tv & phone plans. The home phone tab is also misleading because it’s only composed of internet & phone bundles (they don’t sell just phone).
While this design requires more action from the user, the plans that show up will be tailored to what they want. The type of bundle they want will be quickly accessible: internet is always selected because you must have internet to get tv or phone service from them. The user can select their preferred price & speed range & edit their address for the most accurate plans. The two most popular plans are shown at the top, followed by the rest of the plans, ordered from lowest to highest price.
The filter was placed in a fixed bar that followed the user down the screen. Since the cards are packed with content, we didn’t want a side bar filter that would make the cards any taller.
We added in a most popular section, which is a bit decieving logically. The first popular plan is the best value plan. The second popular plan is an upsell adding on phone or tv. If all 3 services are already selected, the second plan becomes a more powerful plan with a higher price point.
Plans below the popular section are ordered from lowest price to highest price. If there are 2 plans with the same price & different speeds, only the highest speed plan is shown.
Internet is auto-selected & always selected because you cannot buy tv or phone without having internet.
The price & speed sliders divide into 4 buckets, rounded to the nearest whole number. The slider snaps to one of these 4 buckets when being dragged.
The normal lay person does not know how internet speed is measured or what speed they need based on their usage & number of devices. To compensate for this, we added in relatable ways that someone could measure their usage need.
We also added a tv upsell for internet and internet & phone bundles.
For internet & tv and internet, tv & phone bundles, we replace the tv up-sell for a list of the 10 most popular channels included in their tv package. For our limited API capabilities, we cannot display an entire channel guide for the user.
T a b l e t
& M o b i l e
For tablet & mobile, the popular section disappears to push up all of the cards. The most popular plans are placed inline with the cards ordered from lowest price to highest price. The price & speed sliders are placed into the filter icon which pops a modal when clicked. The address was limited to a zip code placed beside the header, also to compact space & push up the cards. The popular tag is pushed to the right side to balance the left aligned nature of the card. On mobile, the 3 value props are pushed below the top 3 cards to push the cards up. Pushing the cards up on this site is so important because only a fraction of users scroll down & even less engage if there is not a CTA above the fold.
Due to limited engagement with the filters, we placed the selectors & sliders in plain sight. To be more clear, we added the price listed is per month. The address had to be moved down to make room for the sliders & we incorporated the number of available plans so the user knows how many plans to expect when loading more.
Both experiences lost against the original streamlined experience. We measured success by the amount of orders received.
Our hypothesis is it lost due to a combination of harder comparison across horizontal cards & less cards being viewable on a screen.