Ani’s Notebook

A scratchpad of ideas, thoughts and life lessons

Resume Extension Series: City of Aspen/Pitkin County Redesign

leave a comment »

What an opportunity – I won’t forget the day my manager approached me as soon as the Aspen project was signed and asked me to take it on.  It was the biggest project Artemis had seen at that time.  I knew exactly what that meant, that I would be doing anything and everything possible to “Make it work!” (thanks, Tim Gunn.)  What I didn’t know was how much that project would influence me professionally, nor how much influence I would have over it.

Goal & Approach

The City of Aspen and Pitkin County share a web presence and were looking to create a fresh, new user-friendly website with easier access to online tools.   The goal of every redesign project, you’re thinking, yes.  But as this project blossomed, I quickly came to see that Aspen and Pitkin, on the whole, had their values in place.  With this redesign, they really wanted to act progressively.   The core value of government is to support it’s citizens, and the web is a way of communicating with the citizen body. They ‘got’ that.

And I was responsible to help them make it happen.

On my team, I had an amazing visual designer, Steve Jencks, and a great team of developers.  I consulted with my manager on several milestones throughout the project, and had his 100% support along the way (Thank you).  Internally, we were on the brink of implementing new processes and our paradigm as a company was changing for the positive.  This project turned out to be innovative on all accounts – for the client, for our internal team, for myself.  This project was my ‘baby’.

Sales, Kickoff, Research

Prior to signature, I did a complete overhaul of the proposal to structure and plan for the work involved.  This helped tremendously when it came time for the project to ‘power on.’  As the project moved from sales to production, I was responsible for managing the scope, schedule, resources and budget from signature onward – I transitioned to the project manager.

We kicked off the project by diving deeper into the content, functionality and client’s design vision.   I wrote the functional specs documents, translating the proposal scope into detailed business and functional requirements.  This was my communication tool between the client, myself and my dev team.  It was our guiding roadmap for where we were going and it kept us in scope.

Their old site = an advanced search engine.  Lead-in content was nearly non-existent, so there was very little substance to guide the user. Contact information and department listings dominated the site.  So to make use of the site, the user had to have prior knowledge of the internal governmental structure.

In reality, the user was ignored in the old site.

I worked onsite with the small group to combat this. I probably said one too many times that what we are doing is ‘turning your organization inside-out’.  A paradigm shift was happening with the client from ‘government-centered’ thinking to ‘user-centered’ thinking. And the best part was that my clients wanted this change. I saw this desire of theirs and I took it and ran with it. As far as possible.

Information Architecture DiagramI played the role of the user advocate in the group. This was one of many roles required of me, so I continuously perceived when to perform this role over others.

Onsite, I worked with the client to develop user personas.  With a small group, we described in detail, Business-owner Bob, Citizen Charles, Second-home-owner Vicki, while editing personas projected onto a wall.  These personas became the centerpiece for content re-organization.

Information Architecture

After defining our users, we created ‘buckets’ of content with them in mind (diagram at right).  We did this in small group workshops.  These ‘buckets’ of content became the top-level navigation of the site.  It was essential to gather buy-in from key people within the project, so this activity required getting the input of the large group (20-25 people).  We tried different terminology and discussed the implications on the user and on the city’s branding.

The ‘Page Description Diagram’ is a technique that has worked effectively for my collaboration with Steve as a visual interaction designer.  This light tool aided in communication among the client, myself and my team.  It kept content priority decisions clearly documented for design guidance.

In addition to the main site structure, I worked together with the client to collect the services that would be of most use to citizens. We grouped them by ‘user action’ – such as ‘Apply For…’ or ‘Pay For…’.  This developed into a subset of the navigation that came to be known as the ‘Directory of Services’.

User Experience

From the perspective of the overall functionality that the site would employ, it was necessary to think on a macro-level. I worked on the user-flows for how the different modules would work together: where they would ‘live’ within the site structure and how they would be cross-linked and widget-ized on sidebars throughout the rest of the site.  I’d work with the client or internal team to determine what content components each module required (titles, icons, highlight text, pop-up content, buttons, etc).

