Forecast Module. Custom filters for a data grid.

From Excel to the Web.
Background

I was asked to review some screen mockups.

I love working with screen designs, so I was happy to help. The screens were for a component that was being ported from an Excel add-in into a web page. The grid was to look and behave like Excel, but the design of the filters was more flexible.

The original Excel add-in interface.

Just a bit of polish.
Original mockups

The technical business analyst (BA) on the project took me through his rough Powerpoint mockups.

I discussed the design decisions and constraints that had been applied to the design with the technical BA. We then spoke to some users of the existing solution to understand the requirements and constraints better.

The Powerpoint mockups provided

Polished from the ground up.
Mockups (Balsamiq Mockups and Excel)

I set to work creating revised mockups.

Working closely with the technical BA I was able to produce a refined set of designs that both he and the client manager were excited to discuss and refine.

"Make it like Excel"

Several technologies were being considered to implement the data grid, but the requirements were explicit about the subset of Excel functionality that was needed. I used Excel to mock up the grid itself, and then integrated cropped screenshots into the Balsamiq mockup.


If at first you don't nail it.
Refining the design

Balancing learnability and efficiency

This tool had a small user group for whom efficiency was a priority, so I prioritised making all the functionality available quickly rather than keeping the screen simple (eg. with a wizard).

Providing alternatives

I mocked up several different filter layouts and reviewed them with the business. This helped dispel the idea that the design was finalised, and also illustrated some key design trade-offs. The compact horizontal layout was a clear winner.