RED PACKET

Red Packet is an innovative gift box concept. Each themed gift box offers around 10 lifestyle experiences for the recipient to choose from. With experiences ranging from Wellness to Gastronomy, Sports to Entertainment, there is something for everyone.

Brief  /  Revamp and simplify the company website.


Role  /  UX designer, UI advisor

Team / Founder, Marketing manager, Engineer (remote)

Timeline  /  3 months

Tools  /  Illustrator

THE CHALLENGE

The website of Red Packet need a makeover due to the outdated design and obvious redundancy in page structure. 

 

01. INFORMATION ARCHITECTURE (IA)

Screenshot 2019-09-27 at 7.42.41 PM.png
Screenshot 2019-09-27 at 7.42.30 PM.png
Screenshot 2019-09-27 at 7.42.52 PM.png
Screenshot 2019-09-28 at 2.29.25 PM.png
Screenshot 2019-09-27 at 8.07.15 PM.png
1.HomePage.png
1.HomePage.png

The problems of the original IA

Redesigned IA

Finalized IA as header and footer

Clean and minimal

It is very easy to locate and navigate to the product, information, and contact pages.

Optimized for search

The rest of the information is placed in the footer in the order of "usefulness" for customers. 

 

"About Us" and "FAQ" is placed at the top. The details of experience partners are placed at the end, as it is included mainly for SEO. 

 
Screenshot 2019-09-27 at 7.42.30 PM.png

02. REDESIGNING THE HOMEPAGE

1.HomePage.png

Final iteration

The original homepage

screencapture-web-archive-org-web-201606

Identifying the problem

rp-pagecontent-09.png
rp-pagecontent-10.png

Proposed changes for the homepage

Homepage2.png
Sleek one-page design

In the original design, different sections are clustered side-by-side. Here, users could view the information one section at a time as they scroll down.

1. One call-to-action

The goal for the homepage is to invite customer to view the products. 

2. Explain the concept

It is found that users don't  immediately understand the concept of an experience gift, so an explanation is provided at the beginning.

3. Adding social proof

Customers tend to be attracted to products that are loved by others.  Therefore I decided to highlight great customers reviews at the homepage.

4. Leverage
brand familiarity

Showcase the logos of prestigious experience partners to improve the desirability of product.

 

WHAT I LEARNED

03. REDESIGNING THE PRODUCT PAGE

The original product page

screencapture-web-archive-org-web-201605

Identifying the problem

Proposed changes for the product page

4. Show, don't tell.

An introduction of the experience partner and a gallery is added to the detailed information. 

Instead of using text, the aforementioned components are added to better tell the story of the experiences. 

rp-pagecontent-11-11.png
rp-product-flow-03.png
rp-product-flow-04.png
Screenshot 2019-10-01 at 5.06.58 AM.png
Screenshot 2019-10-01 at 5.06.42 AM.png
1. Clear purchase button

The "Add to cart" button could be clearly seen and accessed.

2. Easy to browse all the experiences 

Instead of expanding each column one by one, customers could browse the photos of all experiences at the slider. They also get a brief description of each experiences. 

3. Reduce friction of a long scroll

Customers could get the booking details of a specific experience in the expandable columns. The column height decreased comparing to the original version, so customers could locate their desired experience quickly.

3, Product.png

Final iteration

 
ACCOMPLISHMENT

The new IA were implemented in the official website, and has brought around 40% more page visits to the product page.

 

The proposed design of the homepage and product page were partially implemented due to engineering and time constraints.

WHAT I LEARNED

Working with business constraints

 

I learned to adapt to the time and cost constraints; and produce design that could balance both business and users need.

Wearing multiple hats

In this project, sometimes I am the copy-writer, sometimes I am the digital marketer, sometimes I have to manage the project. The experience allowed me to be more empathetic of the needs of different roles.