top of page
pipa-mockup.jpg

PiPa Magazine's

E-commerce website has been redesigned to address the evolving needs of its readers and business. 

Objectives

As a non-profit children's magazine, Pipa had not updated their website for several years.

As the sole designer, I needed to redesign it to address the following objectives:

01

Increase Usability

Improve the outdated layout, user flow and information architecture 

02

Increase Conversion

For subscription and purchase

03

Stay with Trend

A visual rebranding to represent a young, lively and bright magazine

Homepage

First, I conducted user research to find out the problems with the old website. 

Problems from User Research
1-min.png

The old website

1-min.png
Promotional video

The video was too small, but it was a great material to showcase the brand.

Big chunk of text

Eye-tracking heatmap revealed user's attention was caught by this lengthy text. But according to the interview, only 20% users had read it. 

Screen Shot 2023-12-16 at 11.19.59 PM.png
1-min.png
Current issue

Displaying Current Issue should encourage users to subscribe but from the interview, it didn't. There was no Call-To-Action here or anywhere on the homepage.

How the New Website Fixes Them
主页-min.png

The new website

主页-min.png
Promotional video

Size up the video and move it to a prominent position to leverage its influence on visitors. Make it auto-play on mute.

主页-min.png
Current issue and CTA button

Add a Subscription button next to the current issue to Call To Action. Move up the block to attract more attention. 

主页-min.png
主页-min.png
主页-min.png
Banners and testimonials

Add banners with CTA's across the homepage. Add testimonials to further encourage subscriptions.

Checkout

Checkout flow was old, redundant and not clear. It couldn't deliver a trustworthy feeling. 

The old checkout flow had 5 steps
checkout-1-min.png
User research showed some steps were confusing
checkout-2-min.png
Disruptive process

First-time users questioned why they were asked to select a payment method between filling shipping and billing addresses. 

Non-intuitive way of input

The way to input address was very unnatural and unfamiliar. Many users stopped at this step during usability research. 

checkout-1-min.png
The new checkout flow has 2 steps,
is more friendly to use and feels safer

After consulting engineers about the latest payment technology,

I designed this lighter and more logical checkout flow.

Step 1: Shipping address
结算-收货地址.png
Step 2: Payment method
结算-付款信息.png
Design features
结算-收货地址.png
结算-收货地址.png
结算-付款信息.png

An address input that users are more accustomed to

The order review is always on display, reducing an extra step

Payment method (check or card) and credit card info are integrated in one component

My Orders

"My Orders" had an unfriendly information architecture,

making it hard to track shipping or past orders

Old Information Architecture

Users needed to go to another Details page to check order contents and delivery updates.

history-min.png
New Information Architecture

The new card component displays every order, its content and status on one page, providing one-stop order-tracking experience. 

Orders.png

use Design to Promote Usability and Empower Business

bottom of page