The JobBlog

Overview:  Homepage

The rubber meets the road:  Here is the first (messy) pencil sketch for the redesign of a non-profit org's website.  This is often the visitor's first impression of our organization.  

The "first pages" of a website often tend to focus on  presentational styling. But they work most effectively when integrated with coherently-organized information.

Groundwork

In the initial Anatomy of a Re-design posting and subsequent JobBlogs, I've laid the groundwork for how and why we're at this point now.  As with much UX, "Context is Everything".  The understanding that informs our re-design solutions is based on assumptions, which are informed primarily by:

• my own heuristic evaluation of the legacy site (based on best practices andexperience) 
• one-on-one reality check discussions with the primary SME (subject matter expert)

In the best of all possible worlds, there would be more rigor to the UX analysis.  But this is a pro bono project, so our operating budget is ... zero.

The heuristic evaluation / SME reality check approach is fairly standard among projects.  It works pretty well - and is certainly cost-effective.

 

Okay, let's take it from the top.  Here are some thumbnail notes on each section of the Landing page.

the TopBar

The Logo - of course - is a given.  We've also put the 3 main Calls to Action (CTA's) front and center at the top.

• Donate Support us with money
• Join Get involved with the organization
• Share  Social Networking tools

We'll explore the vital role, structure, and presentation of the CTA's in a later JobBlog.

the MenuBar

Keep it simple (4-5 "tabfolder" items), focused on:

• What we Do
• Why we Do It
• Who we Are
• Collateral (Referential info, which is often Where, When & How)

These menu sections echo the primary questions that any visitor would ask. I try to present them in order of importance to the visitor.  The branding (labelling) of the menubar items is open to interpretation, but each should obviously answer the What/Why/Who questions.

You'll notice that there is no About Us section.  That's because I have little use for it.  The What/Why/Who sections should answer our questions.  'About us' is usually a grab-bag of info that probably belongs somewhere else. 

the Slideshow

