This is an appendix post, related to the TSB Bank [my]bank project, to give a little background (and some tasty treats!) to the process of UI design. Not sure if I should provide a narrative all the way, but here we go..

We began – as you do – with the brief. Did a whole lot of research, of course, but had to begin along certain fixed guidelines. First off, we all hated the usual graphic representation of an account, which is tables and rows of numbers. We wanted to graphically anchor the user to one or the other account (expecting very high numbers of accounts as well). The other core principe was customisation, the ability for the user to create a very individualised experience in keeping with the mybank brand . From my perspective this meant systemmatically thinking in terms of custom themes, and colours –  right from the get-go. And that means thinking in terms of a PSD structure that makes this feature accessible to app developers. So from that, our first concept was born. The wallet!

Now another thing to mention at this point are the platforms we planned for. An iOS app, with a web (Flex) alternate interface were core. But early on the possibility of an Android version was floated. For those of you who have done UI design for Android know well, it can be challenging. As capable as Android is (and I really DO like it as a mobile OS), the lack of restriction on screen resolutions creates an environment in which you pretty much have to prepare for every combination of widths and heights in the world. So having pushed that off into the future, we could start work with the fixed screens of iOS, to structure a look and get the app into the world.

Enter widgets! Arguably the ultimate, when it comes to customisation. First we tried to reconcile the two concepts by having widgets mixed in with accounts inside the wallet.

It was a start, but proved to be quite a hindrance moving forward. First there was an issue of keeping layouts consistent over platforms (ie you arranged your widgets one way on your ipad, we needed to show those changes on your iphone). And second, it was agreed that it was stretching the mataphor a bit too far. So suffice it to say that 43 litres of caffeine later, we arrived at a core interface much like the final product. Widget “wall” and accounts-related split down the middle.

Now from this point on, it was getting all our features / functions embedded in a way that would feel natural, and work with the least effort. So let me just share a few of our functionality-boards here, to give you an idea of what’s involved in a single screen / feature of such an app!

For example : to get image re-sizing for each platform mathematically lossless ( and not have a pixel go astray here or there) you needed to pick your sizes very carefully.

Or think about showing a time interval (from / to dates) in a more intuitive way than two input fields.

Or.. My favourite, and also the most complex part of the app : Think about creating a payment system that accomodates easily paying new people, bump-enabled devices, saved people, companies (saved and new), and taxes (saved and new).. Here’s the dissected version!

And just a few other boards to soothe that UI designer appetite..

Peace!

As part of the [my]bank campaign TSB Bank asked Momentum Studios to work with them to create a game aimed at the younger demographic which would help encourage the uptake of the mobile application from new customers. After brainstorming a number of ideas the banks digital marketing specialist proposed a pennies from heaven concept.

The basic concept for the campaign was… [my]bank is giving you the power to bank the way you like… you don’t need your old bank any more. Try to retrieve as much of your money from your old bank as you can, and whatever you catch we will give you when you sign up.

The challenge was how to create a playable game and make it seem fun, relatively easy and not bore the players before they had attempted to extract maximum cash rewards. It was also important to build in social sharing aspects so that the game could be as viral as possible. Players could tweet or allow the game to post scores on their wall in order to encourage others to beat them. The game was initially built in flash and we engaged the team at Spudd to develop it as closely as possible in iOS for iPhone and iPad. The site sniffed out the specific device and routed the user to whichever platform was most appropriate creating a seamless experience.

All versions sent and received data from a central database that was controlled within the banks firewall, players could submit their details and high scores and would receive a unique token, both in game and emailed, which they could use to redeem for cash in their new accounts.

The production has received a gold W3 Award from the International Academy of Visual Arts. You can play the flash version of the game here

The Team
Ben Toth: Game design and flash development
Eve Byers: Game artwork concepting
Michael Paterson: TSB Bank digital marketing specialist
Spudd: iOS development for iPhone and iPad versions

TSB Bank is an independent 100% New Zealand owned bank with a reputation for innovation, industry firsts and customer service excellence. Established since 1850, the bank is responsible for handling more than $4 billion of depositors’ funds with an integrated internet and phone banking system supporting more than seventy thousand clients throughout New Zealand. We were approached by their Technical Services department and asked if we could help with the user experience and interface design of their first mobile phone banking application which in keeping with their reputation would offer a fresh look at the mobile banking experience.

