This is a compilation of several blogpost articles which documented my pro-bono design work with a nonprofit org, “in realtime” as it happened.  Here are the solutions and wireframes, in what I like to call my JobBlog.  — Published in LinkedIn on July 2, 2015

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.


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 and experience)
  • 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 (calls to Action) 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 agood 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) Calls To Action

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

Call to Action : 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, thedrilldown 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, andCollateral

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
  • Their JobTitle
  • 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 OrganizationName
  • Their Logo (linked to their website)
  • A Thumbnail description of who they are and what they do
  • Their Involvement 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.


Special Case:   What about a visitor who represents an organization that might wish to sponsor or partner with us?  To create a unique interface is over-engineering.  But there should be some way to enable that connection, probably offline.


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.

Section: Calls To Action

The Big Three

These are the 3 primary Calls to Action (CTA’s) for volunteer and non-profit organizations:

  • Give Money
  • Become a Member
  • Spread the Word

These are pretty much why the non-profit organization has a web presence.


Give money

Potentially, this is the most complex workflow path.  If the visitor is not “electroniczed” the process may involve substantial form-entry

  • Minimal input : Name
  • 1-click enablement via payment engine s.a. Paypal


Become a Member

This, too, is fairly complex, though browsers ease the process with automated fill-in-the-blanks tools like Google Chrome.

  • Standard identity fields:  Name, Address, Phone
  • Interest areas (see below)


Spread the Word

This is the easiest workflow path: Social networking links

  • Facebook, Google, etc.

In addition to appropriate positioning, the CTA’s should be pervasive and persistent.  They are – after all – the reason why the non-profit website exists.

The Engagement Opportunity

The CTA’s are an opportunity for cross-pollination.  If a visitor expresses interest in any of the 3 primary CTA’s, then they should be able to do any of the CTA’s seamlessly.  i.e. A visitor who wants to Donate may then also be ready to Share and/or Join.

The UI Design challenge is to Make the lateral click as easy as possible. Cross-links and seductive messaging go a long way towards making it happen.

the TakeAway

CTA’s are your opportunity for info-mining.  The visitor is willing to be generous (with their own information) and act.  Let’s face it, form entry is a pain.  If you can speed and ease it by using an automated fill-in-the-blanks tool like Google Chrome, then great.

But the most valuable info about me doesn’t reside there.  The Calls To Action are the opportunity to engage in building a meaningful relationship.

CTA’s provide the Traction to Action



 I began the JobBlog engagement 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 on August 16 2015.

sitelogoVisit the case study  for this redesign on my website



© The Communication Studio LLC