Some of you reading this – through a variety of different channels – might be previously familiar with the work I've done with Beer Bowl, a group dedicated to the pursuit of finding the best beer available. Last year, Beer Bowl saw some explosive growth with the addition to it’s website of an automated way to view and add ratings for each beer by the users themselves. This led to people knowing exactly what they’ve previously rated and what’s still on their list to try.

Feedback was positive across the board, but it did raise the question, "can you make a mobile app?" This year, the answer to that question is yes. This is the first in a several-part series covering the process of designing an app for Beer Bowl that allows users to view, rate, and browse ratings and standings through a browser-based app.

In this post, I'm going to talk briefly about the wireframes that I've created over the past several weeks for the app. As this is the first complex, dedicated mobile piece I’ve worked with (beyond building responsive design into a variety of websites), there’s a fair number of new interaction issues that I dealt with as the process. I started out by re-watching Sarah Parmenter's talk from last November's Future of Web Design conference in NYC, which deals with designing iOS interfaces. Since the app is browser based, it will work in both mobile Safari and on Android devices, but I based the wireframes on the iOS style. When we prototype the html template, we’ll test and revise any necessary interactions on Android that don’t make visually align with that interface.

One of the big transitions for me in this process was work with elements that scroll within the screen space. Because I'm working to replicate the interactions of a native app as much as possible, I worked to make sure that persistent elements across the interface would remain in place, while internal content scrolled as necessary. In addition, because the app is web based, I wanted to make sure that the speed with which the users can interact wasn't restrictive. Keeping in mind the Joomla! framework that the site will be working with, I designed an interface that will allow users to switch between views in much the same way that a native app would function, while requiring very little data beyond the initial page load. Only on submission of a new rating would the app need to submit data, and redirect the user to a reloaded version of the page.

As we move into the visual identity portion of the app design and later into initial prototyping, we'll see what areas of the wireframes might need to be tweaked. As they sit, they accomplish the primary goal of the web app: allow users to submit ratings from their smart phones as they are tasting beer, when their impressions are still as fresh as their suds.