Project Overview
As part of the larger My MCTO website redesign, I worked on creating a new admin back office for Corporate Services. The goal was to deliver a modern, clean, and intuitive user interface that would streamline administrative workflows while allowing for future scalability.
Project Goals
• Design a user-friendly and efficient back office interface.
• Ensure ease of navigation with a well-structured menu system.
• Allow for future expansion by enabling additional menu categories and configurations.
• Maintain consistency with the overall My MCTO design language.
Challenges & Solutions
Complex Navigation Requirements: The admin panel needed to support multiple configurations and categories without overwhelming the user. I designed a collapsible and modular sidebar navigation, ensuring that users could easily access relevant sections.
Scalability: To future-proof the interface, I implemented a flexible menu structure that could accommodate additional features without disrupting usability.
User Experience & Clarity: I conducted usability tests to refine the information hierarchy, ensuring key functions were easily discoverable and reducing cognitive load for administrators.
Design Process
Research & Requirements Gathering – Conducted stakeholder interviews to understand pain points and requirements.
Wireframing & Prototyping – We created low-fidelity wireframes to outline the layout and functionality. The wireframes were not created by myself.
High-Fidelity Design & UI Enhancements – Developed polished UI mockups using a modern design system aligned with My MCTO branding.
Testing & Iteration – Conducted user testing sessions and iterated based on feedback to refine interactions and usability.
Initial Menu Page
Hover states shown. The admin page we are designing is under the "Configuration
Initial Menu Page
Main admin page. Expanding sidebar menu shown.
New Category Process
Flow for adding a new menu category shown.
New Category Error/Success States
New Configuration Process
Flow for adding a new configuration shown.
New Configuration Error/Success States
Results
• Delivered an intuitive and scalable admin back office interface.
• Enhanced user efficiency by reducing complexity in navigation.
• Provided a flexible structure that allows seamless integration of future features.
• Received positive feedback from stakeholders on the clean and modern design.
Conclusion
This project was a valuable exercise in balancing functionality with user experience. By prioritizing clarity, efficiency, and scalability, we successfully delivered an admin back office that not only meets current needs but is also adaptable for future growth.