What does a bank look like on your TV?

Since Apple kindly sent me one of their new Apple TV development kits a few weeks ago, I've been itching to learn more about the platform and find an app idea that could work on TV. So I was delighted when I managed to grab a place in the 2nd Mondo hackathon and a chance to explore what banking could look like on a TV.

Mondo what?

For those of you who haven't heard about Mondo, it's a London startup trying to build one of the next generation of banks - one that's mobile-first and has an API, so people can plug in 3rd party apps and other services into their bank account. Whilst Mondo isn't yet licensed to operate as a bank and offer bank accounts, they have a clever prototyping strategy. They've started handing out prepaid payment cards linked to an early version of their app to a group of "alpha" testers, which will no doubt help test their ambitions against the complexity of everyone's different banking behaviours.

mondo-card.jpg

Within a couple of hours of arriving at Mondo's office on a rainy Saturday morning, all hackathon participants were set up not just with a live card but also with a test environment loaded with hundreds of realistic past transactions, and the ability to simulate any type of new transactions. With my shiny Apple TV in my bag, I started looking for ideas of what a TV banking app could look like.

TV = large shared screen

When the new Apple TV came out, I ran a workshop with the rest of the Webcredible team to examine the possibilities of the platform. A lot of interesting ideas came out but the one thing that stood out was that TV offers a large, shared high-resolution canvas which lends itself to data visualisation and shared decision-making.

With many couples making joint decisions about their spending and often sharing bank accounts, my hypothesis was that visualising spending data and looking at it together might prompt a few interesting discussions.

After a bit of exploration around data visualisation concepts I started sketching at a treemap-style visualisation of your spending - similar to tools like DaisyDisk and GrandPerspective that show you how your disk space is used, and inspired by a visualisation found in the "Knowledge is Beautiful" book:

knowledge-is-beautiful.jpg

viz-sketch.jpg

It was easy enough to create an initial low-fidelity version of the app using Xcode & Interface builder, Apple's standard app creation tools. As the new Apple TV runs a variant of iOS, if you've ever designed and built apps for iPhone or iPad, you'll find the process of creating TV apps very familiar and straightforward.

screenshot1.jpg

Making it real

The next step was to test the concept with real data by hooking it up to Mondo's API. This is where I realised that I had to really adjust my initial concept, as it wasn't possible to fit enough categories on the screen and still visualise spending amounts based on their relative size. Treemaps were abandoned in favour of a visualisation based on barcharts visualising your spend on each category (e.g. Eating Out), then on each shop on that category (e.g. Leon, EAT, McDonalds) and then drilling down to the top transactions.

viz-sketch-2.jpg

By the end of the 2nd day of the hackathon, I had a working prototype for the final demos. I didn't manage to complete all the layers of the visualisation that I wanted to, but it was still a working tool that could be linked to real banking data.

mondotv-final.jpg

Is this actually useful?

The truth is, nobody knows. The feedback that I got from other hackathon attendees (who are admittedly not representative of the general population) was positive - especially around the possibility of seeing at a glance where they spent most of their money through the grid of logos. But once Mondo is up and running with a wider group of people using it for their everyday transactions, it will be trivial for developers to validate such ideas with customers using real data.

From my perspective, here are my top learnings around designing for TV & visualising financial data.

  • The TV screen size can appear misleadingly large and it's easy to try and cram in too much information, forgetting that your design needs to make sense when viewed from a distance. When designing for TV, don't forget to plug your prototype into a real TV once in a while.
  • Even though the Apple TV remote has a touch surface that's much easier to use than up/down/left/right buttons, you still need to think carefully about the positioning of related & frequently used UI elements, so that people don't have to spend a lot of time scrolling to highlight the item they're looking for.
  • When designing any sort of visualisation, you should try it with real data as early as possible, as it will expose if it will really helps people interpret the data. In our example, bills tend to always be a large percentage of someone's expenses, which results in a very long bar in the bar chart for that category. This in turns makes it more difficult to compare the differences between the rest of the categories.

I'm now using my Mondo card for my everyday expenses, and going to keep playing with the app to visualise my own financial data. And I'm looking forward to a future where all banks will be forward thinking enough to let their customers view their data on TV or any other platform they prefer, not just in the walled garden of their own internet banking app or site.


Many thanks go to all the Mondo staff who hosted us and especially their designer Hugo Cornejo (who helped with the visualisation ideas and applying Mondo branding to the app) and engineers James Nicholson & Jonas Huckestein (who helped me debug technical issues that were actually caused by typos in my code!).

Gibran Armijo says 10:26am 26 Nov 2015

Thanks for sharing your thought process Alexander, I like your idea on visualization, I'm sure the TV UX opens a whole new set of possibilities that seem exiting to explore, different than those predominant within mobiles.

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)