HOME+ E-Commerce Platform Revamp

Mobile App | E-Commerce Platform Revamp

Hong Kong

Project Overview

HOMEPLUS (HOME+) is an e-commerce platform in Hong Kong. In late 2021, the brand underwent a major strategic evolution. While the initial catalyst was a visual rebrand, our primary objective was to improve the mobile experience to directly drive conversion rates and sales growth.

As the Lead UX/UI Designer working alongside two other designers, I led the charge in auditing the existing app to eliminate the UX pain points that caused cart abandonment. Our goal was to create a unified, high-performing ecosystem across both web and mobile that reflected the new brand’s energy while significantly improving the bottom line.

My Role

Research & Analysis

User flows & Wireframes

UI Design & Prototyping

Design System

Project Goal

Drive Conversions & Reduce Cart Abandonment

Create a Seamless Shopping Experience Across Web and Mobile

Integrate the New Strategic Brand Identity

Exploring the User's Needs

To better understand the pain points and unmet needs of current HOME+ shoppers, I conducted the following research:

Analysis of current app

Users Survey

Users Interview

Competitors analysis

Analysis of current app

Key Problems of current app

Homepage

Lack of company branding element, useful features and promotion area

Hard to locate the search feature

Product Navigation

Redundant actions required when users selecting or switching product category

Top navigation design take too much space and cannot handle 4-level of listing

Filter

Grouping was unorganised, the lists were too long and hard to locate target option

Search result’s filter missing product category lead to irrelevant result affecting the experience

Shopping Cart

Insufficient information for delivery method and numbers of delivery

Misleading subtitle in shopping cart and Product’s quantity cannot be modified directly

Checkout

No linkage between delivery info and products in Checkout that lead to user confused

Redirect user to a new page to make options too often lead to a time-consuming journey

Wishlist & Order History

Improper product card design and redundant action required to manage Wishlist

Improper grouping for delivery info and product in Order History

Users Survey

To supplement our heuristic evaluation of the app, we surveyed 80 recent HOME+ customers to gather quantitative insights into their shopping experience.

2.2 / 5

2.2 / 5 is the scores of respondents rate the HOME+ App

4 / 5

4 / 5 is the scores of respondents rate how difficult to use the app
(5 / 5 = most difficult)

38%

38% of respondents said they were able to find the product they want easily

73%

73% of respondents said Checkout would be the feature need an improve

Users Interview

We conducted interviews with 8 experienced e-commerce and HOME+ users to gather qualitative feedback regarding their specific needs and expectations.

Key findings :

Poor Overall Impression & Homepage Utility

Overall app performance and visual design lagged behind competitors. Furthermore, users found the homepage layout unintuitive and less useful than industry standards.

Friction in Product Discovery (Search & Filters)

Participants struggled to find the products they wanted. The search function frequently returned irrelevant results, and the product filters were a major source of frustration due to poor usability.

High Cart Abandonment Risk (Cart & Checkout)

The path to purchase is heavily flawed. Users were confused by the delivery arrangements in the cart, and every single participant experienced friction during checkout. Overall, the checkout flow was deemed too lengthy, with users strongly desiring a more streamlined journey.

Competitors Analysis

Understanding the competitive landscape was a crucial first step for this redesign. We analyzed numerous local and overseas e-commerce apps to identify industry best practices, the following section highlights our benchmarking against only our top competitors.

Direct Competitors

Pros

Cons

HKTVmall

6 Million+ App Downloads

~1.6 Million (Active Users)

Excellent Filtering & Search Architecture, features highly granular filtering options

Transparency in Logistics, outstanding visibility into delivery time slots and real-time tracking

Clear Delivery Thresholds, indicates how much more a user needs to spend to unlock free delivery

Cognitive Overload, homepage is cluttered. Volume of sales, banners, and categories can overwhelm users

Inconsistent third-party Merchant Experience, product description layouts and image quality vary wildly, creating a fragmented browsing experience

