Last week we released Shortcut as an update to our previous Paperboy app. This post is the first in a series, which intends to describe some of the motivations and learnings behind the new app.

The first thing you will notice when you start Shortcut coming from Paperboy is the new look and user interface. The concept was developed from observing how users use Paperboy, by integrating feedback from our partners, and ideas from our team members. The design was then developed jointly between our product development team (Cristi, David, Franco, and Tomas) and the graphic designers PandA.

Putting content at the center of attention – and the UI

What users actually valued most while using Paperboy is the great print content. What they want is to share, explore, remember, and discuss the content. Great print content often comes with great design as well. For both editorial- and advertising- content. Thus, it makes sense to place the content at the center of the user interface. (An idea that came originally from one of our sales team members, who interacts with publishers and advertisers on a daily basis). Compare the old and the new version of the result screen below:

The old result screen on the left. The new result screen, shown on the two images at the right. Note how the content took it's place at the center of the UI, instead of being reduced to a tiny thumbnail. Also note the menu at the very right, which opens in a shape so it can easily be reached with the thumb.

The extended Path navigation as a winner

At launch the press unisono described our new navigation concept as “Path-like”. And this is where we took the inspiration from, indeed. Using a single button navigation for common actions allows to minimize the space the UI takes up, and thus supports the concept of putting the content at the center of attention. The + turning into an x is an elegant twist, which was used by Apple (on their Dashboard) besides Path as well.

The + to x menu animation. As seen from Apple (left) and Path (right). If you compare with our solution for Shortcut, we 1) changed the shape of the opened menue to adapt the movement of the thumb across the touch screen, 2) made the icons bigger and thus easier to hit, and 3) faded the background for the open menu, so that the contrast to the buttons is better.

We liked the concept so much that we decided to take it over. But not without testing it first! We had several alternative interfaces, which we tested with real users. (A later post will describe how we did that exactly on a shoestring budget.) In the end, the Path-style interface came out as the clear winner.

However, we did not take over the interface without trying to improve it. The buttons in Path menu are a bit small, and the circle arrangement seems suboptimal. We came up with a solution, which fills the whole screen and curves to fit the movement of the thumb in order to keep buttons easily accessible. (And yes, we should do a leftie version!)

This is just the first step – carried out in HTML 5

We see this implementation of the user interface as a first step. In the coming months we will add and rearrange some features and accordingly adapt the UI. The center stage will be reserved for the content, however.

Designing the results with HTML 5 embedded within a native app makes iteration simple. We are not the first to see this as the future: linkedin, facebook, and others follow the same path as well.

Another blog post will go into the details of our learnings while developing an HTML 5 mobile app. Strategically, the choice of HTML 5 was motivated by the following factors:

• easy iteration of features and designs, without app-store submission
• cross-platform deployment
• measurability and even A/B testing possibilities. Since all is in HTML we can easily track actions on the navigation and use the collected statistics to decide on the future of features in a Lean-startup manner.

So, stay tuned for new features and further novelties in the UI of Shortcut.