I recently had the opportunity to get together with a brilliant woman named Barbara Ballard, who specializes in mobile application design… in fact, she wrote the book on it! As someone who wants to break into this field, the gears in my brain couldn’t help turning as we looked at some real live apps on several of her different devices and discussed the ramifications of designing for these small spaces.

Today I took a few minutes to do a brief redesign of one of the mobile applications we looked at, for USAA. I want to make it clear, that neither Barbara nor myself have done any work on the USAA site or mobile application. She is a customer of theirs, so we had the opportunity to examine the interface superficially and only briefly discussed it.

THE CORPORATE BRAND
At first glance, I wasn’t overly impressed with the mobile application Barbara showed me. It is functional, but very plain. As someone who believes that the brand and user experience are strongly intertwined, I wondered what the site design and USAA branding looked like, so I visited the http://www.usaa.com/ to check it out. Wow!! I fell in love with the simply elegant typography, the color palette, effective use of white space and generally effective navigation. (I didn’t look too closely at the information architecture – today’s focus was visual.)

The web site fits the image, the style, and the level of sophistication you’d expect a large, national, financial brand to portray. I found it very peaceful to peruse, and they had some nice usability components that would help a potential customer research their offerings and make at least the decision to call them to see about becoming a member.

LOGGING IN
In comparison to USAA’s corporate site, I don’t get the same experience when launching the mobile app. So I did a quick redesign to show how I would have approached this design and created the same brand experience in the small space, as they offer in the large, unlimited one.

It was surprisingly easy, because the web site contains some wonderful graphics in a special section promoting the mobile service. By the way, the presentation on the site is designed as part marketing/part tutorial, and it provides an excellent service for users. The mobile app itself seems pretty easy to use and understand, but it lacks the delightful branding that makes the USAA site such a pleasant environment. Here is the login screen, looking much more like the login section on the site:

All the functionality is still there, except one component. I don’t think it is a good idea at all to enter a user into something without their permission, such as they are doing with each mobile login. I didn’t know what this contest is about, so I searched the site (as they said to do, for the contest rules) but couldn’t find the information. The reality is, if I had been doing this project, I would have tried to talk Marketing out of this approach by explaining the how this introduces a negative message to the user, or I would have handled it in a way that feels more advantageous to people than intrusive. I eliminated it from my login screen completely.

HOME IMPROVEMENT
This is a very quick effort to redesign the home screen at a purely visual level, repurposing their existing site graphics, but I think it has a lot more personality and appeal. Given time and money and a real job redesigning this, the effort would be a lot more impressive, but I think you will see my point here.

Utilizing these well-designed, iconic images already on the web site sends a message of professionalism that says “Our company is second to none. We offer style and class. We take no shortcuts, etc.” It also gives the application a little bit of an interactive feel, much more so than the plain, dry text links offered currently.

(The little “hand” over the green icon should not indicate that this is a touch interface. I just realized I am so used to designing software prototypes, I put that there as an indicator of the visual cue when an option is selected – on this type of mobile device that would mean using the center key to move up, down, left or right to hop from one icon to another.)

This brand exercise only took me about an hour. Of course, the images aren’t as perfect as they would be if I worked with their designers and had the original art. I used the largest size device screen, but would have no problem scaling down the images and altering the layout, yet still maintaining some branding for smaller size screens – the smallest of which is about 128×128 pixels.

As the postage stamp industry has proven, there is nothing so small that you can’t align beauty, detail and spareness of clutter if you feel it’s important. Fresh ID is founded on the principle that branding is a key ingredient in the overall user experience of a system. It should not be ignored simply because we have a significantly smaller canvas on which to paint!