Appendix B. Paper problems – tech solutions

The project required a paper prototype of our new solutions to test. We were concerned that a hand-sketched prototype would not be compared fairly with the well-presented paper-style click thru Goran created. And we wanted to preserve our privacy and prevent comparison in turn with the real UI.

For fun and from habit, I added some interaction to the Axure. As a Hi-Fi Axure prototype,  it proved to identify a potential UI problem our solutions had caused.

Using paper-styled click-thrus

Our initial approach was to take the banking app UI and transform it to paper to remove the distraction of art direction from comparative tests. Goran kindly created a paper-style click through, which Goran user-tested using a tablet and I tested using prints taken from the click-thru.

It became arguably necessary to test the new prototype in the same way, so I created a click thru using Axure. For fun, the click-thru became more a hi-fi prototype.

The click thru modelled exactly the paper wireframing and prototyping we conducted in my design studio in Wexford (Figure 1.) with only one exception.

person sticking wireframes of screens on a wall and representing connections with string
Figure 1. Goran assembling our wireframe during our meeting at my design studio in Wexford

We had glossed over the Favourites flow. The Axure Hi-Fi click thru highlighted this would create an issue raising awkward questions in our future presentation of our ideas. Our original plan was to present the list of accounts and favourites on the homepage together in series. We chose to ignore what effect this may have as being out of project scope. We’d explain that, when more than one or two favourites displayed, the UI would “scale” to a different and undetermined pattern accordingly.

While juggling with the “scale” concept in the fun and Hi-Fi Axure, I recognised that “scaling” would present a jarring experience where our user had learned the favouriting pathway and then later would need to learn another.

Problem solving with tools

I described my preference for a tabbed UI to separate the Favourites list from the Accounts list – still on the on the Homepage to avoid upsetting the Apply button. Ideally, we’d place the Favourites feature behind the Apply button in the permanent navigation. And we figured the Apply is there for marketing if not our users’ purposes and our fictional stakeholders would push back. I transmitted a GIF (Figure 2.) to Goran to communicate my concerns. The Axure’s draft tab style alerted Goran to the iOS style guides.

GIF showing a 'traditional' tab treatment between Accounts and Favourites panel presentations
Figure 2. Initial visual treatment of Account and Favourites tabs following our anticipating a problem with our plan to ‘scale’ the UI, which in practice was going to be jarring.

The drafted visual tab style conflicted with the iOS UI kit and the existing tab pattern in the parent app. He transmitted a series of Hi-Fi artworks to demonstrate our original plan against my suggestion and we both agreed the tabs was likely the better UX (Figure 4).

Mock up of listing accounts and favourited tasks on the Homepage
Figure 3. Goran’s smart mock-up of our original strategy to list Favourites on the Homepage.
Mock up of the iOS styled tabbed UI of the accounts and favourite transaction features
Figure 4. Goran offered a vision of how the tabs would look in an iOS app. This was our preferred strategy.

Updating our solutions

So, I quickly updated the Axure’s draft tab style on which we both agreed to be a major improvement on a feature we’d partially dismissed (Figure 5). The favourites feature had become a usable and useful accelerator.

GIF of a mocked up iOS tabbed UI strategy selecting each tab in turn
Figure 5. Translating our agreed visual approach into the Axure click thru, making for a more accurate portrayal of the iOS tab strategy we each preferred to lists in series down the page

On reflection, Goran agreed that, as had surfaced in my usability test video, the “tab buttons” did not carry the visual cues required to that signify tabs are available on the page. We returned the prototype to combine the tabbed content with its relevant UI control (Figure 6). Gestalt rules.

Axure click thru between Accounts and Favourites tab in the app prototype
Figure 6. Improving the appearance of the tabs in the next iteration among other “art directions” creeping in to the “paper” UI

And the issues keep surfacing, such as list item menus that are fiddly for thumbs and may need replacing with bolder swipe gestures (Figures 7 and 8). Perhaps complete the filter, or enable drag-to-reorder list items to our users’ preferences? 

Of course, such improvements are now out of the scope of this project… if not my own personal development.

the Axure on an iPhone
Figure 7. The Axure prototype identifying where swipe gestures may improve on list menu dialogue actions of Edit and Delete…
Using the improved Axure prototype on an iPhone
Figure 8. Updating interactions in a later version of the Axure prototype from a kebab menu to swiping for Delete and Edit following usability and heuristic testing

Permanent navigation

Our dissatisfaction with the primary navigation icons crept into our work. Goran’s high-fidelity wireframe (Figure 9) is an improvement on the Ulster Bank’s design. In time, and following Bank of Ireland’s example, the “hamburger” menu may move from the secondary to the primary location. It’s upper right position perhaps given to Favourites?

More research needs completing to make the right choices. For example, the book icon is not a universal icon for Help. The convention is a question mark and replacing the Euro symbol with a house for Home cannot be argued?

Presentation detail aside, the intention remains a temptation at each iteration. 

array of icons: home, help, Get cash, and apply
Figure 9. Goran’s Hi-Fi sketch of an improved primary navigation icon array with an unlikely “Help” candidate

And, while we were at it: Stealth

Goran’s concept of a Stealth setting resulted from our combined user research. It needed examining, even if it is a secondary feature. It sounded too good not to explore and Stefan had suggested a tantalising drag gesture.

I included a rough sketch of the feature in the Axure prototype for Goran to feedback on (Figure 10).

Gif animation setting Stealth and the account balances being obscufated and revealed on user drag action
Figure 10. Axure sketch of the Stealth feature

Goran employed the animation software, Principle to craft and return an improved visualisation of the feature (Figure 11).

animated gif of the Stealth feature drag on app body to reveal account balances
Figure 11. Goran’s animation of Stealth created with Principle animation software

What appeared a bolt-on to our project appears to have grown legs?


The Ulster Bank’s art direction and UI design are flawed. When aiming to improve the Pay flow the UI design was proven in usability testing to require updating.

While testing “paper” prototypes seemed a poor second-cousin to software prototyping and wireframing, it proved its worth toward the use of technology. Although the technology was reassuring and a bit of fun, the “paper” click-thru helped confirm our assumptions. Technology helped us to feel the experience and in real-time.

Our remaining differences are all representational: how an overlay or dialogue looks. I’m happy with that. We cannot really go straight to production at paper prototyping? More testing and design discussion is needed.