Design Web Apps : Web app without makeup: The design iterations of TeamSnap

Monday, June 25th, 2007

our TeamSnap web app

journey between “it functions” and “it feels right.”

Wireframe Schmireframe

useless

the best way to start designing the look and functionality of a website was to actually start building the website.

Version 1: Ugly and Unusable

Version 2: Better, But Problems Remain

Version 3: A Prettier Face

“no,” a “maybe,” a “don’t know” or a “have to check with my spouse.”

Bring on the Drop-downs

The Obvious Solution – Finally

AJAX

eliminated the modal editing state.

Instead, you are always in edit mode with no need for an Edit or Save button. Every time you click a checkbox your availability for that game or practice is immediately recorded to the database. It’s much simpler and goof-proof for users, yet these always-clickable checkboxes are so visually pleasing that they never feel overwhelming, even with many on the page.