The non-profit organization faces unique challenges with any web project. There are budget and internal skill limitations not typically faced by a for-profit entity. We’ve addressed what you need to know about the project process and begun to tell you how to manage it more successfully. This article discusses what I believe is the most important part of any project, yet is most often overlooked by the non-profit community: user experience design. (Obviously I am biased, as the resident UX expert at Advomatic.)
What is User Experience Design?
User Experience Design is how you get from “We need a new website” to a visual designer selecting what colors, fonts and styles will be used on each page. Imagine if you walked into a room with piles and piles of books, with no organization whatsoever and asked to organize them as a library, so any visitor could find what he or she is looking for. And then after that you were asked to design the shelves, and aisles. That’s what the user experience design process does for the web. Continuing with the library metaphor: the visual designer for the web is the interior decorator for the library who picks out the bookshelves and furniture, but already has guidelines for what kind of furniture should go in the library. The academic study of user experience design emerged from a hybrid of technology, design and library science.
So I know what you are thinking, my organization doesn’t have an entire library worth of content. That doesn’t mean you should skip the UX process. Many organizations have years of content in various forms such as press releases, amicus briefs, research reports, blog posts and much more. Ever been to a website, couldn’t find what you needed and quickly left? When that happens repeatedly, the UX design process was ineffective or possibly skipped over entirely.
How Non-Profits Engage in UX Today
If you are part of The Nonproft Technology Network (NTEN) or Progressive Exchange, you’ve seen, heard and read about UX regularly without realizing it.
The majority of our focus is on tweaking and enhancing email messaging. With email open rates reported as low as 11% in recent studies, it’s time we refocus on the web. Imagine if our community put as much energy into UX for our websites as we do on writing emails. How much larger would your organization’s audience be?
Several organizations, especially those without severe budget and time constraints, will invest a few months in planning, strategy and UX for their website up front. Those who do not are missing out on a huge opportunity.
What does the UX Phase of a Project Look Like?
Case Study: AfterSchoolPathfinder.org
The After-School Corporation (TASC) is an organization whose mission is to improve the quality of and access to after-school programs in New York City through policy analysis and professional development. TASC’s Pathfinder is an online hub for after-school professionals of all levels, from front-line staff up to executive directors. This site includes a training database, job listings, resume and cover letter creation tools and a learning plan wizard.
Any good UX Designer will do a custom research and analysis plan for each project, depending on timeline, budget and scope. Focus groups were my primary research tool, as required by the grant from NYC’s Department of Youth and Community Development. From these groups and meetings, I produced personas and audience analysis documentation. A persona is an imaginary user of your site, complete with attributes and a perspective that represents one of your target audiences. We use personas to put ourselves in the user’s shoes and view the site from his or her point of view. When viewing each page of the site, ask yourself: “How would John Doe use this page? Does this page help John Doe find what he is looking for?”
Employers were posting jobs on craigslist, and the job applicants were not experienced or interested in education. There was no comprehensive listing of trainings. The only way to receive these updates was by joining each provider’s mailing list. Job seekers and entry-level after-school professionals only received networking and guidance from their supervisors at work and had nowhere else to go for career building and guidance within the after-school community. We designed the TASC Pathfinder site to fill this wide open niche. With TASC staff, we agreed that the major audiences were employers, training providers and after-school professionals. Through this research, we discovered that there was no hub for the after-school professional community online.
TASC Pathfinder was a significant expansion on an existing Drupal site that was called “TASC Job Bank” and included job listings, resume and cover letter creation tools. From the research and existing site emerged a preliminary site map.
The wireframe is the meat of the UX process. Some designers will refer to wireframes as “blueprints,” since these documents describe the functionality on each page rather than the visual design, much like blueprints do for a building. The wireframe is a living document and work in progress, used to prompt discussion among the UX designer, visual designer, developer and client. Wireframes can either be high fidelity (hi-fi) or low fidelity (lo-fi). The home page wireframe below is hi-fi, meaning it is more detailed.
Frequently Asked Questions
What if Our Organization Can’t Afford to Hire a UX Designer?
First, before giving up on finding a UX Designer, try to find graduate students from major interaction design programs like Savannah College of Art and Design (SCAD), Carnegie Mellon University and School of Visual Arts (SVA). Some of the larger interactive agencies will do pro bono UX projects for non-profits once or twice a year. You’ll have huge resources but the team may not know the non-profit space.
How do I Test and Improve Our Current Site With UX in Mind?
If you don’t have the budget for a big redesign, but want to improve what you have, learn about usability testing. I think I recommend Steve Krug’s Don’t Make Me Think at least once every few weeks. Krug advocates testing one day a month and walks through the process of conducting a test and what to look for. Leading UX Designer Whitney Hess often conducts trainings on this subject: DIY UX: Give Your Users an Upgrade (Without Calling In a Pro).
So I’m a Believer (or a UX designer) and Need Help Pitching UX to Clients or the Executive Director
Can You Say That in English? Explaining UX Research to Clients is a fantastic article written by David Sherwin of frog design that addresses how you explain each component of UX, like card sorts and prototyping.
The user research and audience analysis that comes from UX is helpful to more than just an organization’s web team. The Director of Communications and Development Director will benefit from a competitive analysis and user personas just as much as the web team will.
Guide to UX Deliverables
There is a wide variety of “deliverables,” or research documentation, that may be produced by a user experience design as part of this process. Here’s a quick glossary to help you get started.
For a more in-depth look at UX deliverables and this process, be sure to check out two often-recommended books: Communicating Design: Developing Web Site Documentation for Design and Planning by Dan M. Brown of Eight Shapes and A Project Guide to UX Design by Russ Unger and Carolyn Chandler.
Card Sort
A focus group exercise in which participants are asked to group index cards with content names or types into logical groupings. Best used to figure out the information architecture of a complex site.
Competitive Analysis
Describes the other sites that are or may be perceived as competition and what these groups do well and poorly based on a set of criteria.
Content Inventory
A table that lists all content in a website and its attributes including content type, title, author, page visits and more. Preliminary step often taken prior to a redesign of a large site.
Persona
Description of an imaginary person, their demographics, history with subject of the site and trends. See above sample.
Project Brief (or Creative Brief)
Preliminary document describing the goals, target audiences, concepts and potential functionality.
Prototype
A clickable or interactive scaled-down version of a website. Prototypes come in many forms, the most obvious being those that display in a web browser built in HTML with clickable regions on an image. Other forms include Powerpoint decks and paper. Great for usability testing your website before you build it.
Scenario
A story of how a user may interact with a website. A paragraph form of a task flow that uses an individual created as a persona.
Site Map
Shows the navigational paths and structure of a website. Does not illustrate functionality or layout of individual pages.
Task Flow (or User Flow or User Workflow)
Displays the steps which a user takes when completing a task or action on the site. e.g. adding a job listing to the TASC Pathfinder.
Usability Test Plan & Report
Usability testing is a method for measuring a site’s ease of use and simplicity. UX thought leader Jakob Nielsen defines usability with the following five attributes: learnability, efficiency, memorability, errors and satisfaction. Two great resources for usability, besides Steve Krug’s book mentioned above are Usability.gov and Nielsen’s Usability 101
Wireframe
A “blueprint” of a page in a website that is used to describe functionality and content, not for design. Often annotated with detailed notes to guide developer on functionality.