Admin System Revamp

Product + UX Designer

Fall 2024 - Spring 2025

Just skimming?

Here's the 1-min recap.

The Why
The original system was functional but fragmented. Key tasks were buried under layers of clicks, and clients heavily relied on sales reps just to get started.

The What
Redesigned the admin system from the ground up: built a new information architecture, shipped 9 new feature designs, delivered 7 UX improvements, created 24 prototypes, and flagged 6 QA issues by conducting cognitive walkthrough and analyzing different kinds of dashboard user interface. The new design is a clearer, faster setup experience for both clients and internal teams.

The Wow
The redesign immediately drove internal and external efficiency. We successfully proposed and integrated an onboarding flow, expected to improve client onboarding efficiency and increased self-onboarding rate from estimated 20% to 70% and reduce sales-client communication time by 78% (from 90 to 20 minutes).

See the story beneath the surface ↓

Background: A very open-ended start
Hey Lia, we're about to build this product tag admin system for setting up tailored shopping funnel. And this is what our system currently looks like and functions.

Example Feature: Old Product Management

Current state of our legacy system

Functional, but Far from User-centered

The original admin system had basic functionality but no user-centered thinking. As features expanded, the system couldn’t scale, causing friction for clients and overwhelming the sales team with repeated onboarding requests.

What role does it play?

The Foundation for Tailored Shopping Funnel

Before customers can enjoy tailored recommendations, businesses need to do the behind-the-scenes work, tagging products, setting up topics, and building plans. This admin system powers all of that. But the original setup made the process harder than it should’ve been.

[ However, the challenge was... ]
We were building the full experience without real users and research to guide us.

Here’s how I tackled it early on, despite the constraints.

Example Feature: Plan Builder (Old: Route Planner)

Diagnosis by Cognitive Walkthrough

Fragmented Views, Costly Memory

Navigating details under main tasks, topics, tags, and plans, required multiple clicks, making it hard to stay oriented or grasp the full picture.

Steep Learning Curve

Through discussions with PMs and internal teams, I learned that most clients relied heavily on our sales team for walkthroughs. While manageable early on, this model didn’t scale. The system’s built-in guidance was limited to static text, slowing down learning and adoption.

Interface Studies – How are admin panels typically structured?

Designing with Clarity and Context in Mind

To create an interface that’s both intuitive and scalable, I studied how other dashboard and admin tools are structured.
Common patterns I observed:
• Grid-based (Bento-style) layouts
• Top navigation for global sections
• Left-side menus for navigation or advanced settings (some fixed, some collapsible)

These insights helped shape the foundation of my redesign—ensuring users could explore confidently without feeling overwhelmed.

IMG Resource: Mobbin & Mixpanel

Define & Goals

Clarity + Guidance for a Complex Setup

The redesign had to simplify a multi-step process that involved tagging products, organizing topics, and building plans. That meant two things:
• Offer a clear overview for each core task
• Provide step-by-step guidance within each page

By making the system more self-explanatory, we aimed to support scalability and empower clients of all experience levels.

Design

01 One Click, Quicker Clarity

To reduce friction, I replaced the original editing pop-up with a drop-down block. This gave users a quicker, less disruptive way to manage content—minimizing clicks while keeping context clear.

[01] Topic & Tag
Users now get an instant overview of existing topics and tags—making it easier to spot gaps and decide what to build next.

[02] Product Tag Management
Each product’s tags are clearly displayed without extra clicks or scrolling—speeding up both individual and bulk edits.

[03] Plan Builder
Users can view each plan’s details at a glance and jump into edits with just one click—bringing more control and confidence to the setup flow.

02 A Round-the-Clock Assistant Along the Journey

To reduce reliance on sales reps, I designed an onboarding flow that walks users through setup step by step. It’s structured to complete 85% of the process independently, with the final 15% left for brand-specific customizations.

This onboarding flow walks users through the entire setup—from picking or creating topics, taggingThis onboarding flow guides users through the entire setup—from selecting or creating topics, tagging products, to building a plan—making the end-to-end journey feel smooth and approachable.

How the post-launch went?

Scalable, but Nearing the Edge

The launch delivered a streamlined system that met client needs. But as new requests emerged, especially in the plan builder, some cracks started to show. It revealed the need for future-proofing if the product continued to grow.

A Proposal for What’s Next

After launch, I proposed a second iteration to improve long-term scalability and adaptability.

While it wasn’t implemented due to resource constraints, the foundation is in place and ready to grow when the team is.

2nd Plan Builder Draft

Reflection

Learnings

01 Acknowledging limitations
Working with a single front-end developer taught me the necessity of ruthless prioritization. I focused on delivering core user value and building systems that were scalable, even if implementation had to be phased.


02 Managing multiple features with intention
I prioritized features based on project timeline, user needs, and business goals. This clarity ensured team alignment and allowed for effective negotiation and trade-offs when constraints arose.


03 Prototyping as a communication tool
I leveraged quick mockups and simple prototypes as a primary means of communication. This practice not only sparked meaningful stakeholder conversation and clarified my design rationale but also secured early buy-in for future-state ideas.