PARKnSHOP

1 Million+ App Downloads

~0.4 Million (Active Users)

Seamless Loyalty Integration, the integration with the MoneyBack loyalty program is frictionless. Easy to earn and use points during checkout.

Quick Reorder Mechanics, the "Buy Again" feature is prominently placed, recognizing that grocery shopping is a high-frequency, repetitive task.

Lacks discovery-driven engagement features (like live streams or content hubs) to keep users in the app when they aren't actively buying groceries.

Performance Bottlenecks, the app's image loading and checkout transitions can occasionally suffer from lag.

Indirect Competitors

Pros

Cons

Taobao

Unmatched Personalization, their algorithm translates into an infinitely scrolling, highly addictive discovery feed that keeps user retention incredibly high.

Visual Search, highly accurate image-to-product searches, which is a massive friction-reducer for users looking for specific fashion or home decor items.

Aggressive Gamification, pop-ups for coins, mini-games, and live-stream overlays can make the interface feel chaotic and distract from the core shopping journey

HOME+'s Competitive Advantages

Competitive pricing, HOME+ charged merchants zero slotting or annual fees, operating on a lower base commission. Merchants could sell products with lower prices. NGOs, social enterprises, and smaller local brands could list on HOME+ as well.

100-Minute Instant Delivery, users could order frozen foods or fresh groceries in the afternoon and cook them for dinner that same night—a fulfillment speed that HKTVmall and PARKnSHOP simply could not match at the time.

Bundling strategy, HOME+ is owned by one of the biggest internet provider in Hong Kong (HKBN). New user signing up for broadband plan would receive HOME+ cash coupon. Existing users of HKBN would receive different promotion code from HOME+

Direct Sourcing & O2O Infrastructure, HOME+ is backed by DCH, one of the largest food importers and distributors in Hong Kong. Users benefited from a highly robust O2O (Online-to-Offline) network. As DCH provide over 100 retail self-pickup locations for HOME+ users.

User’s pain points and needs

After we analysed all the key findings and new insights from research,
we defined the following user’s pain points and needs:

Revamping the Homepage & Overall Experience

Pain points:
Overall app performance and visual design lagged behind competitors. Users specifically noted that the homepage layout was unintuitive and lacked practical utility.

Needs:
Introduce new, attractive UI components to the homepage to immediately improve first impressions, usability, and user engagement.

Optimizing Navigation & Product Browsing

Pain points:
Users struggled to locate desired products while browsing, directly contributing to a lower conversion rate. The product grids were oversized and missed critical details, and navigating between categories was clunky.

Needs:
Redesign the top navigation for seamless category switching and optimize the product listing grids to display essential information (like delivery remarks) efficiently.

Fixing Search & Filter Accuracy

Pain points:
Active product discovery was a major source of frustration. The search function frequently returned irrelevant results, and the product filters were overly complex and difficult to use.

Needs:
Overhaul the search handling logic and redesign the filtering interface to provide accurate results and reduce friction when users are trying to narrow down their choices.

Streamlining Cart & Checkout for Conversion

Pain points:
The bottom of the purchase funnel suffered from high drop-off rates. Users were confused by how delivery methods were presented in the cart, and every participant felt the multi-step checkout process was too lengthy.

Needs:
Redesign the cart to clearly present delivery logistics and drastically simplify the checkout behavior to speed up the journey and reduce cart abandonment.

Revised Journey

Based on the User’s needs and problems, we redesigned the journey for Product Navigation, Search result & Filter and Shopping Cart & Checkout. These Simple User Flows help us to evaluate our new concept and visualize what users will see and do, ensures all project team members and management level are on the same page.

Early Concepts

By understanding the known issues that we have, we started working on the early concept to explore different design directions by creating wireframe and review within internal team. And eventually get to the final design after few iterations.

Final Design

For the revamped design, we set a UX goal for each feature.
Use these goals to measure and direct the design of our product

