Iterations
Lo-Fi Sketches & Testing
Following Agile Methodology, we developed lo-fi prototypes rapidly in order to get something in the hands of the users. These did not need to be perfect; their purpose was to illicit a response that we could be fed back into the next iteration. Our initial prototyping phase explored and tested user stories via paper sketches. We then progressed to non-interactive wireframes in Sketch in order to capture feedback from agents. Tests typically comprised presenting research participants with a sketch and asking them to perform a task. This enabled researchers to understand if the journey to complete the task made sense to them, that the terminology was consistent with their knowledge and that the pathways through the pages directed them to their task appropriately.
Learnings
Early testing results revealed interesting user preferences and challenges in our prototype that we have been able to feed into our next iterations. In this way, with regular testing, we hope to achieve a user-friendly interface.
- Frequently-used actions weren’t very accessible, such as the notes field
- The payment history lacked the required detail of transactions eg failed payments not showing in the payment history
- Some features as designed were not intuitive to users eg changing payment amount
- We had mixed reviews with both tabbed and left hand navigation models so test further
Hi-Fi Wireframe & Testing
Once we had established a standard flow for the site, we developed hi-fi wireframes in Axure through which we could thoroughly test our interface more thoroughly. We tested stories with agents using the wires and amended stories accordingly.
The following link will take you to some of the recent iterations of wireframes:
We wanted to engage with as much of the user base as possible to ensure broad feedback from the team. Therefore, we requested, in each testing session, agents that we had not already tested with. We also wanted agents from an experienced background as well as those identified as being less confident with computers.
We tested wire frames with six agents through July, September and October looking at the functionality for a rent transaction. The task that we asked the agents to perform with the wire frames were:
- Take an anonymous call
- Search for a caller
- Edit caller contact details
- Add caller notes
- View historical notes
- Look up other tenants on the tenancy
- View recent payment history and historical payments
- Take a payment
- Send a communication
We learnt some key insights:
- we need an 'Add Notes' button on each screen so the agent could add notes to the case right there and then
- when identifying the caller, we need to display all the tenants at a property to allow the agent to choose which one they are speaking to.
- we need to make the anonymous call link (for when the agent doesn't need to identify the caller) less hidden and more prominent.
After further testing and iterations, the agents also felt that the payment process was much better and that the approach was more intuitive.
Learnings
The advantage of hi-fi wireframes is that we can test the more subtle details of visual elements such as colour and space without investing in code. Examples include:
- Using colour only to indicate if rent balance is in credit or arrears is not enough. Users tend to look for a '-' symbol for negative balances
- When on screen, the 'Add Notes' button is positioned away from the main action area (left hand navigation etc.). Therefore users struggle to locate it.
- Users visually struggle to understand the structure of the left hand navigation. We will iterate by experimenting with negative space and copy to make the structure more intuitive.
- Copy of Call Reasons was not explanatory enough to instantly understand what they are for. We have reviewed Rent Reasons, and the NCC are reviewing the rest.
From these examples we intend to amend how we visually communicate the functionality.