Case Study Overview

Robust transformation of mobile sales page

Explore the step-by-step workflow, from A/B testing and iterations to interactive prototypes and usability testing.

Mobile Transformation

2023

My Role: Lead Designer, UI Component Creator

Team: Design Manager + 1 Designer

Redesigning mobile sales page

Sales page was difficult for users to get a quick look at each product, especially during the holidays when products would sell out quickly.

image of someone typing on a keyboard (for a b2b saas)

New Sales page

Updated Mobile Experience

I helped create a updated sales page with product cards that had easy to digest content with the ability to quickly view more information.

Easy to read

The side by side product card style wasn't as helpful to the user as initially tested because it added too much height to the card making it difficult to read.

Hiearchy of Information

With all the content displayed on a product card, it was difficult for the user to digest all the information.

Accessibility

Many colors did not pass AA or AAA accessibility for web standards. Also, there were frequent clickable areas were too small for a user to touch without accidentally touching another element on the page.

Micro Interactions

In order to keep the user engaged on our site, we wanted to add micro interactions to help guide our users through their search and different tasks.

Updated user-centered design for our high-traffic sales pages

The elements created were single model product cards including the creation of the quick view functionality in order to keep our product cards simple and give the user access to additional information as needed.

Ensured all touch targets on mobile designs were at least 7mm x 7mm and 2mm apart (Baymard UX Research). All colors were updated to AA and AAA for any call-to-action areas.

Mobile Transformation Sales Page

Easy to Read

Consolidated content on the product card for the initial page load made it easy for the user to see what product they were looking at and how much it was on sale for.

Hierarchy of Information

The user can easily see more information by clicking on the card or the "Quick View" button. This allows them to digest content in smaller bits.

Micro Interactions

Quick view and filter drawers swiping up from the bottom gave the user interesting interactions while letting them know they have not left the page. The icons also delightfully rotate when dropdowns open up.