There were over 15 modules and each one needed tender, loving care.  We did whatever it took for each one – sketching, white board drawing in teams, wireframing, annotations, sitemap diagrams, design critiques, prototyping, development quality assurance – every module had different needs.  The foundation for the module scope was in the functional specs, and further annotated in the extensive IA document.   It was on me to ‘make it work.’

The emergency alert’s module is a small example.  After discussing citizen use cases with the client, I’d determine the technical components of the module itself (a title, description, date, and the ability to sign up for alerts.)  I worked with Steve on iterations of ways to utilize icons, headings, and visual treatments, then with the development team on how to access feeds of information.  Once reviewed and approved internally, I’d present this to the client within the context of the homepage.

Project Management

This project demanded a lot of executive thought-leadership, and I found it necessary to embody many roles. After a short while, I learned to switch between the user advocate, web consultant, project manager or information architect, on a dime.  This was no easy task, and required me to work at an optimum capacity. I was enthused to take on the challenge.

Project management needed constant attention. We had budget for me to be onsite for 4 days, so I decided it was best to do this in the beginning of the project. The rest of the project was managed via video conference or phone.  I crafted meeting agendas, created workshop hand-outs and Powerpoint slides.  Meeting minutes, upcoming milestones, deadline reminders and approval documents.

I managed to introduce the term ‘Basecamp‘ into the client’s everyday vocabulary.

All documentation had a purpose, and I used only what was necessary to keep the project on track. Despite how voluminous it might sound, I never felt we were drowning in paperwork. Only swimming in project details.

One metaphor that’s worked well for me when taking clients through the project is the idea that a website is a ’3-legged stool.’ The legs of the stool are content, design & functionality – and each of the three work to support one another.   Onsite, I organized half-day sessions around all three legs of the ‘web design stool’, and continuing project updates centered around this idea as well.

Using a good process and good communication was key.  It seemed there was always a deadline, signature approval, presentation reminder, content delivery date coming up to stay on top of.  This meant I was pushing the client and pushing the team interchangeably.  I became known as ‘the little bulldog’ by the client.  Oh, were they great personalities!  I really enjoyed working with them.

This project spun into many sub-projects, so there was a consistent stream of change orders, functional spec revisions signatures and an occasional new proposal presentation to lead.

Content Strategy

From kickoff to information architecture to post-launch, content strategy threaded through the entire project. The incessant need for content strategy was illuminated for me on this project, though the term hadn’t been coined within our company at that time.  Content auditing was a living task throughout the whole project. I drafted content requirements documentation and content recommendations. I worked on the architecture for special content types, and permissions for different groups of content within the site. Content discussions with the client were continuous even after the face-to-face meetings via phone, video, and email.

I could have made a full time job out of content strategy with this project. There was a need for working one-on-one with each department, organizing content old and new, discussing workflow within the organization to determine who should be writing the content, reviewing, approving, publishing, etc.

To my absolute excitement, nearly a year later, I happened to pick up the book, ‘Content Strategy for the Web’, while in a book store in Cambridge, MA.  A month after that, I found myself sitting in SxSW panels led by amazing industry giants, and was utterly enthused to discover Content Strategy was one of the hottest emerging fields of web design! The feeling of being on the edge of something new just can’t be beat.

In the end, content strategy is sort of present on this site. It’s much better than it was, but I think there’s lots of room for CS improvement.  I’d say the IA gives the CS a protective coating.

Opportunity for phase 2?  I’d say, surely.

The New Site

But in the meantime, The City of Aspen/Pitkin County Redesign was a great success and the amount of improvements made in this redesign were incredible. The quality of the content was improved by revamping the navigation layout, organization, tone and voice of the content.   Visual aesthetics were taken to a whole new level.  And the new features far and away blow the old site out of the water.  The new site allows users to sign up for emergency alerts, sports a dynamic interactive map with local hotspots highlighted, presents video and photo galleries and filters different categories of events throughout the site.  These are a few things that are brand new that didn’t exist on the old site.

My final words?   – Great job and Congratulations to everyone involved!

Aspen Redesign Homepage Screenshot

/please consider the intention of the resume extension series

Advertisement

Written by messera1

May 10, 2010 at 5:26 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.