The Bank was keen for the project to be design led which meant our responsibility was to further develop, refine and execute their original concepts and provide a creative vision that would engage the various core departments and assist with the massive task of realigning the underlying infrastructure to support a truly customer driven mobile service.

The overarching requirement was for a fresh approach and not to copy the usual banking app style that is so prevalent, they weren’t interested in a table based design and they wanted to include a rich set of new features such as bump payment, automatic transfers and payments, push notifications, the ability to open new accounts and term deposits on the fly, and many more. It’s most important feature was the to give the user the ability to heavily personalise the experience, essentially creating their own bank. Interestingly the [my]bank application boasts more than double the features of any other bank app available in New Zealand.

The banks Technical Services department would handle all coding while we provided the UX/UI designs which meant a very close collaborative relationship would need to be established. To complicate this our team was spread across the world during the project, in Singapore, Hungary and New Zealand, so contact was restricted to multipoint Skype video conferencing and other digital collaboration tools such as Cacoo, Dropbox and Google Docs. Near the end of the project Google+ video conferencing was also utilized. This proved to be no problem and in many ways was beneficial since the various time zones meant our team could provide coverage practically 24 hours of each working day.

Whilst the project was to be essentially produced for mobile devices the Bank was also keen to make sure those without phones or tablets could also access the experience via the web. Initially it was proposed that versions for iOS, including iPad, and Android devices be built in parallel, although it quickly became evident that approach would seriously increase the time it took for the product to reach market. A decision was made early on to build initially in iOS and Flex and then port to Android after launch. Metrics also showed that despite New Zealand having a higher penetration of Android powered devices, most of the mobile devices accessing the banks sites were from iPhones along with a surprising amount of iPads.

The [my]bank iOS application was launched in April and has quickly gone on to be another successful product for the TSB Bank with a 4.5 star user rating in the appstore proving the banks commitment to innovation and customer service is alive and well in the mobile age. An Android version is currently in development.

We appreciated working with Ngati Awa in Whakatane to assist the iwi to tell the true tale of the adventures of their famous Wharenui Mataatua, a beautiful carved meeting house which was taken by the New Zealand Government in the 1890′s and sent across the world to be displayed at various British Empire exhibitions in Australia and the UK. Here are a few screens from the film and a condensed version of the story.

Scripted by Virginia Winder and narrated by Pouroto Ngaropo the story begins in the 1870s. To a time when the people of Ngati Awa are struggling to hold on to land, to life, and to hope.

They are reeling from land confiscations by the Crown and, epidemics of introduced illnesses such as typhoid, whooping cough and measles have taken the lives of many Ngati Awa, especially the children.

The area is under military surveillance and 33 of the iwi’s men have been imprisoned in Auckland.

In these turbulent times, an idea is born to build a carved meeting house to celebrate the ancestors of Ngati Awa and to unite all the tribes of Mataatua, the great waka that landed at Whakatane more than 700 years ago.

And so, with Wepiha Apanui as the master carver and architect, a beautiful wharenui is built.

Mataatua is to be a house for the Queen of England. This dedication means that if she comes to Aotearoa, she has a home at Whakatane.

Click here to view the embedded video.

Lnrdshelby’s informative video charting the evolution of computer generated characters in cinema is a great watch.

Click here to view the embedded video.

In 2008 we had an opportunity to work on a interesting project with the creator of the Moonjoos line of vodka jellos.

Aidan wanted to create an experience site where the legend of the brand could be developed. So working with our friends Digitalus we set to and devised a world on the dark side of the moon where men were tempted by beautiful maidens on earth, kidnapped and then set to work as slaves of the Moonjoos Corporation, mining, distilling and packaging the famous Moonjoos brand of vodka jellies.

Most of the work was completed in-house with the dark moon caves and factory environments being modeled in Maya and layers built up in flash, similar to our other work with Canadian Club Whisky. Since the jellos are an RTD and targeted at the 18 to 24 year old market we decided to base the experience around a set of games.

