rent payment portal
the existing product
I joined this project part of the way through and was assigned the task of improving the UX of the rent payment journey within WHG's new customer portal.
The existing product was simple, but it lacked it’s potential functionality, and the user interface was plain and uninspiring. Although the world of rent payments is not a particularly exciting one, I needed to try and inject some character into the portal; making it look more contemporary, and providing users with a dashboard, rather than a series of forms fields to complete.
I took part in meetings with the client to understand their campaign objectives and what were their most important goals. It helped to garner an understanding of the breadth of their customer base, and the importance of their digital products being accessible to all.
As part of my research, I looked at competitor products that included dashboard functionality. Banking apps have lots of features but at times can be quite plain in their UI style, and the presentation of data can often be overwhelming and difficult to understand.
what will make this product a success?
-
Easy to use / effortless user interface.
-
Enables users to effortlessly complete their intended tasks and achieve their desired outcomes.
-
Contemporary, clean user-centered UI.
-
An interface that is adaptive to all devices.
-
Seamlessly scaleable.
-
Accessible to all.
-
Provides feedback to users.
phase 1: RESEARCH
competitor benchmarking
There are many strong examples of dashboard designs out there, but it was difficult to find anything that did a similar job to what the client was requesting.
Simplifying the complex was more challenging than it seems, and deciding what information should take priority on the screen (particularly the limited space on a mobile screen) requires careful consideration.
By carrying out this research I could identify:
-
Industry conventions
-
Innovative features or functionality
-
Market gaps
-
Tone and copy of competitors
-
Clear, effective design
phase 2: design
user flow diagram
Using Miro, I started forming the design of the rent payment journey; considering the actions and micro-interactions required for the user to complete the task.
This was an opportunity to build up on the existing framework and increase functionality, but also consider what feedback, guidance, and direction the user will receive in the event of a payment issue.
I find mapping out the flow helps to confirm whether the design will flow in a logical manner. By presenting these visual aids to my colleagues and the team at WHG, I was able to facilitate their understanding and gain their buy-in to the design.
medium fidelity prototypes
The prototypes were created in Figma and evolved within the platform. The collaborative nature of the workspace was beneficial for reviewing designs with clients, and the designs went from low to medium fidelity relatively quickly.
This provided a possibility to review and test the designs quickly, ensuring that the functionality and primary aspects of the user flow were covered.
ON REFLECTION
Knowing what I do now about Accessible Design, I would definitely run the design copy past an auditor. My concern is that some of the vocabulary used still might be in “finance speak”, particularly at the stages where the user is asked to set up and confirm their direct debit. For anyone with a cognitive disability, I question if this part of the process might be confusing or anxiety-provoking, and ultimately they would either need further assistance in completing the task or want to step away from the process entirely.
I would also want to bake in some features that account for users with visual impairments: appropriate alt text for screen readers, and the ability for resizable text zoom (up to 200%). For desktop users: ensuring that the site is fully navigatable by keyboard alone - having the focus state clearly visible and making sure that it follows the logical order of the hierarchical layout.