Sections:

1. Overview
2. Problem
3. Results
4. Research
5. Opportunity
6. Process
7. Validations
8. Prototypes
9. Reflection

How do parents & teachers buy which books to teach their children empathy?

Optimizing a product page's design to boost conversions for a monthly delivery service for children's books

OVERVIEW

Context
My role: IC for the Product Page
Timeline: 7 to 8 weeks
Platform: Responsive web
Company
Little Feminist strives to teach kids, between the ages 0 to 9, self-confidence and empathy through an affordable subscription service for curated books.
Business goal
Little Feminist believed the home and product page was driving away potential new subscribers.

Our team was asked to optimize their home and product page to address this.
Solution
Delivered within 7 and a half weeks by splitting into two teams where I focused on the product page.

We conducted two different user interview sessions, one for the original page, and another for the first iterations. This revealed which visual and UI design elements to amplify, or reduce within the second and final version that was later shipped.

THE PROBLEM

How could we quickly relay a product's social values to someone that wants to teach those values to their children?
Our user research revealed this key question...How could we assure parents and caretakers Little Feminist offers children's books about progressive values that they can't find anywhere else?

RESULTS: BEFORE/AFTER

Treating the Product Page like a landing page for first-time users to answer their questions quickly
I learned there could be scenarios where first-time users could be directly sent to the product page. This meant treating this page like a landing page by limiting distractions, and providing clearer copy/CTAs so we could make their purchasing decision quicker.

This led to addressing the obscuring and conflicting messaging in the original design and with our first version. These insights were reflected in our final design (version 2) below.
BEFORE
AFTER: Version 2

How did we get there?

RESEARCH INSIGHTS

Finding the right audience doesn't guarantee they found the right service to meet their needs
Although Little Feminist was attracting their target audience through blog referrals, they weren't leading to conversions. We also learned that not all parental, or caretaker needs can be accommodated for and doing so can open the door to more design issues.

THE OPPORTUNITY

Raising a child responsibly means conveying the product's unique value precisely
By understanding where and why potential users were leaving the site, I learned we could be more precise in improving the product page's:
  1. Ability to increase the customer's buying confidence
  2. Consistency with Little Feminist's brand messaging
  3. Ability to inspire customers to become promoters of the brand

PROCESS

The original Product Page was encouraging abandonment
Our testers would either take longer time to review, or abandon the product page to read Amazon book reviews, or misunderstood the subscription options and the items included in the box.

We ran 14 user interviews, several design critiques, and dot testing sessions to address this. This led to finding the best pictures to use, copy to emphasize, and a more practical UI design.
ITERATIONS: Users were still asking about what was included & the pricing details
BEFORE
AFTER: Version 1
RESULTS
ITERATIONS: Removing, or reducing design elements to improve user comprehension
This led to reducing the color scheme and providing clearer CTAs/buttons. I also removed the "previous books, additional activities, and "selected by" section because it introduced more workarounds than intended with the users.
BEFORE
AFTER: Version 2

VALIDATIONS

Reducing the noise by simplifying our design resulted in clearer messaging
After the initial 7 user interviews, our users wanted clearer details about what was included.

After conducting an additional 7 user interviews however, we introduced more friction than intended and inconsistent copy between the Home and Product pages.

Therefore, our final design resolved the obscuring and conflicting messaging from the first version.

PROTOTYPES

Unveiling Little Feminist's true value with clearer design
Simplifying the design with clearer copy and usability reduced the questions users were having about what Little Feminist offered.

The GIFs below represents the final design on desktop and mobile. The mobile version dictated the copy and UI we used for desktop.

REFLECTION

Picking your battles and how improving visual design helps users see what they were missing
The biggest challenge was funneling the passionate insights and direction we were receiving from the founder, users, and teammates.

I learned to deal with it by picking my battles to advance design patterns I thought would work with other insights from the team.

Specifically, I emphasized treating the product page like a landing page to account for users that did not go through the home page to get to the product page. This taught me visual design improvements can address what users may be missing, or misinterpreting about your business.