Improving E-book website’s product detail page

OVERVIEW

Problem

Why do users leave the product details page ?

Users often exit the product details page due to a flawed user flow, requiring them to click four times to either purchase a subscription or navigate the purchase options. Additionally, the page lacks critical information necessary for users to make an informed purchase decision.

Solution

Enhanced Product Details Page

The revamped page now displays all vital information, including language and format. The improved CTA design clearly outlines all purchase options and details, catering to users unfamiliar with Hamangiu's pricing system.

Impact

50% Simpler Subscription Journey

Required clicks to buy subscription reduced from 4 to 2. Required clicks to check available purchase option reduced from 1 to 0.

PROCESS

Background

Why do users leave the product details page without purchasing a subscription?

Biblioteca Hamangiu, Hamangiu Library, an extensive e-book subscription service specializing in digital legal materials, sought to increase subscription sales. However, users were leaving the product details page without making a purchase.

Constraints

01 Design Scope

Focused solely on the product details page.

02 Research

Relied exclusively on available secondary research.

03 Format

Designed specifically for desktop use.

Heuristic evaluation & Competitive research

How’s the current product detail page experience?

The scattered or insufficient information on the product details page likely contributes significantly to the high user exit rate.

Complex User Flow for Subscription Purchase

The process requires a minimum of 4 steps to view module information and pricing, making it cumbersome.

Insufficient Book Information

Essential details like format, language, and module affiliation are missing, hindering the user's decision-making process.

Lack of Clarity in Purchase Options

The site offers individual, module, and integral subscriptions, with both monthly and annual payment options. However, the current simple CTA ('Add to Basket') fails to effectively present and compare these options, leaving users uninformed.

Hypotheses

Providing complete and clearly organized information on the product details page is likely to reduce the need for users to leave the page for further information.

Simplifying the steps involved in the subscription buying process is expected to positively influence users' decisions to make a purchase.

Competitive research

How is the product details page & CTA structure in other E-book services?

I conducted an analysis of the layout and content of product detail pages across over 10 e-book websites. Using a spreadsheet, I systematically tracked and compared how frequently various features and types of information were presented.

Key Insights

Anatomy of Detail Pages

Most e-book websites feature a basic three-section structure on their detail pages, despite some variations.

CTAs with Diverse Options

Sites with multiple purchasing options typically showcase these directly in their Call-To-Action (CTA) buttons.

Wireframe

What is the most optimal page structure?

In pursuit of the best layout, I brainstormed several wireframe designs, each adhering to the identified basic anatomy of effective e-book website pages.

Option A

✅

Unified button location for easy discovery

⛔

Overcrowded CTA area with excessive buttons

Detail area too crowded

Option B

✅

Large title area which can accommodatelong titles

Reduced focus on module tags.

⛔

Overcrowded CTA area

Cluttered detail section

Hidden table of contents

👑

Winning

👑

Option C

✅

Less dense information in the details area

Less dense in CTA area

⛔

Buttons scattered, requiring users to search more

The Challenge

How can I optimise the CTA Area for clarity and information density?

The key challenge is to effectively incorporate all essential information within the constrained space of the CTA area, while also distinctly presenting the different subscription options available.

Required info

Plan Type (Individual/ Module/Integral)

Plan duration (Monthly/ Anual)

Checkout Total Price

Plan details text

Module names

Price of each plan

End Term

Checkout button

Terms and conditions

Design exploration

Option A

✅

Clear separation of purchase options, matching the pricing page

⛔

Excessive clicks for annual selection Annual option hidden

👑

Winning

👑

Option B

✅

Unified button location for easy discovery

⛔

Overcrowded CTA area with excessive buttons Detail area too crowded

Option C

✅

Clear separation of purchase options, Fewer clicks to view purchase options

⛔

Limited text space for module names Annual option hidden

Iteration

How can I enhance efficiency in Option B?

First Idea

Module explanation appears on hover

1st Iteration

Module explanation displayed Monthly/annual options displayed equally via toggle.

2nd Iteration

- Larger toggle for improved visibility and ease of clicking.
- Word 'payment' for clearer understanding.

Final Design

To help users easily see the differences between options, I used:

Blocks to group information related to each purchase option and separate each option.
Toggles for a balanced visibility of monthly and annual options.
Darker font for important info (title and price), reducing cognitive load in processing extensive
information.

The Impact

50%↑

Enhanced Click Efficiency in Subscription Purchases

Required clicks to buy subscription reduced from 4 to 2. (50% Increased in efficiency)
Required clicks to check available purchase option reduced from 1 to 0 (50% Increased in efficiency).

If possible, I would investigate:

Conversion Rate

Annual Payment Subscription Sales

User Satisfaction (qualitative data)

Retrospective

What I learned

How to make the most out of limited research resources

The research environment can’t always be ideal, but I should try my best to utilise everything I can. In the project I learned when a real users are not available for the usability testing, I can do it with my co-workers.

How to deliver the context concisely

When getting the design feedback from other designers I had to deliver context like types of subscription & benefit of them, and simple terms & policies regarding it. I learned presentation skills to deliver info simpler for people who are not familiar with it.