E-commerce CMS boosts online sales

E-commerce CMS boosts online sales

Role: Product designer

Released time: September 2022

Contribution highlight: Addressing problems by identifying root causes and delivering long-term solutions

The e-commerce team faces inefficiencies and high costs due to the need for IT change requests, which slows down content updates—especially in the fast-paced grocery retail industry. To solve this, the homepage revamp will introduce a modular design, allowing the team to easily manage content without relying on IT, improving agility and efficiency.

Success metrics achieved after launch

10+

NPS commendations

20%

sales increase across 12 categories

3.6%

Boost homepage add-to-cart rate

Symptoms

  • Online sales are consistently declining.

  • Customer satisfaction metrics are steadily decreasing.

  • Repeated customers perceive online prices as higher than in offline retail stores.

Root Cause

  • Online promotional prices are often delayed or no-shows compared to offline stores.

  • The delay is caused by the e-commerce operation team’s inability to upload promotional materials by themselves, they need to rely on engineers fully.

How might we empower non-technical teams to manage content by them themselves?

Solutions

Configured on Magento to develop a new homepage tool that is code-free, user-friendly, and fulfills all requirements, including maintaining product categories, creating campaigns, and generating promotions.

Please note: As this is an internal backend system, I am unable to provide highly detailed designs and prototypes due to our confidential data policy.

How to tackle the fulfillment problem?

Configuared promotions for different locations.

This feature involves configuring each section for visuals and managing the fulfillment store.

Configuared promotions for different locations.

This feature involves configuring each section for visuals and managing the fulfillment store.

How to display products and upload campaign banners?

Create campaigns by entering text and uploading images.

This implementation allows the operations team to collaborate directly with brand designers, streamlining sales efforts.

Create campaigns by entering text and uploading images.

This implementation allows the operations team to collaborate directly with brand designers, streamlining sales efforts.

Production environment view

Production environment view

Here’s the new homepage shopping experience, featuring the implementation we designed in Magento. I’m proud that non-coding team members completed all the updates using the tools we provided.

Other input: implementing a new design system

I proposed a new design system for the e-commerce site. Although it expanded the project scope, we had sufficient engineering resources in that sprint, allowing for the design system to be developed and implemented quickly. Here are some key elements, along with a comparison of the before and after looks.

Other input: implementing a new design system

I proposed a new design system for the e-commerce site. Although it expanded the project scope, we had sufficient engineering resources in that sprint, allowing for the design system to be developed and implemented quickly. Here are some key elements, along with a comparison of the before and after looks.

After

Impact

Impact

Visit T&T Supermarket's website to explore the homepage and categories. The structure and design I crafted three years ago are still in place, demonstrating their sustainability and effectiveness.

After

Any questions?

Say hello at liqing.chen0909@gmail.com
For more information, here's my resume