November 18, 2008

Designing the User Interface of MetalMiner IndX(SM)

Making a webapp is hard work. Yet, with all the coverage about the advancing potential of webapps—their development and adoption—collaborating on the design of a webapp is a decidedly cool thing to do. My friend Lisa Reisman gave me this opportunity. Her business, Aptium Global, specializes in materials sourcing: helping companies save and better strategize on the spending of natural and artificial resources used to manufacture their products and services. One kind of material that Lisa is especially passionate about is metals. From her company’s blog, “This may sound sad, but it’s true: We lie awake at night thinking about how manufacturers could save (or avoid spending) money on their metal purchases. It’s a strange thing to think about, but alas, someone has to do it.” Yup, Lisa’s a bona-fide metals geek. And geek is chic, totally, in this case.

Lisa shared her idea about a pricing tool for metals. Dubbed MetalMiner IndX(SM), this webapp would provide cross-country pricing data about a variety of metals, from aluminum to steel. The goal is to help metal analysts, consultants, and financial services firms to make better decisions about acquiring metals. While the premise is simple, as filmmaker Martin Scorsese has claimed, “There's no such thing as simple. Simple is hard work.”

Lisa provided a description and sample data points of the webapp. I took what I could understand and began sketching. Jason Fried of 37signals wrote a piece about drawing user interfaces with a markie. But I’m used to using a pencil or a pen to paper. Speaking of which, a blank sheet is my preference, rather than graph paper. Sketching on paper without lines is a better canvas to me. User interfaces are essentially layouts. With each iteration I played with the arrangement of the elements, while trying to keep in mind what’s sensible. I wanted the layout to be divided into two parts: The primary space would be for the criteria to adjust and search for pricing a particular metal; the other space would be dedicated for displaying the results.

Next, I interpreted one of the sketches via a digital format, not Photoshop, a page layout program. May sound backwards, since UIs are screen layouts not page layouts, but I’m honing in on the general content placement, whether it’s a form field or text.

Building the webapp based on these sketches, we watched the user interface evolve as the actual visual and interactive factors were incorporated. Such changes are part of the process from sketch to reality. MetalMiner IndX(SM) launched last month. No Beta in the webapp’s name, a straightforward launch, and an exciting one at that!