As a slave you have to complete a series of tasks, firstly mining the rare moon rock for the secret ingredients, then mixing them correctly, before working in the packaging room distributing the product around the world. All the time you are cajoled and harrassed by the moon maiden who has become an evil slave driver with a particularly sharp tongue.

Once all tasks are completed you end up in the bar where you learn how to consume the jellos and presumably have achieved a rank worthy of being released back to earth.

The site received a lot of attention, statistics showed many game players from Asia and China in particular. It was shortlisted in the top five of the animation category of the 2008 Pixel Awards alongside our heroes Firstborn and Big Spaceship. It was eventually pipped by Firstborn’s Microsoft Zune Journey.

Go play and enjoy Moonjoos here

For the past 18 months we’ve worked with the Nelson Marlborough Institute of Technology to help them create a large number of interactive animations for their Aeronautical Engineering courses. We’ve posted stills of a few of our favourite models below so that you can appreciate the quality and  attention to detail in each animation.

Students enjoy being able to interact directly with each model and are able to visualise the functions in a step by step and hands on approach. They can switch individual groups of lights on and off in aircraft, watch an animated character demonstrate airtraffic signals or see how heat affects different metals by lighting their own virtual bunsen burner.

More pictures after the jump.

The problem with 3D animation appearing so bewitching and almost anything being possible, is that people don’t understand certain 3D workflows can be extremely linear, and therefore certain things cannot be adjusted after the fact, without losing a great amount of work (this video is highly simplified, but it presents a few of these issues clearly).

The Foundry, developers of Nuke, have purchased Mari from Weta. Mari is an extremely scalable painting application, including highly complex deforming meshes, that was built in tandem with the production of Avatar, and allowed the dense world to be realised. Interestingly Weta will still develop features for this product, so the two builds will continually merge at given dates. The Foundry know how to build products, by jump starting development by purchasing them after being rigorously developed and tuned on full scale Hollywood blockbuster films. Nuke was originally created by Digital Domain and used on many of their films in the 90s, and in the last decade. Mari is targeted for public release on Windows and Linux 64bit platforms. Article byCGSociety here, and video interview by fxPhd here.

Google enters a new market, the home media box, as a new front against competitors with products such as Apple TV, Tivo, Windows Media Center, and many others. Google’s main differentiating aspect to their product, is their expertise with search and vast video libraries.

Here is some interesting research by Alias-Wavefront (now owned by Autodesk) from the late nineties. The Boom Chameleon running Maya software, is a motion capture device with screen. This could be recreated in a much more portable way these days, if a light version of Maya were created for the iPad, or similar device. The iPad could be used on movie sets, to check out virtual sets, and make simplistic layout changes. This would be a very inexpensive way for many different departments to check out a set before it is built, or fully developed as a virtual set. More Boom Chameleon here and here.

Recently I have seen Bill Buxton (in the previous Alias Videos ) pop up in some Microsoft research demo’s, regarding natural user interfaces, this guy is a genius and a brilliant speaker. I wonder when the public is going to see a mainstream product from Microsoft to show the results of their research. Microsoft have great tech, they just aren’t very quick at turning it into commercial products.

Project Natal is looking good (CES 2010 Video here, and here), but come on Microsoft when are you going to give it a real name (Project Birth), not a code name? Playstation Move is the perfect name for Sony’s motion control device – the name is important. Playstation Move preview here and excellent development diary here.

Microsoft Office Labs 2019 Vision Montage

This is very cool and most of the technology is quite probable at some point.

Microsoft Project Gutav is another Microsoft Research group experimenting with advanced painting software. Hopefully one day available in a portable tablet! If your interested in Microsoft’s other natural input technologies, Microsoft Surface is worth checking out – a large multi-touch, multi-person surface designed for large commercial clients. Though much of Microsoft’s Surface technology could also be directly applicable to a portable tablet.

Oh and if anyone thinks Microsoft copied Apple regarding touch based interfaces, research has been on going world wide for decades by many companies. Besides Microsoft actually released Microsoft Surface one month before the iPhone, Apple’s first touch device. The first iteration of MS Surface had all the same functionality and more as the iPhone, regarding touch control interface innovations – Microsoft just focused on the business market. Also Microsoft have fully implemented touch interaction natively in Windows 7, with OSX currently having no touch support.

