How I relied on research to make a growing product lineup easier to compare across desktop and mobile.
Timeline Oct 2022 - Jan 2023
Role Product Designer II, partnered with Lead Design
Skills UX-UI design iterations, responsive design, prototyping, usability research, A/B testing
Role Product Designer II, partnered with Lead Design
Skills UX-UI design iterations, responsive design, prototyping, usability research, A/B testing
Expanding the purchase experience
Course Hero was preparing to add a new product bundle to an existing Premier subscription, requiring the purchase experience to support more products, features, and pricing options. My role focused on designing a comparison experience that could scale with that added complexity while helping students understand their choices across desktop and mobile.
The challenge
The legacy experience already contained a large amount of information, and previous research showed that students struggled to understand differences between plans and pricing. Adding another product made the existing structure even harder to scale, particularly when feature limits and subscription lengths also varied.
(Above) Legacy plan selection and purchase page
Designing comparison patterns
I explored table- and card-based approaches for separating product comparison from checkout. On desktop, both gave us more room to explain differences between offerings. On mobile, however, comparison tables introduced challenges around limited space, touch targets, scrolling, accessibility, and keeping enough information visible for meaningful comparison.
(Below) 3 different methods for comparing products were designed for testing on desktop: a table, a stacked list, and a minimal product feature list in checkout only.
Design 1: Feature Table
Design 2: Card
Checkout page
(Above) 3 layouts I designed to test the product comparison table on mobile screens.
What mobile research taught us
Usability testing showed that students understood tables and stacked cards most easily on desktop. Research also helped us refine how comparison could work on smaller screens—using focused feature lists, stronger information cues, toggles, and carousel-like patterns rather than simply shrinking the desktop table.
What the experiment revealed
Mobile usability testing gave us a clear direction for responsive comparison: participants were most successful using a static list-style table, where product differences remained visible together on one screen. Stacked cards, toggled views, and a traditional multi-column table required users to remember or move between information, making comparison harder. That static comparison pattern was ultimately carried into the responsive version of the live experience. Separately, a desktop A/B experiment found that a single-page selection-and-checkout concept outperformed the separated plan-page concepts, producing a 7% CVR increase and a net 3% gain after accounting for reduced content uploads (the non-paid/Basic plan requires that users upload their own study documents to "unlock" content on Course Hero).
What I learned
The two studies reinforced different lessons. The mobile research showed that comparison works best when customers can see meaningful differences together rather than holding information in memory across interactions. The desktop experiment highlighted another part of the decision: customers also needed pricing visible early enough to evaluate value. I left Course Hero before the final experience was released, so I can’t attribute later product decisions to these tests, but the work strengthened my approach to designing responsive comparison experiences: start with the complete product and pricing model, then test how much information customers need simultaneously to make a confident choice.
The live purchase selection screen viewed in mobile web (https://www.coursehero.com/plans/).
The live purchase selection screen on the Course Hero website.
