A recent IA-planning ses­sion for a mobile appli­ca­tion I am work­ing on gen­er­ated fifty user inter­face screens. Because I am work­ing with a team of sev­eral devel­op­ers, some respon­si­ble for the appli­ca­tion and some for the API, this means fifty wire­frames had to be made to map the entire flow of the appli­ca­tion to serve as a cen­tral point of ref­er­ence. It turns out mak­ing fifty wire­frames isn’t really painful when done right. It only took two days and here’s how I did it.

card sort­ing

We started with a card-sorting ses­sion wich involved the whole team. Cards are a good way to quickly and inex­pen­sively plan out the struc­ture of an appli­ca­tion. Hav­ing a bird’s eye view of the infor­ma­tion archi­tec­ture means we can pick out poten­tial find­abil­ity issues and answer ques­tions like is this step too deep? and where should the user go after com­plet­ing this task? Each card should rep­re­sent a screen. The hier­ar­chy of the cards is then recorded into a spread­sheet to be eas­ily referred to by infor­ma­tion archi­tects, design­ers and engineers.

Though there are excel­lent wire­fram­ing tools like Bal­samiq Mock­ups, cre­at­ing elec­tronic wire­frames are still more work than sim­ply sketch­ing them out on paper. The advan­tage soft­ware gives us are wire­frames that also serve as pro­to­types, which you can click around and nav­i­gate. To cre­ate fifty wire­frames with as lit­tle pain as pos­si­ble, I started by sav­ing a .bmml (file exten­sion of Bal­samiq Mock­ups) file for each of the fifty screens. I named the files so each log­i­cal group has a pre­fix. I then applied dif­fer­ent high­lights to each group using the high­light fea­ture in OS X Finder. Being orga­nized helps to make the task seem less unsur­mount­able. I also cre­ated reusable assets in a sep­a­rate file for all the pos­si­ble UI ele­ments in the appli­ca­tion. I worked through all the files and added ele­ments to them. The more I make the faster I get because com­bi­na­tion of ele­ments can usu­ally be reused in other screens.

In two days, the team has a nav­i­ga­ble PDF pro­to­type and every screen printed and stuck on a big wall. Gotta love card-sorting and Balsamiq.