Back to Portfolio

TREC: Together Rising as an Environmental Community

At a glance

Type:
Nonprofit
Location:
Seattle, WA
Launch Date:
October 15, 2024
Services:
  • Custom Website Design
  • Custom WordPress Features
  • Custom WordPress Theme
  • Design Refresh
  • Front-End Development
  • Information Architecture
  • Responsive Design
  • Training

Visit the TREC: Together Rising as an Environmental Community website

The TREC home page on narrow screens, normally a phone has all the same content as the large-screen version. The 4-item menu is replaced by a standard hamburger "Menu" button. The top section with slideshow uses the same images but cropped in closer to the focal point of the image. The icons and learning guide buttons are stacked into a single column rather than rows.

More than 10 years after building a website for what was then called Training Resources for the Environmental Community, TREC chose to continue working with MRW Web Design on the total overhaul of their website as they launched an updated name, logo, and brand.

The new website for Together Rising as an Environmental Community balanced usability and cohesive aesthetics to provide every visitor with a pleasant and useful experience as they engaged with TREC. The new website was just a small part of TREC’s work to collectively shift the values of the environmental and conservation movements toward a more inclusive, “interdependent,” and “interconnected” space that “centers diverse wisdom.”

Having developed quite a few websites over the past 15+ years, it was hard to wrap our heads around the expansiveness of Mark’s services: we’d never experienced a consultant who could support us through the full process of strategy, design, user experience, accessibility, and programming. Mark’s gentle, kind, and firm direction through the development of our site led to a final result that tells our story and supports our users in ways we didn’t even know were possible.

Kristi & Lauren, TREC Staff

Beautifully branded pages

With designer Amy Weiher of Weiher Creative leading development of a brand identity, I developed a custom WordPress theme to that combined beauty and usability with the new colors, patterns, shapes, icons, and imagery. The final experience sought to encapsulate TREC’s new values and ways of working in a look-and-feel that communicated warmth, trust, and vision.

The top section of the TREC homepage includes a full-width light blue banner announcement, a fairly minimal bar with logo, 4 navigation items, and search, followed by a subtle slideshow. The first slide shows a maroon, duotone image of two bear cubs peering at the viewer. Tinted yellow and white shapes from the logo overlay the image along with the bold words Resources Rooted in Nature.
TREC’s home page uses a calming, accessible slideshow to reintroduce TREC and illustrate its values.

The brand touches nearly every page element, leading to simple, clear, and attractive pages that have an identity without getting in the way of website content.

The "Our Team" page has a large red, patterned title bar with shapes overlaid. On a white background, three columns of staff are shown with red duotone headshotes in a circle crop. Staff names are in teach and job titles are in a brighter red.
Duotone filters create a cohesive look for images, but TREC’s people appear in their full color when engaging with them.

As with every nonprofit site I build, the WordPress block editor was heavily customized to allow site editors to build unique page layouts with consistency. A standardized color palette, custom icon set, and prebuilt content sections helped editors quickly add new content.

The WordPress block editor is customized to show the same title bar as the front end of the site. An expanded color palette popout shows the full TREC brand colors including a brick color, kelly green, bright yellow, and darker and lighter neutral tones.
A branded editing experience
A modal popup window shows 20 abstract icons available for use by editors to make attractive pages.
Editors choose how to use custom icons
The patterns inserter in the block editor shows 6 patterns in a "Bold Sections" category. All 6 patterns combine a vibrant background color, textured background patterns, and wavy irregular background edges.
Preset patterns make content creation quick and easy.

Approachable, deep content

As a capacity-building organization serving a diverse array of nonprofits, it was critical that TREC’s website support new visitors with minimal background knowledge and experts seeking specific tools and resources. An in-depth content audit and site mapping process resulted in a concise 4-item navigation menu with “mega menus” that provide two-click access to every key landing page on the site.

When opened, the TREC small screen menu shows the same categories and content but in a single column. Here, the "Gather Resources" section is opens to show a light green box of Learning Guides.
Small screens get quick access to every part of the site.
The TREC mega menu blurs the page when opened fully to help visitors focus. The "Gather Resources" section–immediately after "Home"–starts with a large box of 10 Learning Guides and then provides further access to a nonprofit salary survey, job board, referral directory, and searchable resources page.
The “mega menu” submenu system on large screens provides an overview and context for everything TREC does.
Learning Guide pages introduce new visitors to TREC’s lens and featured resources.

TREC provides an incredible depth of expertise and resources. To help visitors and site editors alike, the WordPress site was customized with tools for managing News posts, standalone resources, Webinars records, upcoming Events, two ways for curating resources, and self-service job and consultant referral boards. Custom Post Types, custom Blocks, automatic metadata creation, and accessible faceted search, were among the many tools used to meet the complex needs of the site’s content.

Scrolled past the page title, a "Results" section shows detailed resource summaries with links while the "Search & Filter" right sidebar includes a search bar as well as lists of checkboxes for filtering by "Types" and "Topics".
Power users of the site can quickly access the Resources page to filter, search, and sort over 300 resources on TREC’s site.

Full pages such as a webinar recording always place the most important information first and contextualize it with at-a-glance details on information such as subject, length, further reading, and related site resources.

Intensive client collaboration gets results

Over months of planning, training, co-creation of pages, and extensive feedback and revisions, the new TREC.org is a showcase and case study for the power of clear communication and authentic feedback between an organization and multiple supporting consultants.

From day one to pressing the launch button, Mark’s strategic thinking, outrageous skills, and mindfully designed process supported TREC to create a website beyond our wildest dreams. His focus on our unique mission and goals, and deep understanding of non-profits, were indispensable in the co-creation process.

Kristi & Lauren, TREC Staff

Despite being a long-time client, this project’s collaboration process started from scratch, questioning past assumptions and carefully assessing the needs of TREC today, not TREC from 10 years ago when the site was last redesigned.

As they announced their new name and identity, visitors received a vastly improved user experience to demonstrate that TREC remained a trustworthy source of information and partner for the future.