Designing an iPhone UI for a productivity app can take many directions and each time you make a choice, someone will not like it, yet others may think it’s brilliant. (Of course, you hope the latter are the ones leaving reviews.) Today the landscape in the app store affects how you design your UI—you need to stand out to get noticed. However, the other edge of the sword is that if you go totally radical, people won’t have that comfort feeling of familiarity of a iOS app. So the key is to get a balance of familiar, with a dose of ‘zazz. Of course, it helps to have some luck of being in the right place at the right time, so someone with influence also sees your app, but this post is going to tackle areas WITHIN your control—the design of the User Interface (UI).
Designing an iPhone UI for a productivity app can take many directions and each time you make a choice, someone will not like it, yet others may think it’s brilliant. (Of course, you hope the latter are the ones leaving reviews.) Today the landscape in the app store affects how you design your UI—you need to stand out to get noticed. However, the other edge of the sword is that if you go totally radical, people won’t have that comfort feeling of familiarity of a iOS app. So the key is to get a balance of familiar, with a dose of ‘zazz. Of course, it helps to have some luck of being in the right place at the right time, so someone with influence also sees your app, but this post is going to tackle areas WITHIN your control—the design of the User Interface (UI).
Some of our iOS apps have started on the Palm OS platform, and in designing the new iOS UI, we’ve learned from our mistakes. When we first came out with our Trip Boss travel manager, in late 2004, we went black & white, low res (to get the app on as many devices as possible) and high functionality. After all, in the PDA world, function was king, right alongside the zen of Palm—minimal taps to get the job done. However, we had not done our homework. Eye candy was slowly working its way into the PDA world. The hardware and software had limitations, but developers were starting to push those to the limits and we were not on top of that trend, unfortunately. In fact, when the reviews started coming in, people raved about Trip Boss as the best travel app out there, but with one caveat—it was ugly.
Of course we quickly remedied that, adding color and hi res, but the app still remained plain. I was tasked with working on that aspect, but we quickly discovered that in order to use more than a basic number of colors, we would have to write our own graphics engine to do much embellishment. For example, we had another app in progress that did a basic timer function. It was so basic, we decided to dress it up with a blue background with an abstract of white sine waves. I worked out a nice design in GIMP and passed it along to my husband, our developer. However, due to the transitions from blue to white pixels, it wasn’t as basic as it appeared. The image file size was too large to fit in the 64k “segment” we were allowed for each part of the program (a whole other blog rant!). Since we didn’t have time to write a graphics engine, we ended up scrapping the whole timer app. So Trip Boss stayed in its current design until we moved onto iOS.
Visual
On the visual side, for Trip Boss, our goal was to take the traditional iOS blue-themed table design with lower toolbar and add graphical elements so that it still felt familiar, but with a fresh design. Our design inspiration was checkbook checks—another familiar design for people. We combined this design with the traditional table view. The end result was a table with three dimensional rows (through transparent graphics), overlaid in a background image that symbolizes the function (money for expenses, a piggy bank for budget, clouds for itinerary, and a textured journal cover for Journal). We left a few pixels edge around the table to give the background image more prominence, as is done with the checks. This design is repeated within each module to give the app continuity, but the background image is altered to give each module it’s own style.
Navigation
Trip Boss is a complex app, which is not always the norm on the AppStore. How would we integrate multiple apps that make up Trip Boss, yet make the app manageable? Originally, we decided on a table view for navigation,
but as we released updates and new modules, this view did not suffice to accomplish the navigation we required. We contemplated a navigation bar at the bottom, a standard iOS method, but we also needed a toolbar for functions within each major function (expenses, budget, itinerary, journal). On the next release of Trip Boss, we changed the table navigation to icon navigation, which has a familiar feel of a launch screen.
All data is organized by trips, by using multiple modules (expenses, budget, itinerary, journal), but we wanted to also offer features where multiple trips could be viewed or analyzed. Some of these features we’ve released—such as viewing the expense report status of multiple trips (essential for business users) and viewing budget status, required an alternate navigation scheme. The icon navigation proved useful for this dual navigation requirement. Users can tap “Trips” to navigate the modules from within a single trip
or tap the individual icons (such as Expense) to view aggregate trip data in a useful format.
In addition, if customers have purchased only a single module (such as Journal) they could just stay in Journal and rarely return to the icon screen.
However, this icon method of navigation does make the app less familiar and more complex. We had to choose between simplicity and functionality again. This time we choose the more complex solution, since the simple had been done and we wanted to differentiate ourselves from other apps in the app store by adding value through features. The downside is that this navigation method is less familiar and we risked users disliking it, due to the unfamiliarity or the complexity. Our hope was that the familiarity of the icon view would mediate some of this. We did recognize that the design was not going to appeal to everyone, but felt it served the intended purpose, so made the choice to go with it.
Results
At the end of the day, we’ve had mixed feedback from the design. Some users love it and some hate it, but most value the added features the design brings. When we went from the simple table navigation to the icon navigation, many users “found” new functions—such as the built in currency converter that comes with the Expense module. The currency converter was included in day one, but it wasn’t obvious that it was available. This was a case of win-win. Other users wrote that they would be much happier with the plain blue and white themed background that they are familiar with, but do appreciate the added functionality that this app has over its competition. The Trip Boss apps are selling consistently, so it probably boils down to how people judge the app by its screenshots. Those who take the chance and buy our app are satisfied, especially once they discover the features, but you can’t please everyone. Plus, there are most likely some who don’t even take the chance. It’s just a risk you have to take with a more creative user interface design.
Trip Boss travel manager is a suite of apps, available in four different starter editions. For more information, please visit our Trip Boss overview page on our website.
