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