Designing “Duckbill” – An Evolution in iPad App Nav
The first big project I was handed at Bet Smart Media was bringing one of our web apps to the iPad. NFL Team Trends lets bettors gain more confidence in their choices by helping them view statistics on historical games that are similar to upcoming games. At its core is a drag and drop editor that allows bettors to choose which conditions they want to take into account when looking at the historical record. This works well on the web, but the iPad owners around the office couldn’t help but feel that there was a great mobile app hiding in that editor.
We took about two weeks to put together the first version of the app, trying to keep closely to the navigational structure of the original web app.
The initial navigation structure for Football Team Trends.
As you can see, the trend builder screen was buried in the middle of the app, not the core of a great user experience as we’d hoped. You can also see that entering the app brought people right to their saved trends, which means that they would initially be presented with an empty list. The structure of the app did little to show off its functionality and we were worried that people would have trouble really getting what the app was about within a few seconds of launching.
All the stakeholders in the project had a similar feeling after getting the real live app under our fingers, and we immediately agreed that it was worth spending a few more days restructuring around a better experience. A couple of us locked ourselves a room and started brainstorming how to solve the biggest issues with our initial prototype.
Eventually we decided that we were grouping the data incorrectly. Out of the five major screens, two of them were about presenting automatically generated trends, one was about building trends, one was about presenting trends that had been saved by the person using the app, and one was for drilling down into the trend itself.
We started the new navigation structure with a few simple goals:
- It was important for the person using the app to see the auto-generated trends first, to give them an idea of what the app could do.
- The person should see the trend builder before seeing their saved trends, since they couldn’t have any saved trends until after they’d built one. The idea of ‘saved trends’ forced the question of ‘saved from where?’
- There should be a consistent transition to the trend details.
- The trend builder had to be more discoverable.
With that in mind, we laid down four non-detail screens in a row on the whiteboard.
We started with the idea of using a standard tab bar to navigate between the various screens, but the requirement that the person using the app should see the builder before their saved trends meant that we wanted them to navigate the screens in some sort of linear order. Our product owner kept trying to swipe between the screens, so we decided we wanted to try that as a solution. Unfortunately, swipe to delete on some screens meant we couldn’t use a swipe gesture anywhere on the screen to navigate, so we came up with a compromise.
We called it the duckbill, since that’s what our first whiteboard diagrams made it look like. Swiping on this area would reveal screens to the left or right. After questioning just how much swiping we wanted the person using the app to do, we decided that “Top Trends” and “Top Trends by Team” should really be on the same screen, so we folded them into one screen.
Duckbill with Placeholder Graphics
With that decision made, we just had to figure out how to show the trend details screen. We decided to flip over the screen you were looking at to expose the trend details. Given how we were navigating with the duckbill, we didn’t want to use a navigation controller because that might cause confusion what exactly was to the right of the current screen. Was it the screen you went to when you swiped the duckbill? Was it the screen that slid in from the right when you tapped on a trend? Flipping to reveal trend details let us step around that particular tripwire.
It took about a day to move the existing app into the new navigational scheme, using silly placeholder graphics and rough animations. We were extremely pleased with the result, so we took another couple of days to get some real graphics done and finish putting together the app.
The duckbill in its final form.
Football Team Trends is available on the App Store for free, and can be found on the Top Free Sports Apps list. We’re extremely pleased with the results. As with any product, we’ll be continuing to iterate on the design and look forward to shipping an even better version for the 2012 season.
