Project I. Revamping Page Layout

Conduct an In-Depth Analysis of Information Architecture Challenges and Visual Anomalies \

Step 1. Assessing Information Architecture

[ Structure challenges identified from Seller section ]

1. Information Overload
2. Imbalanced Information Distribution

3. Relevance Gaps during Transition

Step 2. Amplifying Problems through Visual Examination

[ Visual problems identified from Seller section ]

1. Lack of visibility

2. Overlapping popups

3. Inconsistent context layout

Formulate Precise Objectives and Solutions Through a Rigorous Understanding of Structural and Interface Analyses \

Objective 1. Refine information architecture

[ To initiate the process ]

Organize Elements & Highlight Difference

I organized all elements from the User and Seller sections to establish a structured foundation. Using network diagrams, I highlighted the distinctions between these sections, identifying key areas for improvement.

Reorganize Seller Structure

Building on the insights from previous steps, I restructured the Seller section’s Information Architecture to align with refined objectives and an integrated approach, ensuring a more cohesive and user-centric design.

Objective 2. Redesign User Interface

[ Comparative Analysis : Shopify & Stripe ]

Key findings

On the Primary page, both platforms display key metrics with independent data banners—Shopify includes a date selection option, while Stripe keeps it simple without one. On the Secondary page, both platforms use blocks or dividers to organize related information, avoiding pop-ups. In summary, both platforms utilize independent data banners and minimize pop-ups in their interaction flows.

Implement Visual Strategies to Tackle Identified Challenges and Enhance the Overall Usability and User Experience \

Solution I. Implement a data banner on primary page

Solution II. Utilize Modular Blocks to Refactor the Secondary Page

Solution III. Preserve User Context with Popovers

AB Testing \

Variant A - Group A

Variant B - Group B

Conclusions.

During A/B testing, I gathered feedback and observed the following outcomes:

User Engagement: Group A (Primary on the left) showed higher engagement, interacting more and spending more time on the page than Group B.
Visual Balance: Group A users reported better visual balance, focusing more on the center of the screen.
Navigation: Group A's left-side Primary section improved navigation, making important information easier to find due to the enhanced visual hierarchy and organization.

Based on these findings, I concluded that placing the Primary section on the left side resulted in better user engagement and page navigation. Therefore, we decided to proceed with Variation A.

Final Showcase \

Primary Page Before vs After.

Before

After

Secondary Page Before vs After.

Before

After

Overall Prototype.

Impact.

The enhancements significantly reduced cognitive load, improving information accessibility and task management for Ezze admins. The redesigned layout of both the primary and secondary pages introduced a modern aesthetic while greatly boosting workflow efficiency. As a result, the Ezze Admin Dashboard transformed into a well-organized, intuitively navigable, and visually cohesive platform, elevating operational engagement and user satisfaction.

Previous
Ezze Admin Dashboard

Next
Project II. Improving Data Visualization

Selected works | LinkedIn | Say Hiii~👋🏻

Design Copyright ©️ Mingyue Qu