College Web Guy

Last month while researching (poking around) for campus map inspiration, I came across Missouri State’s interactive map, which uses the Google Maps API:

The reach of this particular interactive map doesn’t end with the browser/desktop.  It extends into mobile versions for iPhone and Android:

There are of course, other institutions integrating their mapping projects with Google, and I will list them at the bottom of this post.  But what I most appreciate about Missouri State’s map, is the nice video that Chad Killingsworth (@chadhikes) and the fine folks at the Office of Web and New Media put together about the project:

While the video provides a nice overview, it was obviously produced for a general audience.  As a college web guy, I want the deleted scenes, the nerdy behind the curtain stuff,  the directors cut.   And Chad has given that to us, in the form of several informative blog posts:

(in chronological order)

• Building the JavaScript for the Mobile Campus Map
• Going Mobile – Extending a Maps API Project to Smart Phones
• Google Maps API v3: Developing for Mobile Devices

Not only that, but Chad is giving a presentation called: Making your Campus Map Mobile Friendly at a Penn State Web Conference on June 8.  I wish I could be attend.  Zeldman and Brad J Ward are keynote speakers.

More on Chad’s “mobile maps” presentation:

Using the Google Maps V3 API for custom maps meant to display on iPhones or Android devices as well as the resources necessary to build an effective Campus Map.

Users more and more expect all of your sites to function on their mobile devices. When it comes to maps, they expect them to be interactive and useful on their mobile devices. When a visitor shows up at your parking lot, how do you get them to your admissions office or event location? I will also cover how can you manage a large number of buildings/locations within the confines of a mobile screen.

Leaning how to craft something and doing it well, is a good thing. Extra Extra bonus points for sharing your knowledge. Thanks Chad.

A list of other universities using similar Google’fied maps:

Oregon State:
http://oregonstate.edu/campusmap/

Towson University:
http://www.towson.edu/main/maps/

Rice University:
http://www.rice.edu/maps/maps.html

others?

No, um, not precisely.
What a great, amazing piece of university video from Wesleyan.

I’m not Chicken Little, and this isn’t “the sky is falling” post that it’s title might imply. But when people write things critical of the industry of my occupation, well, I read those things.

As web workers in the higher ed arena, we all have a vested interest in the future our employers. The turmoil unleashed on the journalism sector and the music industry, precipitated by a tidal shift in the way people produce, consume, and pay for content, …has probably served to embolden a growing number of critics predicting a similar transformation in the university system.

I gave five minutes to Mr “marketing guru” as he made his case for a coming melt-down in higher education, and I read the Op Ed piece “The End the University as We Know It” from the New York times. There are other articles like this. Piles of them. Do I read them because I am a morbid pessimist? Or, am I simply cautious about a career in a higher ed landscape which (some say) could be drastically altered over the next ten years? Five years?

I don’t know. Who DOES know?

Regardless, back to the original purpose of this post, Tuesday night I will watch (and you should watch) PBS Frontline’s College Inc. which takes a hard look at the less traditional institutions providing alternative approaches to a growing number of college degree seekers. It should be interesting.

Higher education is a $400 billion industry fueled by taxpayer money. One of the fastest-growing–and most controversial–sectors of the industry is the for-profit colleges and universities. Unlike traditional colleges that raise money from wealthy alumni and other donors, many for-profit schools sell shares to investors on Wall Street. But what are students getting out of the deal? Critics say a worthless degree and a mountain of debt. Proponents insist they’re innovators, widening access to education. FRONTLINE follows the money to uncover how for-profit universities are transforming the way we think about college in America.

“In College, Inc., airing Tuesday, May 4, 2010, at 9 P.M. ET on PBS (check local listings), FRONTLINE correspondent Martin Smith investigates the promise and explosive growth of the for-profit higher education industry. Through interviews with school executives, government officials, admissions counselors, former students and industry observers, this film explores the tension between the industry—which says it’s helping an underserved student population obtain a quality education and marketable job skills—and critics who charge the for-profits with churning out worthless degrees that leave students with a mountain of debt.”

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.