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.
US Fund for UNICEF
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.
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 Site Redesign
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.
From wireframe to homepage
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.
Wilderness Society Functional Specs
Project 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 deliverable was created using Microsoft Visio.
Note: this did not include content mapping requirements, since the client was responsible for that task.
Intranet Usability Testing
Project In preparation of an intranet redesign, I conducted in-person usability tests against three different models. Models included the client's current HR/intranet system, and two clickable prototypes. Prototypes were created using Protoshare, and were based on user workflow diagrams I had created. Diagrams evolved from stakeholder interviews, and an all-day, on-site discovery work session with the client team.
Tests were conducted with individual employees over the course of six days, testing 3-4 subjects for each model. Each session was captured using either Silverback or Camtasia.
After finishing all usability tests, I compiled results and mapped out common themes to determine the the following:
- Where employees typically begin their journey for HR information or tasks. - Where employees typically go to find relevant HR news and information. - Interest in, and informational needs around, transactions and their supporting content. - Interest in personalization as a way to find relevant content and transactions. - Level of comfort having to access multiple systems for information and transactions.
Conclusion With the information gathered, I drafted a comprehensive report outlining common concerns, themes, and pain points, and recommendations for moving forward. Recommendations would help guide decisions such as:
- What intranet features and functionality should be added, eliminated, or enhanced. - What level of integration needs to be implemented to make tasks and information gathering easier. - What level of personalization would be needed to make finding relevant tasks and information faster.
Deliverables I was responsible for creation and ownership of the following:
- User flow diagrams - Wireframe sketches - Conducting usability tests - Usability test results report - Comprehensive executive report