E-commerce website has been redesigned to address the evolving needs of its readers and business.
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:
Improve the outdated layout, user flow and information architecture
For subscription and purchase
Stay with Trend
A visual rebranding to represent a young, lively and bright magazine
First, I conducted user research to find out the problems with the old website.
Problems from User Research
The old website
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.
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
The new website
Size up the video and move it to a prominent position to leverage its influence on visitors. Make it auto-play on mute.
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.
Banners and testimonials
Add banners with CTA's across the homepage. Add testimonials to further encourage subscriptions.
Checkout flow was old, redundant and not clear. It couldn't deliver a trustworthy feeling.
The old checkout flow had 5 steps
User research showed some steps were confusing
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.
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
Step 2: Payment method
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" 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.
New Information Architecture
The new card component displays every order, its content and status on one page, providing one-stop order-tracking experience.