Blog

With the surprising success of Weightbot, it was only a matter of time before we would take on the challenge of outdoing ourselves. We knew people were expecting something big from Tapbots the second time around so what’s more impressive on the iPhone platform than a unit converter? Pretty much anything. In name alone, Convertbot is probably the last application people would expect to see from us. But the truth is, converting units, while extremely ordinary, is a very useful utility for many people. And while there are countless feature-rich unit converters for the iPhone, none of them make the task any more enjoyable. So it really was the perfect robot for us to build. I just wanted to spend a little time writing about how Convertbot came to be.

Getting Started

The first step was to set up the groundwork for the application. What is the primary purpose of this application? Who is the target audience? What are the bare minimum features this app needs and what features can we add that the competitor’s apps don’t have? It’s all about balance. Features alone don’t make a great app. As developers, we needed to carefully decide what features directly supplement the core directive of the app and cut ideas that may have been “cool”, but removed focus.

The audience was also an important factor. We were targeting casual users with Convertbot. As with Weightbot, we knew that a small percentage of professionals and enthusiasts who need to convert numbers daily might find our app “over-produced”. But designing for our core audience was key and we had already proven it to be successful with Weightbot.

Designing the Interface

It didn’t take long to come up with a working solution for the interface. After 5 quick sketches on paper, I had an idea of what I was trying to accomplish. The iPod-like radial dial was a very early design decision and it really gave me direction for the app. One of the drawbacks with the Weightbot scroller was that because it’s linear, you had to keep scrolling to go from one end to the other. You also had to keep lifting your finger to scroll continuously. So the radial scroller was the perfect solution for Convertbot. It also provided nicely-balanced geometric shapes for buttons and negative space.

The look and feel of the app had to build upon the Tapbots Brand. At first I wasn’t sure if I should introduce a new color instead of white. But since it was only our second application, I felt that sharing a similar color scheme with Weightbot would be best for building the brand up. The same went for the general UI layout. I wanted to create something new, yet familiar to Weightbot users. I’m pretty happy with the results of the interface. It even makes Weightbot look somewhat dated now.

The User Experience

The 3-Step Unit Selection Process

We’ve had a few complaints about this and I knew this would be a an issue for some the moment I asked Paul to implement it. But I have good reason for it (in my opinion anyways) and I have no plans to change it. Our primary goal for Convertbot wasn’t for it to be the most efficient unit conversion app there is. If that’s what you are looking for, there are plenty of nice conversion apps that get you from point A to point B in the shortest amount of clicks. Our goal was to make unit conversions fun and enjoyable. I wanted to separate the conversion steps into little tasks that need to be completed. It gives a sense of satisfaction when you’ve completed a unit selection sequence or shock if you press the wrong button, almost like a game. Regardless of whether the feedback is positive or negative, it brings out emotion in the user and that was my goal. Once you get used to it, there’s a sense of satisfaction and rhythm to the process. It’s very subliminal, but it’s there.

There’s also pseudo-realism in the way the mechanics of the app works. I say “pseudo” because they are obviously not based on physics of the real world, but in the mechanical world I have created within the application. In this world, the unit tile that’s currently selected resides behind each button. When you press the FROM or TO button, you can see the selected tile slide out from behind to the top position. In this world, the selected tile needs to slide back behind the button it belongs to before any other action can take place. I’m assuming most people never notice and others probably don’t care, but I think the extra step contributes to the believability of the world I’m trying to create in our apps.

Limited Data

Limiting the amount of categories and units was a conscious decision. The biggest disadvantage to our radial scroller is that it can become a pain when you have to scroll through dozens and dozens of categories and units. If we shipped with 20 categories and 100+ currency units, I guarantee that we would have received far more complaints. So we decided to ship v1.0 with the same list of categories and units Apple provides in their dashboard widget (as well as cut down on the list of currency units) until the next major release. Rest assured, v1.1 will allow the user to enable/disable categories and units as well as bring along a handful of new ones.

What is Intuition?

There is a slight learning curve in using Convertbot, but we don’t see that as a bad thing. Our apps are designed more like a game. Whenever you play a new video game, you need a little time to learn how the game works and how it controls. Even the most well-designed game interfaces require time to learn and get comfortable with. But with time, a good game becomes natural and even second nature. We hope that’s the case with Convertbot. Considering the most popular categories in the app store are both games and entertainment, making our apps a bit more game-like was a solid decision. We also added an auto-playback demo for users to learn how it works which is a lot like in-game tutorials in today’s video games.

The Hurdles

Designing Convertbot was not without it’s challenges. The biggest hurdle was early on when we had to implement the scroll wheel. Each tile is actually a separate image which has to line up perfectly to create the circle. The math has to be spot on otherwise cracks appear between the tiles. Several attempts in photoshop proved to be unsuccessful so I had to move to a more precise tool, Illustrator. With that I was able to build pixel perfect tiles by entering coordinates for each point. For the longest time I was worried that the scrolling wheel just wouldn’t work, but persistence really paid off in both the design and programming.

The category icons were another challenge. I dreaded working on them until the very end. As simple as they may seem, icons aren’t a big strength of mine. And making a family of them was a challenge, but they seemed to work out in the end.

That’s about all I can think of saying about Convertbot. If you have any questions or comments related to the design of this app, feel free to write in the comments below. I’ll try to answer them as best as possible.