The Battle Against Ugly

Most iPhone app interfaces are ugly. We, at Odopod, don't believe it should be this way and set out to prove it with a new design for Routesy.

Routesy was the brainchild of Steven Peterson, an iPhone user and developer, (@routesy for you tweeps) who saw a need for a smarter commuting experience for San Francisco Muni riders. (Muni is San Francisco’s public transit agency). When July 2008 rolled around and it became possible to create a real-time, location-aware native Muni arrivals prediction app for the iPhone, Steven stepped into the void and created Routesy. Sure there were plenty of Mobile Safari web sites – NextMuni, MoMuni, nxtbs – that offer predictions, but those sites weren’t native and could not determine and make use of the phone’s location. Routesy could.

A talented developer, Steven quickly pulled together Routesy's interface, but struggled with a few things. For example, he couldn't get his royal blue gradient to work as an interface background. (It's impossible, by the way.)

As avid iPhone fans, Muni riders, and experts in UI Innovation, we offered to team up with Steven to wow the world with a great Muni iPhone prediction app that we, too, would love to use. Working together, we dreamed up new features and re-imagined the interface from scratch. Routesy 2.0 is our first joint release.

It's in the (Design) Details

In this post, we wanted to share some of the behind-the-scenes details of the design of Routesy. You can get a general overview of Routesy on its iTunes App Store Page.

Lighting and texture

Many iPhone apps extend the standard glossy, convex feel throughout the app. But, if done wrong, the interface looks like a sea of plastic panels with no visual focus. Rather than creating more glossy elements, we created a unique lighting and texture system to establish a distinctive tone for Routesy. We created subtle concave matte surfaces – that complement the standard glossy convex surfaces – and lit them with a spotlight rather than a generic light from above.

Luminous display

Mobile users rely on Routesy to quickly determine when their bus, train or streetcar will arrive. They look to the app to deliver that information as quickly as possible. So we created a luminous blue glass readout for the stop detail interface to place emphasis on the predicted arrivals times and to act as the visual highlight for the Stop Detail interface.

Route badges

Every app needs to have the right visual personality. We wanted to invoke the circular color Muni Metro route markers, while creating something that would work for an interface as well as across all lines. So we created a set of route line badges that would anchor Routesy's interfaces, help establish Routesy unique look while enhancing legibility as well.

Route badge studies:

Final badges:

Efficient Bookmarks

One of the chief criticisms of the original Routesy was that users couldn’t set bookmarks. In Routesy 2.0, users can.

Immediate predictions

If a user has set a bookmark, the Bookmark interface comes up immediately and loads the current prediction. Users only need to tap once to launch the app for their predictions. No additional navigating necessary!

Sort by proximity

We designed the Bookmarks interface to sort bookmarked stops by proximity. A user’s nearest stops, whenever they use Routesy, are at the top. We know that it’s likely users will have two bookmarks for the same route. So we wanted create a way for users to easily get the prediction they were looking for without having to scroll or do anything.

Users just have to look at the top of the list to see the predictions that matter to them at the moment, wherever they are. If they’re at home, the bookmarks that they use are at the top. If they’re leaving work, the bookmarks they want are at the top. If they’re going to a friend's place, their most relevant bookmarks are, you guessed it, at the top.

Proximity-based bookmark display is one of the features that we’ve gotten specific feedback about. We know most bookmark aren't presented this way. People are used to having to manually order, group and sort bookmarks. We are considering revising the feature to offer manual control. But, we’re curious as to how users will take to proximity-based sorting after prolonged use. Love it? Didn’t understand it and want to try it? Tried it and hate it? The jury is still out and is open to persuasion. If you have thoughts, leave your feedback below!

What’s next?

We are currently gathering feedback, planning fixes, plotting improvements and dreaming up new features to make Routesy the best iPhone transit app anywhere (with special love for the Bay Area). Around the corner we're planning for the iPhone 3.0 OS. We're thinking about push notification, Google Maps integration, nerdy user preferences, other transit agencies, other metro areas and all sorts of other cool goodies.

For now, if you’re an iPhone (or iPod Touch) owner that lives in the Bay Area or has reason to travel here, check it out and let us know what you think. Leave your car at home and take Routesy with you on Muni and BART instead. Not only is public transit environmentally friendly, it’s also much more fun to play Quordy and catch up on Mad Men rather than driving through rush hour traffic.

Update (June 12)

We'd love to have to check out Routesy, but it's temporarily unavailable in the App Store due to a critical bug crashes the last version. A new version is in the App Store's approval queue. We'll repost the link when it's available again. For current users, follow @routesy for the latest. Sorry. We hate to have to wait without predictions as well.

Update (August 17)

Routesy is back in the App Store! For reasons too complicated for this particular blog post, the Routesy update was held and not released until now. You can read about it on SF Appeal. Thanks for your patience. New, cool features are coming in the near future! Follow @odopod and @routesy for developments!