iPay Solutions provides over 3600 financial institutions (FIs) with online banking platforms for their customers. One of the platforms, Business Bill Pay, was in need of an overhaul. Having last been updated around 2009, the user interface was not only in need of a facelift, but also needed a revised sitemap, simpler user experience and responsive layout.
In order to deliver a product that was modern and easy to use, I needed to revisit the original sitemap and go through a product demo to better understand the user experience. Upon doing this, several action items became clear for the redesign:
- Reduce the amount of clicks for the user to complete a task
- Condense the amount of pages within the interface
- Create a more intuitive user experience
- Incorporate UI elements and experiences from mobile apps
- Allow users to do all common tasks from the dashboard
First, I reviewed the current UX design and looked for ways I could streamline the user’s journey. I was able to collapse over 160 pages down to 27. This was an important step in improving the user experience.
After the site map was approved, it was time to move on to wireframes. Typically, I layout the home page and an interior page, with the intent that elements are reusable for additional pages. However, the iPay team consisted of marketers, developers and product managers who needed to see how the user experience worked through the wireframe of each page. To achieve this quickly and efficiently, I used UXPin to bring my wireframes to life.
UXPin is an online tool that allows you to build wireframes and design mock-ups, while incorporating simple user functionality. By allowing the iPay team to see a rough prototype, they were able to envision how the new interface would work.
Once the wireframes were finalized, I went into design. The redesign of the user interface needed to be “white label” enough that it could work for any of iPay’s 3600 FIs. It also needed to be responsive, as many FIs do not have a mobile app for customer use.
Two design approaches were presented to the client: “Minimal Landscape” and “Urban Grid”. After a few minor tweaks, it was decided that “Minimal Landscape” would suit the needs for ease of branding across most FIs.
The final component of the project was developing an online style guide for the user interface to assist the developers in bringing the redesign to life.