The dominant, graphical, animated "slider" is our current thematic design technique du jour.  I'm not complaining - It's a good design technique (but I also don't know how long it will last).  The Slideshow presents our main value propositions in a short, clickable presentation.  Here are my criteria:

• Try to keep it concise: 4-5 slides (20-30 seconds)
• 1st slide = Concise, accessible overview of "What we Do" goals
• Slides = primary sections = organizational goals
• Each slide links directly to appropriate page
• Summary (1-2 sentences) appears w/ each slide

This is it. Your visitor 'gets' you (or not) here, in this moment. This is The Takeaway.

the Challenge

This might also be called framing or context. Non-profit orgs tend to exist in order to address problems.  People generally don't like to hear about problems. They certainly don't want to deal with complexity. So we need to state the challenge as quickly and powerfully as possible, with simple graphical data. 

The Landing page is scanned, not read.  This section, being problem-oriented, is actually kind of dashboard-y.

the Solution

This section reinforces and formalizes What we Do.  This is our counter-punch to the problems we've just identified. It's also an excellent opportunity to showcase "what's new" in the context of our organizational goals. 

Sometimes redundancy is good and necessary.  

A-B-C (Always Be Closing)

This section articulates the value proposition for the visitor.  Our agenda:  Make it easy to act.

A tip of the hat to 'GlenGarry Glen Ross"  

the Takeaway

This is sort of an over-simplification of the Landing page, but I think it captures the essence of it.  In upcoming JobBlogs, I'll focus on the What, Why, Who, Collateral, and CTA areas of the site in more detail...

 

Section: What We Do

The "What We Do" section  is usually the focus of the visitor's interest and is the punchline for the site.

It's one of the first places the visitor will go in order to learn about the organization.  And it's also the stuff that we want to tell people about. Our non-profit has about 5-7 projects that we want to showcase.  But this page isn't immediately focused on describing each project in detail.  

How it all Fits Together

This initial introduction to what we do is concerned with providing context rather than detail.  This overview puts what we do into context :  

• A thumbnail description
• accompanied by supportive factoids
• reference info
• quotes, testimonials
• perhaps links to news items.

The primary message here is to connect our actions with our mission.

You should be able to view this page at a glance and say, "Yes, it looks like they're doing the right stuff". The net takeaway is coherence and appropriateness

Note:  I added it as an afterthought in the sketch, but there should also be a brief recap of the framing challenge (i.e. the problem we're trying to fix).

Get down to Specifics

We still want to know more about the individual projects.  They are a big part of the whole story.

Informationally, the projects can be viewed at this point as "case studies".   You "drill down" to more information.  Presentationally, the drilldown to more detailmay be by going to a new, dedicated page or by opening up and accordion-like expansion within the existing page. (I prefer the "new page" solution.  It allows more modular design flexibility, without the interface overhead.) 

Drilldown:  The Context Management Exercise

The drilldown "what we do" project module allows us to present all the info you might need. This rich detail that would probably be a little overwhelming if you presented it all in a list up front.  The template can be expanded, but I think this list provides a healthy profile:

• Project Title
• Duration (dates) From/To
• A fully-featured Description (challenges, solutions, process, etc.)
• Who from the Organization Staff is involved
• Which Sponsors have contributed
• Relevant News Stories, Events, Quotes, and Collateral

I describe this as a content management exercise. Like other data-rich parts of the site (the list of Staff, the list of Sponsors, the Collateral library of news stories, the Calendar of events), this is the "work area" where much of the cross-referencing, linking and connections among information are maintained.

Do you need a content management system (CMS)?

CMS engines are pervasive and relatively inexpensive, tho not necessarily elegant in terms of their UI tools.  The primary challenge is to start thinking that way (i.e. "information architecture" and "tagging") when designing.

the Takeaway

The net result of the "what we do" section is credibility. This is our portfolio of achievement - where we demonstrate that "the rubber meets the road".

 

 

Section: Who We Are

The Who We Are section of the website (sometimes labeled as About Us) is a great opportunity to  increase trust and transparency by “putting a face” on the organization. We include our own Staff, our governing Board & Thought Leaders, and our Sponsoring / Partner organizations as all being part of our organizational family.  This section also provides a sense of organizational structure and functional coherence, though we want to avoid presenting a dry, impersonal “org chart”.

Overall, this intro

• should be easily scannable
• provide an accessible overview of the totality
• thumbnail descriptions should offer a compelling worth-the-effort “hook” to drilldown for more detail
• focus on a “showcase story” … a hero

 

Who: Staff drilldown

As with other detail drilldowns on the site, this module reflects a content management system format.  The drilldown itself can be an in-page accordion or stored in a separate page. The template can be expanded:

• Person’s Name
• TheirJobTitle
• A Photo (important!)
• Their Role & Story(this is the “meat” of the module)
• Links to the Projects in which they’ve been involved. The personal connection: People are tied to projects and – through projects – to the mission.
• Optional: Display their direct contact info, social media connections

  Who: Governing Board drilldown

The Governing Board drilldown 

• probably displays a group picture of the board members
• may present a group statement
• may include individual personal profiles (similar to the staff drilldowns)

Who: Sponsor / Partner drilldown

As with other detail drilldowns on the site, this module reflects a content management system format.  The drilldown itself can be an in-page accordion or stored in a separate page. The template can be expanded - and may includeOrganizational Partners, as well:

• The Organization Name
• TheirLogo (linked to their website)
• A Thumbnail description of who they are and what they do
• TheirInvolvement with us
• Links to the Projects in which they’ve been involved/sponsored

 

the Takeaway

The Who We Are section is the face of our organization.  In many ways, it is our brand. It should be be both personal and personable.  We should come across as concise, credible and likeable.

 

Section: Why We Do It

The mission statement is the vision thing.

The Mission addresses our solutions to the challenges we’ve identified. In this example, we have 3 Mission Initiative areas, which are the focus of this section of the website:

• Education
• Advocacy
• Research

The mission itself is presented succinctly. Our thumbnail descriptions are supported by links to Projects, People, Events and relevant Collateral (like news articles and policy papers).  These might be presented as sidebar panels. Quotes and Testimonials are particularly appropriate.

This is also an opportunity to re-focus on the challenges that we address. We can educate, inspire, and tell a story, not merely state some abstract principles.

In my opinion, visitors are initially interested in What We Do and Who We Are.  The visitors who are most interested in Why We Do It are likely to be Journalists (looking for background info or soundbites) and Sponsor /Partners (who want to know if there is organizational affinity with our organization).

 

the Takeaway

The Why We Do It section articulates our soul.  

 

 

 

Section: Collateral

The “Collateral” section (sorry, I just don’t have a better label for it right now) is the repository for our reference materials.  These often describe the Where, When, and How.  This library of materials might include:

• Calendar of upcoming events (including announcements and alerts)
• History of previous Events
• Policy papers
• “How to” manuals
• Reports
• Links to articles and news items by others
• Electronic Media slideshows, videos

These individual collateral items are salted in appropriate spots around the rest of the website.  Because they are timely and media-oriented (i.e. visual), they are often the featured items on a page.  

Because of the timeliness factor, an appropriate, accessible label for the Collateral section might also be “In the News”.

In fact, a single Collateral item might be featured in several different pages.  But they still need a common place to live.

We should library our collateral

I am tempted - but reluctant - to label the Collateral section as a "Library" (a little too dowdy and off-putting).  But that's really what it is.

In practical terms...

It’s not likely that a visitor will come to the Collateral section intentionally unless they are interested in information research self service (i.e. Journalists).  They will probably want to view collateral items that share a common topic, s.a. a Project title or a Mission Initiative (like “education”). That's why the materials in the Collateral section should be libraried: identified by tags and sorted into categories.

 

Collateral is an exercise in Content Strategy

Once libraried, the collateral is

• Tagged by topic (and any other relevant attributes)
• Shared across the site
• Searchable by categories

The Content Inventory is a fundamental building block of any presentation - and any site.  It's how you know what you have to work with.

Hidden agenda:  The Collateral section merely exposes the information architecture that we should be doing anyhow - in the background, across the site.

the Takeaway

Collateral enhances credibility.  The Collateral section is where a lot of visitor self-servicing work gets done.  "Flat" design assumes a slick, silver-platter presentational approach.  The Collateral section is less sexy, but it still has value.

 

 

the Background: Anatomy of a Redesign ... 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.  It seems appropriate for a potentially collaborative platform like LinkedIn.

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.

Steps

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.  (Take a look).  

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 a redesign 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:

• Site Evaluation  Heuristics
• Content Inventory Collateral, resources
• Workflow Pathways
• Snapshot Thumbnail, framing, scoping

 

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.

Re-structuring

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.

Value-added

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 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

 

Assumptions

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.

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.

 

It's not necessarily a dumb medium:  Here's a little appropriate background music as you read the article.

 Click 'n Enjoy

 

Olde Schoole

The original "Getting to Know You"  was a show tune from the 1951 Rodgers and Hammerstein musical "The King and I".

 

Solutions:  Scale, Scope, Agenda

Based on our initial evaluation of the legacy website, we already have a thumbnail impression of what's good, what's not and what's missing - as well as a sense of what we need to do about each.

• What's good :  Keep it, though possibly rearrange it
• What's not : Fix it
• What's missing : Find it, add it, create it

What's Good:  Reorganize it  

This re-design isn't just a new coat of paint.  If that were the case, we could proceed directly to "low-hanging fruit" (see below). In addition to the surface presentational fixes, we're looking to take the existing collateral and reconfigurehow it is presented.

Reorganization of the structure of information is the heart of UX.

Restructuring is reflected in the Navigation MenuBar.  Here are a couple of basic ground rules:

1. Menubar labels should be clear & simple
2. Fewer = better

And here's how I suggest we apply it to our site:

What We Do Projects, examples

Most new visitors will go to view these active, short, practical project "stories" first, then go view the philosophical policy rationale as a follow-up.  Not the other way around.  The Projects are the focus of interest. Policy & organizational structure  - in most cases - are secondary.

Why We Do It  Mission, Initiatives, Agenda, History

The 'why' justifies our actions logically.  But - perhaps even more importantly - it reinforces  affinity with the audience.  History establishes  credibility and integrity.

Who We Are  Personnel, governing Board, Sponsors, Partners

This is the face of the organization.  It's an opportunity to personalize and tell the story.

How It Happens  Calendar of Upcoming Events, Collateral, Press

The Calendar identifies opportunities toparticipate, Collateral offers things to do, Press and News are talking points. This is where 'the rubber meets the road" as regards audience interest.  All provide traction to action - direct engagement with the site visitor. 

Reconfigure Donate and Contact Us as branded Call-to-Action buttons, rather than navigation menu items.

Turning these into action buttons both makes organizational sense and gives these critical CTA's appropriate emphasis.

 

What's Not Good : Let's make the Quick Fixes

The Usual Suspects

Legacy Issues usually identify some of the "low-hanging fruit" that we can deal with fairly quickly.  These are often cosmetic changes which can be addressed presentationally, rather thanstructurally;

• Terminology
• Tagging 
• "gleaning"

Here are a few issues that are unique to our site:

Be Memorable

Currently our strongest, most communicative taglines are lost in the verbiage.  Statements like these should be hilited, repeated, and front & center.  These punchy statements can also serve as a Call to Action.

Avoid Bureaucratese

Headline labels like "Delivering Health Education" and "Informing Policy" may be technically correct, but they aren't very informative or compelling

The deadliness of "-ing.  Every time you give something an "-ing" label, you've made yourselves in-active.  Instead, say:  "We educate", "We influence" (or We advocate)

Homepage: Limited attention span

7 slides in a 5-second autoscroll is too long, too slow, and in the wrong order.  A slideshow of 3-4 panels works better.   Try different slideshow versions to keep it fresh and also to highlight different aspects of our message.

Media Hits (and Misses)

Media pieces are powerful - and potentially dangerous.

• Quantity: Our "Media" pages are over-engineered, unnecessarily data-heavy and slooooooooow, as a result - because they attempt to present all the media at once.
• Quality: We have an animation that is charming, informational, short and accessible. It should be front & center.  Even an important message is lost if it's not viewed.
• Relevance: Nobody actually comes to our site because they want to "see some media". They are interested in a topic.  And the media are of interest only if they are relevant to that topic.  Grouping all the media pieces together "because they're media" makes little sense.

  Attention span = short. Especially for media. Let's guide ourselves accordingly.  BTW:   Everything on the site is media ... of some sort.

What's Missing : Discovery and Surprise

FAQ's (answers to "the usual suspects" questions)   First-time visitors often use FAQ's as a "fastTrack" to engagement - and they also provide context for the novice. + Add this section to the topmenu

There should be at least 10 or so FAQ's.  In addition to a brief explanation, they also point to the relevant page/section on the site.  FAQ's and "factoids" should be branded and presented on pages of the site as accessible information snippets.

The Content Inventory often leads to the discovery of "hidden treasure" - collateral that's incredibly valuable, but is hard to find.

Sometimes the hidden treasure is hidden on the website.  Often it's "cross channel" - information that resides elsewhere (as a brochure, in a fact sheet).