Background … and Process

This series is the working record of a pro bono project  – working with a non-profit organization to redesign their existing website.   As you might imagine, we don’t really have much in the way of resources to devote to interaction design.

I’ve actually wanted to do a “job blog” like this for a while – to capture & comment on the process of an engagement as it happens.


The process of the Process

  • I’ll record informal notes as I work with my client.
  • Every so often I’ll publish new JobBlog updates, focusing on the most recent stage of the redesign process.
  • This POST – Anatomy of a ReDesign – will be the repository for the jobBlog updates.  It will grow scalably over the course of the engagement and will be the Project Record document.

I already know what the basic UX “best practices” steps for an engagement are and have captured a bunch of them on my website as UX Tasks.

It’ll be interesting to see which issues come to the forefront and whether there are any surprises, as well.

We’re working “lean & mean” on this project because we don’t have much in the way of resources – so we’re pretty agile, by definition. It’s likely that the JobBlog updates will cover these initial, essential tasks, more or less in this order (more below).


the Context: Framing

The early stage of an engagement is “framing the challenge”. This is a set of notes reflecting my initial evaluation and assumptions about the client and the project.    It’s high-level – almost generic – process.

Preparation : first impressions

I take a look at the client’s website before we interview so that I have some intuitive take on where they’re coming from.   Since this is aredesign project, I’ll take note of some of “the usual suspects” (obvious design problems with the legacy site), which gives us some low-hanging fruit that we can address quickly.  This preliminary site evaluation provides context – and possibly a few initial  talking points.

While making my initial “discovery” tour, I capture screenshots of the existing sections of the website in a document.  This is an opportunity to create a ‘living document‘ repository for our working notes.

Assumptions : get a SnapShot

This is a service-oriented non-profit, so I already have some experience-based opinions about their profile, their needs, and their likely agenda.   Our initial conversation will verify and clarify my assumptions.  The basics are:

Audience – Who are we talking to?

  • Individuals
  • Partners
  • Sponsors
  • Newspeople

Goals – What do we want to accomplish?

  • Attract volunteers
  • Forge relationships with appropriate collaborator organizations
  • Get sponsorship funding
  • Spark publicity, provide information

The Goals must also be explored from the perspective of what the Audience wishes to accomplish.  But let’s not get ahead of ourselves.

Inventory – What do we have to work with?

mission statement, calendar of upcoming events, historical record of activities, marketing brochures, “how to” collateral, advocacy materials, policy papers, criteria/standards documents, membership forms

For example: In a more formalized environment these would be:

Scope and Ordering of the Redesign

This is a volunteer pro-bono engagement.  Neither the client nor I have a lot of resources to throw at it.  Then again, we are not driven by tight time constraints.

“Low-hanging fruit”

Easy fixes of obvious UI issues; tends to be content-oriented (i.e. wording, editing of text, “voice”, styling, use of images).  These ad hoc changes can be incremental and are usually ongoing.  These tasks tend to be along the line of fixing existing problems.


How information (the Inventory) is arranged, throughout the site esp. as regards navigation  and workflow.  This reflects a solid understanding of Audience and Goals (both theirs and ours). This redesign task is a heavier lift, tends to be more comprehensive and all-at-once, though portions of it may be “chunked”. This is the real meat of user experience design.


In my initial conversation with the client we’ve touched on some of the “extra’s” that we’d like to implement.  Ideally, new features and functionality should follow the re-structuring, though some may be escalated for early implementation.  After all, the primary challenge is agility, responsiveness and satisfaction.


Engagement: Getting to Know You

The tendency is often to “dive right in” – and that enthusiasm’s not a bad thing.  But it can also result in well-intentioned missteps.  Let’s try to avoid that.

 The links below take you to the standard UX Tasks that I’ve performed as the initial ‘ getting to know you’ stage of the process.

Legacy Site Evaluation

The Site Evaluation is often the first step in an engagement. I spend some time at the site; pushing, prodding, and taking notes. As a result, we’ve got a pretty good idea of what’ good, what’s bad, and what’smissing

Legacy Site Content Inventory

The Content Inventory gives us some idea of what we’ve got to work with. It takes a bit of doing, but the effort pays for itself many times over.

This list is based on the legacy site navigation menu of the site I’m working on and the content that lies beneath it.

  • Initiatives At least 7 projects listed haphazardly under 3 focus areas, but poorly identified and confused with organizational agenda
  • About Us Personnel : leadership, board of directors, etc.
  • Our Vision  Mission statement, Historical Timeline
  • Media : grab-bag of collateral materials, poorly implemented, not cross-referenced or linked to projects or other articles
  • Blog : grab-bag of articles, not cross-referenced or linked, doesn’t seem to have much traction
  • Donate : uninspired message, unconnected to initiatives
  • Contact Us : uninspired & unconnected


Our assumptions are a Snapshot of the challenge. This high-level insight is pretty effective at identifying our assumptions. In the case of this non-profit organization website, this includes

  • Whos’ who Our audience, our staff & organization
  • What’s what  Our Projects
  • Why Our Mission, agendas


Thumbnail Analysis

  1. Website reflects an organization-centered,”inside-out” view
  2. Content & style are bureaucratic rather than action-oriented
  3. Does not recognize – or speak to – the primary audiences
  4. Relevantly-related info across site is unconnected and often hidden
  5. Interaction is limited to “grudging self-service”
  6. Does not “tell the story”

Identify, Clarify, Verify

All of this effort is provides the basis for an initial  “reality check” with the client. Take a look at what’s there.  Identify what it is (and what’s missing).  Clarify your assumptions and analysis.  Verify them with the client.

the TakeAway:  It’s a dirty job, but somebody’s gotta do it.


Let me take this opportunity to put in a good word for documentation. In the Team Working Environment – Shared Reality is a Necessity.

Good Documentation is not Simply an Assumption

  • It enables good design process
  • It benefits all the members of the team
  • It provides a shared reality

Disclaimer:  Okay, I’ll admit it.  I used to be a Documentation Manager.


I began the JobBlog engagement and series of posts  in mid-May of 2015. These articles had attracted a total of 763 Views and 43 Likes on LinkedIn by the time they were compiled and migrated to WordPress on August 16 2015.




© The Communication Studio LLC