Dustin Larimer :: USAA Mobile

My Work

USAA Mobile

Mobile Web + iPhone UI Design

In July of 2007 I was recruited by USAA in San Antonio, Texas, as a contract designer during the closing months of a massive web redesign campaign. Six months into my contract USAA made a full-timer out of me and I joined a small team of UI Designers responsible for the core applications of usaa.com, like My Accounts, Web Billpay, and Account Summary pages. My primary responsibility was to engineer the UI of mobile.usaa.com.

Mobile.usaa.com

For nearly 14 months I was the “mobile guy.” My job was to figure out how to design for a market of mobile browsers that had no foreseeable interest in standardization. Most of our user base used BlackBerry or LG devices, though smart phones, specifically iPhones, were starting to creep into the reports. BlackBerry soon became (and continues to be) my nemesis. Take a look at the BlackBerry CSS matrix for most models between 2007 and 2008 and you’ll get an idea of what I was up against: twenty-some declarations for borders, but no padding, margin, line-height, display, positioning or text-indent support. BlackBerry quickly became our lowest-common-denominator.

My direction was pretty simple. Market forces will push the mobile browser industry to eventually (hopefully) get its shit together and, just as we saw in the late nineties, subpar browsers will die out and a few standouts will gobble up market share. We could do what many other mobile sites did at the time and dump heaps of presentational crap code and <br /> tags into our templates to make it look proper, or we could code proper and leverage a true separation between content (the code) and presentation (CSS) to enhance the interface as the mobile industry geared up to do battle with Apple.

By focusing on the semantic function of our templates and ignoring the visual we were able to pull together the most portable, versatile and heavily reused web application in the USAA arsenal. Through collaborating directly with business, infrastructure, security, and marketing, we were able to serve up the site with any one of a half dozen presentation layers custom tailored to fit the particular channel or context for which it was called. After we launched mobile.usaa.com, deployed military personnel could track their finances and pay their bills in record time from all around the globe. Awesome.

USAA iPhone App + Deposit@Mobile

My last big project at USAA was to plan and design the complete user experience of USAA’s new iPhone App. I parted ways with USAA in late February 2009 to pursue grad school but was quite pleased to see the app launch about 99% as I had designed it. This project was pretty intense, but was an excellent example of what can happen when you lock business, design, security, legal, infrastructure and a couple genius developers in the basement.

Since the app presented another unpaved channel, I had a lot of freedom with my approach. Every screen was intended to be as optimized and streamlined as possible. Unless a feature or design element was absolutely critical to its own particular instance, it was scrubbed. And if its absence introduced even the most remote sense of uncertainty for the user, the entire flow was reevaluated and refined.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” Antoine de Saint-Exupery

Of course, since the team was so close to the project, our sense of obviousness was inherently skewed, but I think we succeeded in delivering a great app.

A few press mentions

More on semantics

The success of mobile served as a model for another initiative that I tried to push while at USAA: a lightweight and portable layout framework. While similar to Yahoo! YUI Grids or the thousand other frameworks out there, my layout framework is based on the simple concept that form should reflect semantic structure. Regardless of how your content is designed, the most basic purpose of semantic HTML is to demonstrate relationships and hierarchy between content objects, and the most obvious, basic way to demonstrate this is by dividing space. Read more about my Layout Framework model.