Challenge Grantmakers for Effective Organizations (GEO) works with organizations to improve grantmaking practices that "matter most to nonprofits and that truly improve philanthropy." GEO needed to realign its brand to better match the mission. Along with a new brand, GEO required a website redesign to help grantmakers easily find the right tools to guide smarter approaches to make real organizational change. Audiences had a hard time understanding whether or not their organization was eligible for a member account, and frequently called to ask questions. Additionally, members needed a more user-friendly dashboard featuring the latest and most relevant members-only content.
The Work I conducted a site content audit and landscape analysis to familiarize myself with the subject matter, and conducted a series of audience interviews. From my research, I drafted a new site map and taxonomy. Since the definition budget was slim, I conducted a series of wireframe workshops where ideas and interfaces were sketched in real time on a whiteboard with the client team. I recommended an eligibility quiz to help audiences get a better understanding on whether their organization met GEO's requirements. Using the final sketches, I put together a content outline for the client copywriter, and the team lead designer pulled together comps for usability testing. Once designs were approved, I drafted a comprehensive functional specification document that guided both content producers and developers. This document later evolved into high level talking points for a CMS training session I led for the client's content production team.
Solution A new flexible CMS allowed for an easy to maintain experience for content producers, who were previously creating one-off microsites to circumvent what was a very confusing system. My sitemap consolidated a number of external sites into one comprehensive information and resource site. I made a searchable library that let audiences find appropriate peer advice and reports in one experience rather than having to visit a number of different sites. Additionally, a new member dashboard area gave audiences a summary of the latest members-only content without having to search the larger public-facing website.
GEO Eligibility Quiz
Audiences had a hard time understanding whether or not their organization was eligible for a member account, and frequently called to ask questions. I recommended a simple eligibility quiz to help audiences get a better understanding on whether their organization met GEO's requirements.
Functional Specification Preview
I drafted a comprehensive functional specification document that outlined requirements from a content production and development perspective. This included all page types, global components, and several workflows for member login, membership eligibility quiz functionality, and non-members providing contact data to unlock members-only content.
Center on Budget and Policy Priorities
Challenge The Center on Budget and Policy Priorities (CBPP) needed to improve its site search functionality. Audiences had communicated issues with finding the search tool, and reported having problems with the search results page.
The Work Prior to usability testing, I conducted a landscape analysis to see how peer sites were approaching search functionality. I drafted high fidelity wireframes that illustrated two site search approaches, and presented my recommendations to CBPP. Once approved, I conducted tests against the two models. I worked with a designer to build two prototypes featuring the different user interface elements. The goal of this test was to determine which model would be the most viable product to our audiences. I interviewed six users across a variety of practice areas to understand different processes for finding content using the site search.
Test results showed these new concepts were very well received with small adjustments. Audiences preferred adding summary content to search results. Filters were not visible, and audiences were frustrated by having to deselect all facets in order narrow results.
Tasks & deliverables - High fidelity wireframes - Two site search concept models - On-site usability testing - Usability test findings presentation
Solution Site search enhancements increased visibility of the search tool in the global header, and user interface changes improved search results filtering capabilities. Summary descriptions gave audiences a preview of article content without having to click through, also improving findability.
The previous global header and search results page
Audiences were not seeing the search icon, and it hindered their ability to conduct a site search. When trying to narrow down results, audiences were blind to filter tools as well.
New global header and search results page
New enhancements included exposing the site search field in the global header, and made search results filter tools more visible and easy to use. Filters featured a parenthetical count and type-ahead functionality. Content summary text was added to help audiences quickly identify resources of interest without having to make an additional click.
The National Oceanic and Atmospheric Administration
Challenge The National Oceanic and Atmospheric Administration (NOAA) had a myriad of websites for each individual line office floating around with few ties to each other and to the parent site. Audiences had no awareness of just how far NOAA's work reaches, and how it touches Americans' daily lives. What's more, most users only visited the site to find their forecasts and were immediately leaving.
The Work I was responsible for a very diverse, comprehensive set of user experience methodologies including content strategy, user research, product definition, usability testing, and content migration training.
During audience and stakeholder interviews, I learned NOAA was sitting on untapped stories waiting to be told. The lack of a flexible platform to format content—and separate line office websites—hindered NOAA from telling these interesting stories and audiences from finding them.
The content strategy presented opportunities for new features and functionality. I created wireframes to illustrate content hierarchy as well as functional requirements for 12 page templates for a fully responsive Drupal site.
An app-like homepage, a revamped sitemap, and a chapter-based article template were new concepts for the client and audiences, so I conducted usability testing to push design and reassure stakeholders. Since engaging new audience segments was a high priority, I conducted a series of tests with 5 participants who identified as having an interest in climate and weather data. Test results showed these new concepts were very well received with small adjustments.
Solution New focus area landing pages and a revised site taxonomy gives NOAA a place to feature articles and resources from sites, letting audiences explore content without having to immediately leave. Focus area pages are consistently ranked in the top 25 viewed site content. A new content strategy and homepage redesign brought NOAA’s site bounce rate down to 16% from 76%.
The primary goal of the homepage was to capture the attention of audiences looking for weather information, and inspire them to consume more NOAA content.
Focus area landing page
This wireframe was used to illustrate content hierarchy and functionality of all NOAA line offices. This was a new page that helped to elevate NOAA's variety of agency service offerings.
Our Work landing page
Audiences had little awareness just how NOAA far work areas reached; many thought NOAA was just weather. I recommended a work area landing page to show users NOAA's breadth.
About Us template
This wireframe illustrates the content hierarchy and features used to educate audiences about NOAA, its mission, and leadership in an easily scannable way.
This wireframe is used to illustrate how content and messaging would shift when audiences view the site on smaller viewports. Since weather is the reason for most site visits, it is critical that weather information be easily accessible regardless of device.
General Board of Church and Society
Challenge General Board of Church and Society (GBCS) is the advocacy arm of the United Methodist Church. The organization had an outdated site that made it difficult for staff to keep up with always-changing civil issue priorities. Actions were separated from emotional stories making the assumption audiences were already bought in to taking an action when first arriving to the site (75% of site traffic are new users, largely via organic search at 47%). Additionally, audiences were inundated by the number of issue areas and actions presented.
The Work I conducted a series of stakeholder interviews with different board members and leadership across the organization. I also performed an analytics audit and a site heuristic evaluation. Discovery findings laid the foundation for the digital strategy that guided all project deliverables. I delivered a focused sitemap that gave users a narrative way to explore the site and learn more about GBCS. A simplified taxonomy helped wrangle the excessive number of tags that existed within the old site, making it easier to search and filter site content.
Solution By grouping issues into categories, we were able to reduce the number of choices, thus lowering audiences' cognitive load to find areas of concern that are important to them. Pairing issues and actions also help educate audiences on their importance, and what actions can be taken. I conducted a 2-hour CMS training session that set clients up to successfully migrate existing and create new content in time for site launch.
Revising the sitemap and taxonomy went a long way to clean up confusing navigation and a very large number of tags. Calls to action are more visible, and tied to appropriate issues.
Zero to Three
Challenge Zero to Three (ZTT) needed a site redesign to change the way content was presented to a very diverse set of audience segments including: parents, policymakers, and child care professionals. The existing site mirrored internal structures and was not accounting for overlap in audience needs. Content producers also needed a more flexible model for publishing and maintaining resources and site updates.
The Work A number of content workshops helped various practice areas understand audience overlap, and work as a team to stitch related content, policy information, and resources together in a way that made it easy for audiences to find appropriate materials quickly. I also ran a tree test against the first iteration of the sitemap to evaluate the findability of topics. Test results showed that insider language and categories with similar labels was a confusing experience for most respondents. A revised, simplified navigation system with traditional labels helped direct audiences to appropriate information. A cleaned up taxonomy also helped identify content relationships— where resources and materials overlapped multiple topic areas —making related content curation a dynamic rather than manual process.
I drafted wireframes to communicate content opportunities, and feature hierarchy for a mobile-friendly, fully responsive website.
Solution The new site has a clear sitemap that no longer reflected internal department structures, making it less overwhelming for audiences to find appropriate materials. New sort tools help task-based audiences quickly navigate to topic-based content site-wide.
Challenge The US Fund for UNICEF site was difficult to navigate, and its brand and mission were lost. Audiences had a hard time emotionally connecting with the organization, did not understand the organization's objectives, and was unsure what actions could help save children in need.
The Work I created wireframes to communicate content and feature hierarchy of a responsive non-profit advocacy site redesign. Due to project budget and time constraints, annotations were communicated verbally and captured by our technology partner. I used Axure to create the wireframes.
Solution The sitemap is simplified, making it easier for audiences to find appropriate information. Page templates make it easy for content producers to craft emotional, compelling stories, and elevate ambassador work. The organization's mission and critical calls-to-action are elevated showing why UNICEF's work matters, and what audiences can do to help.
View the US Fund for UNICEF website >
Emergency relief template
This wireframe is used to illustrate the full-width layout for a template used for all emergency relief pages. These pages are used to educate audiences on the work UNICEF does to support aspects of emergency relief and give users easy ways to support UNICEF's mission to protect children.
The new homepage introduces the organization's mission, shows the latest news, high priority actions, and features high-profile ambassador work.
This wireframe shows how homepage content responds when audiences view the site on smaller devices.
This wireframe shows new features that allow content producers to create more engaging and interesting page layouts using pull quotes, facts, and calls to action.
This new donation form eliminated a number of fields to simplify the donation process while still capturing data required for internal teams.
Primary navigation dropdown menu
Expanded menus give audiences an opportunity to see deeper content within each section.
This wireframe displays how navigation systems would change when audiences visit the site on smaller device viewports.
Project Redesign a site that provides resources, tools, and materials for English as a second language educators and learners in underdeveloped countries. The existing site was little more than a repository for links to publications, classroom activities, and external resource sites.
The Work I conducted user interviews with audiences from Pakistan, South Africa, Indonesia, Ukraine, and India. I also held a stakeholder interview session to understand the client's business and project goals. To get an idea of the competitive landscape, I performed a landscape analysis evaluating six ESL and TEFL sites. From my findings, I drafted a comprehensive digital strategy to guide the site redesign. Wireframes were used to prioritize content, features, and functionality for a fully responsive site.
Mobile is a priority, because a large number of our target audiences use smart phones to access web content given internet connections are rare or unreliable, and mobile internet access is more cost efficient.
Deliverables - International audience interviews - Landscape analysis - Digital strategy brief - Wireframes
Conclusion The new digital experience is a better-organized resource site that is accessible to its users on a variety of devices. The redesign enables a dynamic way to cross-promote similar resources helping audiences find related materials. The site also features new content giving educators suggested ways to use resources in the classroom, as well as content packages pairing activities, multimedia, and publications based on themes matching important holidays and events in American history and culture.
This was the final product design at site launch. The site has since undergone small cosmetic enhancements.
Given the audiences were split between educators and students, I introduced quick paths into teaching and learning materials.
Mobile homepage wireframe
This wireframe was used to show how content would shift for smaller viewports.
Tablet homepage wireframe
This wireframe was used to show how content responds when audiences view the site on a smaller browser, but larger than a smartphone.
This wireframe showed a robust way to display a large number of educator resources and tools.
Educator resources for mobile
This wireframe illustrated how educator resources would shift when viewed on mobile devices or smaller viewports.
Department of Interior
Challenge The Department of the Interior (DOI) had a very outdated website. Branding was inconsistent, the agency's agenda was unclear, and it was difficult for audiences to find content. What's more, the eco-friendly, nature-lover segment was significantly underserved when it came to content of interest.
The Work I conducted a web survey, which uncovered an underserved audience group that was interested in photo-of-the-day and the "This Week at the Interior" video series content.
A new, simplified navigation system helped direct audiences to appropriate information. The information architecture also helped identify relationships making related content a dynamic rather than manual process.
I created wireframes to communicate content opportunities, and feature hierarchy for a mobile-friendly, fully responsive website.
Solution The site redesign is more welcoming and inclusive to a wider range of audience segments beyond internal staff and policymakers, features more of the agency's beautiful photography, and the addition of new sort tools make it easier for task-based audiences to find appropriate documents and press releases.
This illustrates how the content hierarchy and messaging translated from wireframe to final design.
Landing page wireframe
This illustrates a landing page that is flexible, giving content producers the ability to feature different content and messaging for each of the site's major sections.
List template filter tools
Previously audiences didn't have the ability to filter or sort search results or content lists. This shows the new feature intended functionality.
Previously articles were very static and inflexible. Content producers didn't have the tools to style and format press releases and stories in engaging ways, and any related content was manually curated. The new system simplified the content producer's efforts to publish stories.
The site redesign simplified the number of navigation items, and a large dropdown gave audiences a preview of the type of information found in each section.
This wireframe illustrates how content hierarchy shifts when audiences view the site on a small browser or mobile device.
Project The client came to us requiring a site that had to do some heavy lifting. It needed to feature content that spoke not only to nature enthusiasts, but also to activists, weekend warriors, and those who have a general interest in wilderness but not a vast understanding of what the client does.
The organization itself also consists of many different stakeholder groups, all with equally important messaging and business requirements. One way to get these groups to understand others' goals was to gather for one large work session to discuss primary and secondary audiences, map out user stories, and prioritize all of the above. This helped the groups see common themes and patterns. It also served as a good reminder that while audiences and actions may be different, the end goal of the organization continues to be the same.
Not only did the site need to appeal to a broad audience, but protected lands/place pages required a distinct layout that didn't look like a general content page. Location pages also had to fit within the new site template design and organization brand. Previously, some of these sections were microsites, each with their own branding and templates.
Conclusion Created page templates that take full advantage of the beautiful photography and quality content that already exists, and elevates high-impact and editorial content (and eliminated Flash carousel). Previously, material of interest was buried in a confusing, blog-style template. The new structure features content on the homepage that clearly speaks to each audience, and steers each group towards areas of interest. These areas include:
A path to take action right away (donate, write a letter to Congress, volunteer opportunities, etc.).
My Wilderness stories (personal experience pieces give audiences a chance to learn more about protected lands without the wonky, specialist language).
Interest pieces to get audiences interested in/build awareness around timely, important issues, and encourage them to take an action (donate, write a letter, sign a petition, etc.).
Created a unique template for protected lands/place pages. This allowed each location to distribute marketing materials linking directly to a specific section, giving that section
Deliverables I was responsible for the creation and ownership of the following:
Illustrating how wireframes informed the design and development process.
I created a functional specification document outlining feature and functionality requirements the development team used to build the site against.The idea was to make the site as modular as possible, giving the client flexibility to create custom pages within a given set of modules and components.
This document outlined the available modular components the content manager would be able to mix and match in order to create engaging page layouts.