city’super is an established high-end supermarket chain offering a wide range of international products. They were looking to enhance their online shopping experience to better capitalise on the pandemic-driven growth. However in the current state, it's online shopping experience is not on par with its physical shopping experience.

I led the effort to improve the online customer journey starting with redesigning the navigation and homepage, while also delivering some initial designs for the product listing page and product details page. To complete this project, I regularly collaborated with and presented to leadership.

Empathise

Research Methods

Because of the tight timeline and budgetary limitations. UX Research is done in a way that does not cost anything, including analysing exisitng surveys, google analytics, heatmaps, online sales data and communication with eCommerce manager to better understand user behaviour.

Define

Thematic analysis on customer survey

HR department had done a survey (250 paying customers) on the online shop user experience a few months before the project. While the report focused on NPS score, I analysed the user comments and arranged them into themes.

User Journeys

By analysising the survey, google analytics, hotjar along and interviewing eCommerce team members, I created 2 main personas and 4 core user journeys with mapped painpoints.

Key Insights

Shoppers expect to find the same selection of products in-store and online.

• Online/Offline Cross-selling is very common.
• Shoppers expect discounts in physical stores to be present in online stores, with additional online and VIP exclusive offers/discounts.

Design

Main navigation iterations

After reviewing both local and international competitors, I found main navigations tend to fall in those 4 patterns, each pattern has its trade offs. To proceed I let the stakeholders understood the tradeoffs and led a discussion, we settled for the category bar pattern which most of the stakeholders think customers prefer. If given the resource I would user testing on this.

Final Designs

Design Highlight #1

Navigation

Changed from Hamburger menu to Category on the top nav.

Design Highlight #2

Carousel & VIP Exclusive Discounts

From heuristic evaluation supported by hotjar recordings, we found that small hidden arrows (appear only when hovering on the banner) in the old design led to a lot of dead clicks. Instead of showing the arrows when hover, the new navigation arrows have a large and clear click area and is always be visible.

A VIP User will see exclusive promotions in hero banner carousel.

Design Highlight #3

Brand Section

After having a better understand of the business and its customers, a clear key strength of city’super was its wide range of niche premium products that people kept coming back for. I designed a brand section to better comunicate this strength to the customers and to showcase niche brands eCommerce team would like to promote.

Design Highlight #4

Tile Variety

The original design only had 1 product tile style, showcasing a title and 4 products. The redesign added 15 new tile to address the painpoint of not enough promotions and added promotion type flexibility for the eCommerce team.

The redesigned product tiles also aided product exploration, firstly by making supporting more was of grouping and displaying products (e.g using a video, grouping products according to themes like summer must have.), secondly by making it visually less repetitive and more attractive to better retain customer attention.

Design Highlight #5

Search Result

To adjust customer expectation that online and physical store should have the same products. I suggested to added the ability to suggest product to be listed online, to let eCommerce team prioritise which products to list. Initially not in scope, but added for severity of the painpoint.