Project Overview
As part of the My MCTO website redesign, our team focused on improving the Corporate Service checkout page. A key challenge was presenting multiple payment options in a clear and user-friendly manner. The "Pay Online" feature supports eight different payment methods, and our goal was to simplify how users interact with and understand these options at a glance.
Project Goals
• Enhance clarity and accessibility of payment options
• Reduce cognitive load by minimizing information overload
• Ensure the design aligns with My MCTO’s overall UI/UX strategy
• Improve user confidence in selecting the right payment method
My Role
I was responsible for conceptualizing and designing the payment options display. My process included:
• Researching best practices for financial UI design
• Creating high-fidelity mockups
• Collaborating with developers to ensure seamless implementation
Design Solutions
Hover Menu – A dynamic menu that appears when users hover over the payment section, displaying all payment options without cluttering the interface.
Expandable Button – A button that, when clicked, expands to reveal all available payment methods, providing a clean and organized structure.
Compact Expandable Menu – A variation of the expandable button that takes up even less space initially, ideal for a minimalist design approach.
Option #1
Hover menu. A dynamic menu that appears when users hover over the payment section, displaying all payment options without cluttering the interface.
Option #2
Expandable button. A button that, when clicked, expands to reveal all available payment methods, providing a clean and organized structure.
Option #3
Compact expandable button. A variation of the expandable button that takes up even less space initially, ideal for a minimalist design approach.
Final Outcome
The redesigned payment options interface significantly improved user engagement and comprehension. Key results included:
• 30% reduction in user confusion based on feedback surveys
• Increased efficiency, with users selecting their preferred payment method faster
• Positive reception from internal stakeholders and external users
By streamlining how payment options are displayed, this redesign enhanced the overall usability of My MCTO’s Corporate Service section, making online transactions more accessible and user-friendly. We ultimately went with option #1.