While I had worked on WAP and other forms of "Mobile web" before the release of the iPhone, the handset really opened up the concept of User Experience Design for me, from the moment I first started work on a application.
Back in 2007, the term "mobile web" still meant designing for over 4,000 completely diverse devices from Nokias to BlackBerrys, some of which did not recognise basic web standards such as frames or even tables. Things had to be kept extremely simple.
UI/UX and Service planning for Virgin Australia (2010)
Subcontracting to MTT and working in coordination with their dev team, sales team and PM, I developed the sets of visuals below for the service, and also coordinated simple rebranding activities across the entire web and mobile service as Virgin Blue moved into the mobile space in 2011
At the time I wireframed using gridded illustrator PDFs based on the physical size of the screens being designed for, after working out the basics with pen and paper.
Using this layered approach enabled me to create folder sets of full size UI PSDs composed themselves of vector shapes, which can be placed in the schematics as they are developed and quickly exported or printed for inspection.
The resulting folder sets are then easy to collate into both resource sets, protoypes and motion walkthroughs, using the full size artworked PSDs in the layouts.
At the time I wireframed using gridded illustrator PDFs based on the physical size of the screens being designed for, after working out the basics with pen and paper.
Using this layered approach enabled me to create folder sets of full size UI PSDs composed themselves of vector shapes, which can be placed in the schematics as they are developed and quickly exported or printed for inspection.
The resulting folder sets are then easy to collate into both resource sets, protoypes and motion walkthroughs, using the full size artworked PSDs in the layouts.
Service planning for Jetstar 2010-2012
Under contract to MTT I produced a series of concept UIs, user journeys, graphical icons and objects, and provided the visual and interaction consultancy for a set of four successive builds of the interface. This period was to establish Jetstar as a major mover in the Asian low fares airlines market.
During the build - as was generally the case with MTT builds - objects and patterns developed in other interactive projects were written into and redecorated for these projects, which included HTML5 services and native apps. Generally speaking, UI produced for MTT was designed to be repurposed and rebranded as a matter of course.
During the build - as was generally the case with MTT builds - objects and patterns developed in other interactive projects were written into and redecorated for these projects, which included HTML5 services and native apps. Generally speaking, UI produced for MTT was designed to be repurposed and rebranded as a matter of course.
O2 treats service planning (2009)
The first app that O2 produced for its Irish market was a coupons app, allowing direct rewarding of customer loyalty. It's strange to think that back then, the idea of scanning a barcode on a mobile screen was considered something that "Nobody would do"
As the first app of the major Telco, it was a fraught affair, with a lot of pressure and stakeholder feedback to manage and collate, and a lot of high expectations of the project. The marketing materials came from a third party design studio, and the guts of the app were managed by a budding retail IT software vendor, so there was a lot of communications to manage, too.
As the first app of the major Telco, it was a fraught affair, with a lot of pressure and stakeholder feedback to manage and collate, and a lot of high expectations of the project. The marketing materials came from a third party design studio, and the guts of the app were managed by a budding retail IT software vendor, so there was a lot of communications to manage, too.
As a team we evangelised for User Centred processes and managed to educate an entire department about the value of User Feedback and User testing, plus the app itself - though simple by today's standards, was a roaring success and reduced customer churn significantly.
UI/UX for Tapadoo - Mobile eCar application
Images below show the award-winning ESB eCar App, which I design in competition, collaborating with Dublin studio Tapadoo on the design and winning an Electric car for a month. Behind the iPhone wrapped images are artwork PDFs which I use to specify UI proportions for Developers. As can be seen every pixel is meticulously accounted for when final artworking is required.
In total, I collaborated with Tapadoo on five jobs, 2009-2011, all of which were native iOS apps delivered to the irish market, but this is by far the prettiest.
Template mobile web designs for RBS / Affinion / Barclaycard
A set of HTML5 web app templates developed with MTT's Dev team for an intersecting set of flight booking mobile services to be used in-house by three co-owned corportations to manage internal booking requests. The templates had tio be simple and clear, and also easily survive rebranding / reformatting for different internal companies.
Similarly, staff voucher systems for lunch purchses while travelling could be handled and expenses cleared by the eventual live versions of these web apps.
AirAsia Mobile web / native app / general mobile brand styles for MTT
AirAsia's mobile site was an early client of MTT's and we revisited the UI a number of times between 2009 and 2011 - the website delivered service across over 4,000 devices and the native app was a simple shell for iOS, Android and BlackBerry which served as a container for a HTML5 App.
Later in the process of working with AirAsia, I wrote and produced a mobile digital syle guide for them also - a brief 16 page PDF covering the basics of mobile branding for their logo and UI elements which is availsable here.
Later in the process of working with AirAsia, I wrote and produced a mobile digital syle guide for them also - a brief 16 page PDF covering the basics of mobile branding for their logo and UI elements which is availsable here.
Airasia's early presence in mobile gave them a huge lead in business travel in Asia, and was at one point the most downloaded BlackBerry app in the world: the early learning that their marketing department, MTT and I did was invaluable in owning that market.
Proposal visuals for cross platform travel services
2009-2013 I developed a number of proposals for MTT showing possible brand applications for well over 80 airlines, hotel and general hospitality services. A lot of these were developed into working responsive sites using their M2B platform which serves pages to over 4,000 mobile devices.
The UIs were multilingual and creating kit-based layouts for homescreens etc was a deceptively simple task, given the amount of screen sizes and resolutions being covered.
The UIs were multilingual and creating kit-based layouts for homescreens etc was a deceptively simple task, given the amount of screen sizes and resolutions being covered.
HTML5 templates for MTT client services - multilingual
Based on various pieces of template HTML developed with MTT, these are a couple of multilingual implementations for japanese airlines including Jetstar and AirAsia which involved colourful UI implimentations and looked quite pretty - most of the instances and patterns used in them were developed as part of MTT's B2B web engine and used table structures devised by me and handed over in artworked files.
Plendi Mobile application UI/UX
Plendi is a simple, single function iOS, Android and BlackBerry receipts management app which I designed in direct liaison with the CEO and Marketing VP. User photographs and confirms receipts which are then collated and returned via a web app, processed and ready to use. On a budget, we provided a very simple application with a UI and a pair of characters with which to narrate the UX / Instructions / advice for users.
Easyjet.co.uk interim mobile site & native app
I designed and implemented the interim (booking only) Easyjet mobile site, and then managed the artworking and implementation of the mobile app which was designed by a UK studio (fourth party) the following year - schematics and screens below.