Homepage

Goal

Provide Great First Impression. Users will be able to scan the latest offers, recommended products, or look for the features they want within their first visit.

Revamped Design

New Top Navigation design with HOME+ logo, Login button and Full Width Search Bar

Carousel for promotions and offers

Icon button as quick links of product category

Sticky Search Bar while users scrolling

View more link for leading users to product listing

Redesigned Product Grid

Product Navigation & Searching

Goal

A Smooth and Effortless Navigation & Searching. Users will be able to locate their desired products in a few steps, which ultimately encourages users to continue explore the site and turn them into regular customers

Revamped Design - Product Listing Page

New Top Navigation design that can cater 4 level of category and switching category quickly

Redesigned floating button for Sorting and Filter

Collapsed Top Navigation while scrolling to avoid blocking users view the product
If users want to switch category, they can simply click on it and it will transform back to normal

New promotion area in PLP, able to place banner and text description

Revamped Design - Filter

Revamped Filter applied collapse approach, all parameters are in a collapsed state and users can expand them one by one to select values

Number of results will be shown on CTA button

Product category filter for search result only. Users can use this filter while using keyword search

Price range filter, users can input the number directly or drag the slider

For Brand, Merchant and Origin filter, the design are same. Users can multi select from the list or search by keywords

Matched search results will be shown on the list

Revamped Design - Product Details

Relocated and redesigned Delivery Remarks. Let the users notice the delivery method of this product quickly

Added a promo tag for sale items, to indicate the sale % or other offers

Add Merchant link button. User will be redirected to the merchant’s product listing after clicking it

Shopping Cart & Checkout

Goal

Make it Convenience-driven and Reduce the Barriers of Checkout. To improve conversion rate, users will be able to complete the Checkout without input too much and hitting too many errors or blockers.

Revamped Design - Shopping Cart

As users may receive multiple deliveries for one order. This is a new description to indicate how many delivery for this order

The products in cart are grouped by delivery method. This info section is indicating the method, delivery fee and amount to meet free delivery

Redesigned product section. Users can adjust quantity directly and it’ll show the original price, discount applied and subtotal

Sticky bar for order summary and Checkout button

Gesture control for adding the product to Wishlist or deleting it

Subtotal amount for this delivery grouping

Section to show the free gift included in this order

Added a description for the promo code section to indicate the offers or error message

Revamped Design - Checkout

Delivery address selector, users can add a new address or select other address

Delivery method options. For HOME+ consolidate delivery, users can select delivery to home or pick up in store

Sticky bar for order summary and Pay button

Subtotal amount for this delivery grouping

Section to show the free gift included in this order

Delivery time selection bottom sheet

Store selection and pick up details

Payment selection. It will be shown when user clicked Pay button and proceed

Product Grid

Goal

To solve the problem like insufficient info and hard to click add to cart button, we redesigned the Product Grid for Homepage, Product Listing and Wishlist

Revamped Design

Enlarged product image to make it more eye-catching

Redesigned tag to indicate the delivery methods

Added a promo tag for sale items, to indicate the sale %

Redesigned Add to Cart button, more prominent and easy to click

When users clicked Add to Cart, the button will become Adjust Quantity button. Users can adjust the quantity they wanted to purchase

More prominent disabled status for sold out items

Other features

Goal

Other features like Wishlist, Order History, Registration, etc were also redesigned to cater some minor UX issues. And a new section was designed for the merchant cooperate with HOME+

Revamped Design

Merchant page is a section that can managed by the merchant themselves. They can add their logo and write a description about them

Also, they’ll have a carousel to place their own promotion banner

They’ll have a product listing for their products only. Users can navigate or filter like the normal PLP.

Revised Wishlist applied the new product grid with a delete button on it.

Redesigned order status card for Order History, users can quickly review the order by scrolling the products thumbnail on it

An Order Again button is added here for users add all the products back in Cart quickly