Cards — Priscilla Tsang Portfolio

Priscilla i Tsang

Optimizing Offer Cards

Designing and testing card treatments for ever changing needs

Version 1

The design of these cards had been improving conversion compared to the ones before as it introduced a clear hierarchy and plainly laid out offer details. However, even though our card were flexible, new offerings and products were being requested from business stakeholders which pushed the system to its limits.

Version 2

On both residential and commercial sites, there was a need to sell internet bundles to drive more revenue per user (RPU). I introduced a design that not only promotes deals with purchasing a bundle, but also makes it easy for customers to move into checkout.

Because of the different product offerings and branding for each site, I reused as many similar elements to ease the development lift.

01 Toggle

I designed a toggle that would swap the card information between “internet only” and “bundle” plans. This was a pattern I found on many pricing pages for SaaS websites that would switch between monthly and yearly pricing.

By adding the toggle, we took out the speed tabs as having both interactive elements could cause confusion. Additionally, Mouseflow data showed that users were not interacting with the speed tabs.

02 Duplicate Offerings

Since the bundle cards were getting overwhelmed with content, we took out line items that were the same across all plans and put them above the cards. This helped to shorten each card and help users digest the differences.

residential

commercial

Version 3 (mobile only)

On the business site, CroMetrics (WOW!’s conversion rate optimization partner) discovered that after conducting an A/B test with the original cards and the offer cards in a horizontal carousel, there was a disconnect for mobile shoppers. The team found to an uptick in orders of the highest priced plan, but there was a 10% drop in customers moving into checkout compared to the old design.

Problem

The team deduced that since the other speeds were not readily visible on mobile (as they are on desktop), customers would only see the highest priced plan and if that plan didn’t fit their needs, this led to a higher drop-off rate. Additionally, some other tests showed that having a visual would help customers understand the technical numbers or descriptions.

Solution

Create a vertical, stacked cards that expand and collapse. This allows for all speeds to be shown the page loads while still highlighting the fastest, highest priced option. To add some context to the technical jargon, I added a visual speedometer graphic to each card to illustrate the differences between each speed.

Result

43% increase in clicks to the next step

13% overall number of orders complete

Showing a Sneak Peek

Creating preview cards that apply to all markets

Problem

To stay competitive, WOW! will start offering different plans or pricing based on the location of service.

Our original designs, showcasing full plan details and price won’t work as customers may be confused why the actual price is different from what they saw on the homepage or if the plan they were looking for is not available at their home or office.

Solution

We proposed creating a new set of cards that teases plan information before we have the service address.

Depending on the amount of information needs to be shown, we’ve developed 3 levels of “locked cards” that scale up in how much detailed information is displayed. Once the customer enters a serviceable address, the cards display the actual plans and prices they can choose from.

Home

Priscilla i Tsang 2024
All Wrongs Reserved