Talking about future technology, here is the Playstation 9 preview video – yep pretty extreme.

What’s the biggest video game development blunder ever? Duke Nukem Forever and it’s nightmarish production. This article explains in a detailed chronological manner, what went so wrong, leading to a twelve year development cycle, and the eventual demise of 3D Realms – a great lesson in how not to make a game.

Marc Petit, Senior Vice President of the Media and Entertainment Division of Autodesk gives a tour of the Toronto office where Autodesk Maya, Mudbox, Alias and Sketchbook are created. Also for Max, Softimage, and Motion Builder users, here is a video glimpse of the Montreal office – which was once a ship building warehouse!

Wickedly realistic Porsche commercial, celebrating Porsche’s 60th Anniversary, showing a family tree of cars. SideFX Houdini used for rendering, effects, and car rigging. Traditionally Houdini has been a weak modelling application, because of it’s procedural workflow being cumbersome, and lack of specialist modelling tools – so It would be interesting to know if Houdini was used for modelling.

Click here to view the embedded video.

The competition between Microsoft and Apple has entered a new era, Apple’s market value exceeds Microsoft ‘s slightly for the first time – with Google trailing not a insurmountable distance behind. Intriguing given the fact Microsoft makes more revenue(x1.5) and profit (x3) than Apple. Market value represents shareholders perception on the company’s potential. Hopefully Apple keeps delivering, otherwise market value (share price) decreases. Competitors like Microsoft have time to react, and spend up large on innovation using larger built up cash reserves. Microsoft has fantastic research teams, producing amazing technologies they just need to focus on building products that encapsulate these. Great news for consumers, everything in the computer world will speed up a bit more…

See graph below for revenue comparisons, interesting Sony makes a lot of revenue…I bet that doesn’t equate to the most profit – televisions and electrical equipment must cost a lot to build, unlike replicating software. Also worth noting that with Windows 7 released this year, Microsoft will see a nice bump back up to higher revenue this year. Windows 7 has become the fastest selling operating system of all time.

Oh and poor Steve Jobs (in relation to Bill Gates) misses his chance to make 10 billion dollars.

“Trouble in the Boom Times”, an enlightening overview of the nature of business and competition amongst Hollywood visual effects studios – a very rare article for the mainstream media to cover. Lee Stranham, a writer for The Huffington Post, and experienced production artist for feature films, has written an open letter to James Cameron regarding these issues and more, in an endeavour to broaden the awareness.

Also worth noting, since both these articles don’t mention it, is that it is very common in Hollywood films for many artists and even entire effects houses to be missing from the credits – there is a predefined number of artist’s allowed in the credits. Apparently having too many artist’s makes the film reel longer, and therefore more expensive. Yet because of unions even coffee runners and helpers legally must be in the credits.

20 years of Photoshop, an article explaining the creation and development of Photoshop, up to present day.

The History of 3D Studio Max for the 20th anniversary of Max.

For visual effects artists, this will be of interest – Maya 2011 has been out for a month or so. Mac users finally got some love from Autodesk with a 64 bit version, though predictably the word is that the Mac version is more buggy than the Windows version. The most significant new feature is a complete rebuild of the interface (on Mac, PC, and Linux) around the Nokia QT framework . Maya 2011 is a huge upgrade, probably the biggest since Maya 7, or even earlier versions.

This release has improvements in assets, skinning, rigging, fluids, nParticles, modelling, performance, script highlighting , auto completion, multithreading, new hypershade and colour picker design, and countless small additions and refinements. For a full list of these changes click here, and for a review click here. The main Maya homepage shows a very sparse overview of new features. I think Autodesk feel content enough with Maya still being the industry standard for visual effects, that they don’t bother putting much effort in showing off all their new features like other smaller companies, such as Luxology Modo, SideFX Houdini and Maxon Cinema 4D.

Smoke 2010 has been released from the grip of proprietary expensive hardware, and is now available on the Mac platform – though in comparison to After Effects, this is still an expensive application! Smoke is an editing and finishing application with excellent tool sets for colour correction, 3D compositing, 3D type, keying, and effects.