Blinksale iOS App

Blinksale is a online invoicing product that started as a web app in 2005. When the product team decided to take Blinksale to mobile, I was brought on board to handle the design work.

(I also redesigned the Blinksale web app in 2010, so this was not out of the blue.)

Blinksale iOS screens Blinksale iOS screens Blinksale iOS screens

Blinksale iOS screens Blinksale iOS screens Blinksale iOS screens

Planning

I started by mapping out the application. Every element of every screen was cataloged in a spreadsheet so that nothing would be lost in the transition to iOS. It was a tedious exercise, but it ultimately ensured that the team was aware of every jot and tittle. We were able to have informed discussions about what made sense to keep or discard.

Blinksale inventory spreadsheet

I needed to make long-term navigation decisions so that known content and features would be accommodated even as we built beyond the minimum viable product. Drawing an “app map” helped me figure out how to group screens and how those groupings were accessed in the UI. A 4-tab approach ended up being the best navigation device, as well as UI for switching between eventual multiple dashboards.

Blinksale app map

Visual design exploration

Thanks to some recent work on the Blinksale website and some internal collateral work, I had already been developing a new system of visual elements that I hoped would one day inform the redesign of the web application. Though there was a fair amount of exploration due to moving this system to a new platform, the basic building blocks fit into place rather quickly and the details worked themselves out as I began mocking up key screens. Yes, this is cheating.

Bringing it to life

I prefer to work at the highest fidelity possible, and in the end I mocked up nearly every screen in the app. It may sound crazy, but since I started by working on the deepest key screens and worked my way up to the top level of the app I ended up with more and more reusable assets as I went along. Designing his way allows me to consider how the screen works to how it feels and everything in between. It’s also way easier for the team to talk about the app. There’s very little imagination required, and makes things quite clear.

As I got major pieces of the app mocked up, I put them into an annotated keynote deck. This annotation provided interaction and data clarity in the same way that a mockup provides visual clarity. And in some instances, the deck could serve as a sort of flip book, stepping the reader through a scenario so they were able to see the interaction as it moved across several screen states.

Blinksale iOS Keynote deck

Development

I was given a very generous head start ahead of development. Months, not weeks. I found this to be an extremely valuable advantage, and I cannot overstate the value of being able to approach the work I had to do without feeling hurried. My observation is that it resulted in a much more considered and appropriate design solution.

I shared my progress often with the team (which included the developers), so there was frequent direction and involvement on that side. As development ensued, I was able to follow along and adjust design where necessary. This is so much better than forcing the poor developers to make assumptions about what I was thinking.