1%
Conversion Rate
+11%
Total Sales
50,000
Monthly Sessions
city'super E-Shop
Led the end-to-end UX/UI design for revamp of the city'super E-Shop, resulting in an 11% increase in total sales year-over-year and elevating the conversion rate to 1%.
Designed high-performing seasonal campaign landing pages that consistently attracted over 50,000 monthly sessions, significantly driving traffic and sales.
Company
City Super Limited
Tools
Figma
Shopify
CMS
Roles
Web Design
Web Delevopment
Project manegement
Deliverables
Website revamp design
A/B testing result & Analytics
Observation
Customer surveys and journey mapping revealed a critical pain point: users were overwhelmed by the 16,000+ product inventory and struggled to find items that met their specific needs, leading to cart abandonment and frustration.
Context-Aware Filtering Systems
Design filtering systems for two vastly different product types: a massive grocery inventory and a premium, signature wine collection. The goal was to accelerate product discovery but the user's mindset and decision-making criteria for each are completely different.
For Premium Wine Collection: The "Inspirational" Filter
-
User Mindset: Exploring, dreaming, making a considered purchase. Origin and story are paramount.
-
Design Solution: I created an image-based "Origin" filter using evocative landscape photography of wine regions.
-
Why it Works:
-
Emotional Connection: Users can imagine the terroir, elevating the experience from shopping to discovery.
-
Visual & Efficient: Quickly scannable and taps into the primary way wine enthusiasts categorize products.
-
High-End Aesthetic: Reinforces the premium quality of our wine selection and the city'super brand.
-
For Grocery Items: The "Functional" Filter
-
User Mindset: Task-oriented, looking for something specific, efficiency is key.
-
Design Solution: I implemented a clean, text-based category filter with a clear hierarchical structure.
-
Why it Works:
-
Speed & Clarity: Allows users to drill down into a specific category (e.g., Japanese Grocery > Noodle & Pasta) as quickly as possible.
-
Handles Complexity: Effectively manages a huge number of products (16,000+) without overwhelming the user.
-
Predictable: Uses a familiar pattern that users expect for utilitarian shopping tasks.
-
Streamlined Promotion Hub
-
Clear Visual Hierarchy: Prominent display of discount amount, applicable products, and—most importantly—the expiry date.
-
One-Click Copy: Added copy button for each promotion, eliminating the friction of manually typing codes and reducing errors at checkout.
-
Urgency and Scarcity: Highlighted expiration timers to create a sense of urgency and encourage quicker purchase decisions.
Optimizing Mobile Collection Grids for Higher Conversion
Increase Information Density: Show more products on the screen to reduce scrolling and improve browse-ability.
Highlight Urgency: Make the countdown timer a dominant, unmissable element to encourage faster decision-making.
Online
Shopping Day
Conceptualized and art-directed
seasonal promotional campaign websites and landing pages, creating compelling visual narratives that drove sales during key shopping periods.
ROYCE' Wedding Voucher
I crafted the ROYCE’ Wedding Triple Surprise campaign page for city’super’s e-shop, blending elegant minimalism with romantic warmth. The layout guides users seamlessly through three “sweet surprises”—gift vouchers, curated chocolate favors, and customizable gift boxes—using subtle hierarchy, high-quality imagery, and clear call-to-action micro-interactions.
Christmas Landing page
I shaped the “The Gifted Forest – Christmas Celebrations” landing page for city’super E-Shop to spark instant holiday joy and drive festive purchases. A warm, forest-themed hero with twinkling micro-animations welcomes users, while a sticky progress bar and whimsical section icons guide them through curated gift ideas
New Member Welcome Gift
I designed the New Member Welcome Gift landing page for city’super E-Shop to convert new super e sign-ups into first-time buyers. The page features a clean, trust-building hero section with the HK$50-off promo code prominently displayed, paired with bold benefit-driven copy and a single, frictionless CTA that drives straight to checkout.
Recipe Tutorial
I created the Lazy Cook’s Starter Guide product pages for city’super E-Shop to make quick home cooking fun and simple. Each page uses a clean layout with eye-catching hero images and short video tutorials that play on scroll, showing easy steps for dishes.
