I just served a tour of duty as a web designer on a team commissioned to develop a brand-new admissions application. And, I’d like to offer up a postmortem, from the viewpoint of “design guy”.

Fact: The team I worked with was amazing.  We kicked ass.  We took a terrible user experience (most online admissions apps are) and turned it on it’s head.  In all big projects though, you have little regrets, and little problems that you make notes to revisit, and fix.  Rinse and repeat.

Fact: University admissions applications, by their very nature, are lengthy.  This isn’t your grandma’s contact form.  We’re talking pages upon pages of information submission, each section confronting my shallow design assumptions with a seemingly unique, nuanced challenge.

My goals for this blog post are thrice fold:

1. I would like to share with you my pain
2. I would like to document a few pitfalls and lessons learned in the arena of application design and form design for my own future reference.
3. You few remaining readers of this blog are my children, and I wish to teach you, for I believe the children are our are future. Teach them well and let them lead the way.

Sparing you another unnecessary intro paragraph,  we begin with two images: An initial web mockup, and a screenshot from the finished, live site.

Those two images sum up my failure.  At the intersection Concept Steet and Reality Boulevard, there are pain points.  So if I could begin this project again, (like through the aid of time travel but not involving whales and starships) I would more eagerly throw every ounce of my energy at these three challenges:

Challenge #1: As a web designer you want to stay engaged in a project through the development phase.  You want the finished project to maintain the design integrity of the initial mockup.

Translation: Developers tend to focus on, well, development.  Stay in the loop.  Babysit the pretty, from beginning to end.

Challenge #2: With any design, but especially form design, you want to have a complete picture of the content requirements before you lay down a single, pixel, in Photoshop.  ( Fireworks, Illustrator, whatever )  This was my biggest lesson learned, by far.  I hadn’t anticipated the character length required for many of the form labels.  I made design and layout assumptions in my own little dream world, assuming everything would hold up when the “actual” form elements and labels replaced my nice, short, beautiful micro copy.

Translation: Messaging informs design.  Don’t start without the content.  Especially with form design, require ALL of the content up front.

Challenge: When you complete a design that has several layers of descriptive text, go to great lengths specifying the purpose of each unique section.

My form design incorporated several distinct text areas, each with a unique purpose. A top heading, a page title, a form-box label, a form-box description, form-field labels and short form-field descriptions. Add to that a “tips and info” box meant to provide answers to the most common questions.  The trouble is, I had a vision for how those specific text areas would be used, and I didn’t spend enough time coordinating and communicating that vision to everyone involved.

Translation: It’s hard to separate effective design from effective writing.  When one falters, both suffer.  Not everybody instinctively writes effective micro-copy.  Not everybody agrees on WHERE copy should go.  Sometimes you tweak text to fit with a design, and vice versa.

General Thoughts

Folks, it wasn’t that I was lazy.  Just misinformed.  Sure I’d design and coded web form elements before. And in this case, all I was required to do was mock them up, and somebody else would have to worry about implementation.  Dream scenario.  How could I possibly fail?

Add to that, I even had the amazing help of this book (given to me by Daniel) from Luke W.

Years of lamenting our unwieldy admissions application left me with a strong desire to help make our new app a success.  And hopefully my design decisions would play a supportive role.  Throw in the great book below.  All was set for 100% success.

The little parts of the finished, live application that bother me, at first I just assumed that I had been lazy.  The lazy liberal arts designer excuse. Yes, I will admit to that on occasion.

But not this time. I think this time I was heavy on effort but lacking in experience, and I made a few oversights in the design that I’ve attempted to document in this post.

But about the effort.

The effort I exerted to anticipate the kinds of elements the application called for, were great.  I had this giant adobe illustrator file with all the needed form objects, complete with example descriptive text, user-activated inline help, the works.  In the end, it wasn’t enough.  It didn’t scratch the surface.  I just didn’t have a good grasp of the content-requirements.

Screenshot of my illustrator file:

My initial design held up fairly well in most places, but it others, the weaknesses were obvious.  It’s difficult to always know all the needs of every project, in advance.  But still you gotta try.

Coming out of this endeavor, I’ve a newfound appreciation for doing prep work and leg work, and a more dedicated approach to fact-finding and pre-design analysis.  Yes, those aspects may seem tedious and unnecessary, but in the end (I’ve learned) it’s possible to do more of those things and ultimately save time, and have a better finished product.

Without these experiences with our admissions application, I wouldn’t have immediately appreciated this gem of a presentation from Margot Bloomstein at SXSW.  In it, she builds a case for the true value of thorough content investigation as part of your pre-design development process.

Title Slide:

As a long-time TED listener/watcher, I find it awesome how a masters program is putting together this event…

http://tedxseattle.com/

TEDxSeattle (operated under license from TED) is organized by the Master of Communication in Digital Media (MCDM) program at the University of Washington.

The MCDM engages a community of leaders in the strategic use of digital media in communication. Through highly collaborative environments both online and in face-to-face work, the MCDM places great emphasis on relationship-building within the landscapes of digital media and communication. In this way, the MCDM is dedicated to the practice of what we like to call Community Scholarship. Our Flip the Media blog and our hosting of TEDx Seattle are just two of our efforts to engage the diverse members of our community, who collectively are developing new forms of communication strategies, platforms and content.

Maybe I’ll just have to wait a few years. TEDx Little Rock will be right after TEDx Amarillo.

My personal (and biased) wish …is for institutions to give pause when they are presented with information like this, and reconsider how they spend, and staff.

Granted there are crossovers between the two media.  (Good TV content is often good web content)  But a focus on web requires a heck of a lot more than simply broadcasting and publishing messages/information.

Internet Surpasses TV as Most Essential Media

“For the first time, the internet has surpassed TV as the “most essential” medium, according to the latest Infinite Dial study by Arbitron and Edison Research.

When asked which they would choose if they must, never again watching television or never again accessing the internet, slightly more people chose TV as the medium they would eliminate. Forty-nine percent of respondents chose to eliminate TV, compared to just more than 48% who said they would get rid of the internet.

When first asked the question in 2001, 72% of respondents said they would do without the internet, while only 26% said they would eliminate television. In the demographic of persons younger than the age of 45, the gap between the two forms of media is more profound, with more people choosing to live without TV.”