Branding Yourself in Small Spaces

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!

8 Responses to “Branding Yourself in Small Spaces”

1. Andrew says:

   June 12, 2008 at 2:57 pm

   WOW, that’s strange.. that’s almost exactly how their site looks on an iPhone. You must have hit it with an older cell phone.
2. Kristi Colvin says:

   June 12, 2008 at 4:48 pm

   Really Andrew? That is hysterical. I saw it on a Blackberry, and on a smaller, older phone that Barbara had with a tiny screen. They were almost identical on both phones – the only difference was that one of them had indented links and the other didn’t. I’d love to see the iPhone version!!
3. Hootnholler says:

   June 13, 2008 at 7:12 am

   Remember that USAA serves the military. When a military member is on an aircraft carrier in the Gulf, they have to share the tiny little sliver of bandwidth that the ship allocates to personal internet use with everyone else. If they are trying to transfer money to their mother, they care about performance and functionality, not branding looks.

   How would your design change if you took into consideration that the site is used by sophisticated users in bandwidth challenged areas? They often use equipment that is extremely locked down regarding what software is loaded on it or what permissions are granted to users/software?
4. Kristi Colvin says:

   June 13, 2008 at 8:57 am

   Obviously that design issue, and many others would have to be considered if I had this actual project to work on, which I don’t. But given there is already an iPhone version of this app, which Andrew said looks similar to the one I posted here, I’d say it’s already been considered and I assume the designers are providing multiple options based on the phone/screen size of the user.

   After I had the text and graphics version side-by-side, I found the visual version easier and faster to use, because your memory will retain the button location and you don’t have to “read” down the list of options.

   Some people do only care about functionality and performance, but some require and expect more… I personally try to design the user experience of a system to encompass all three: functionality, performance AND beauty.
5. diegooriani says:

   June 19, 2008 at 3:42 am

   Very interesting.
6. Megzjam says:

   June 23, 2008 at 2:53 am

   Makes a lot of sense
7. Ryan says:

   July 31, 2008 at 1:48 pm

   Great makeovers. It just goes to show you that just because mobile is small you don’t want to try and squeeze everything in with text links. The “stamps” make a 1000x improvement!
8. Kristi Colvin says:

   July 31, 2008 at 4:50 pm

   Thanks for your comments Ryan. The mobile space is SO interesting to me – a great challenge of design and flow and anticipation of what the user needs at that moment. I am just dying to do a real mobile design and take on that challenge!