Middy's Electrical Case Study
Middy's online invoice payment system faced usability challenges, impacting thousands of customers daily. I led a focused UX/UI redesign to streamline and enhance the payment experience, making transactions more efficient and user-friendly.
The details
My Role
User Experience Design / User Interface Design
Deliverables
High Fidelity prototype within Figma to be passed onto developers
The problem
Middy's current website payment system lacks the functionality for users to select individual invoices for payment. The team at Middy's seeks a future-proof solution that enables users to conveniently select and pay specific invoices.
The Solution
I successfully redesigned Middy's online payment method for invoices, a system utilized by thousands of customers nationwide. This overhaul ensured a seamless user experience at a crucial stage in the customer journey, thereby bolstering Middy's online competitiveness.
Let's Understand The Problem
Middy’s Electrical recognized the need to improve their online payment process based on user feedback and approached us with this challenge. Following a discovery workshop with their team, I conducted a deeper analysis to identify key factors that would shape the design solution:
How many invoices do users typically manage at once?
What essential information should be displayed on invoice cards?
What limitations exist within the current process?
These insights were crucial in designing a more efficient and user-friendly payment experience.
Research
Middy’s Electrical recognized the need to improve their online payment process based on user feedback and approached us with this challenge. Following a discovery workshop with their team, I conducted a deeper analysis to identify key factors that would shape the design solution:
How many invoices do users typically manage at once?
What essential information should be displayed on invoice cards?
What limitations exist within the current process?
These insights were crucial in designing a more efficient and user-friendly payment experience.
Let's do some sketches
I began sketching ideas to determine the best way to present the required information to users. The first concept featured a grid layout, where each item would expand into a dropdown, allowing users to easily access and manage invoice details.
I began sketching ideas to determine the best way to present the required information to users. The first concept featured a grid layout, where each item would expand into a dropdown, allowing users to easily access and manage invoice details.
When a dropdown is expanded, the corresponding invoices are displayed within it, along with options to access statements and orders.
After discussions with the Middy’s team and input from multiple departments, we discovered that orders were no longer needed in the display. We adjusted the design accordingly, refining both the UI and overall user experience.
Invoices still expand in a dropdown format but with a refined UI. This updated design successfully met the expectations of both Middy’s team and our design team at Newpath, leading to the next step of prototyping.
And the final design…
After receiving extensive feedback from both our design team and the client...
Interactive prototype
The Rundown
Success?
The redesigned invoice payment system has significantly improved usability and streamlined user flows for thousands of Middy’s customers. By simplifying navigation, optimizing information display, and refining the UI, the new experience allows users to manage invoices more efficiently. These enhancements have not only made the payment process faster and more intuitive but have also strengthened Middy’s online presence, reinforcing their commitment to providing a seamless digital experience.
Challenges
One of the main challenges was gathering all the necessary information from various departments and teams, each with different priorities and requirements. Ensuring that the design accommodated these needs while maintaining a seamless user experience required careful adjustments. However, through effective communication and collaboration, we were able to align expectations, refine the design, and create a solution that met both business and user needs.
Improvements
If given the opportunity, I would have loved to invest more time in gathering comprehensive insights from every department involved. A deeper understanding of each team's specific needs could have further refined the design process. Additionally, conducting more extensive user research would have provided valuable feedback to optimize the experience even further, ensuring the solution was perfectly tailored to user behaviors and expectations.
Overall
The redesign of Middy’s online invoice payment system successfully enhanced usability, streamlined user flows, and improved efficiency for thousands of customers. Despite challenges in gathering input from multiple departments and adjusting the design to meet diverse needs, effective communication and collaboration ensured a well-rounded solution. While the project delivered significant improvements, additional time for deeper departmental insights and user research could have further optimized the experience. Ultimately, the redesign not only simplified the payment process but also strengthened Middy’s digital presence, providing a more seamless and intuitive experience for users.
