The Portland Japanese Garden’s $33 million expansion is a milestone for the Garden, evolving the experiences people can have when visiting. The expansion not only adds new spaces to the Garden, but creates opportunities to offer classes, house a library, and provides more art exhibition areas. Their new website needed to communicate all of what the Portland Japanese Garden offers and build on their updated mission: to bring the ideals of the Portland Japanese Garden to the world: art of craft, connection to nature, experience of peace. It needed to ensure that people understood the breadth of the Garden as an organization and not just an attraction – through highlighting events, community, education, membership, and donations, all the way down to changing the website URL from .com to .org.

To coincide with the opening, The Forest redesigned and launched a new website to better communicate their brand experience on an extensible, forward-thinking publishing platform.

New Visual Language

The Forest started by establishing a revised visual language, swapping out dark backgrounds for light, open, airy responsive page layouts. Photography is now large and engaging, typography is a combination of modern and traditional typefaces, and the color palette is used as color blocks and bars throughout the site.

JapaneseGarden.com home page

Building a responsive design site was a main objective, with over half of site traffic viewing the site on mobile devices. This was especially important for international audiences, with significant mobile traffic from China and Japan.

Reflecting the Garden Experience Through the Site Design and Functionality

Visiting the Portland Japanese Garden is an experience of wandering down paths, through trees, and across bridges, with each garden space revealing itself bit by bit. We designed the site to reflect this sense of discovery. Each garden space leads to its neighbors, allowing site visitors to have a virtual journey through the garden.

Revising the Site Navigation

Site analytics helped guide the information architecture phase of the project, simplifying the overall site structure from three levels of pages to two. Content was also reorganized into six primary categories based on visitor interest: Experience the Garden, Visit, Events, News & Photos, Education & Community, and About. Additionally, the three conversion paths of purchasing tickets, becoming a member, and donating are called out specifically.

The site navigation also highlights information from one of the most frequently visited pages on the site: when the Garden is open and how to get there.

Events and Event Management

The Events section highlights upcoming events, and site visitors can filter results by event categories and date range.

Art exhibits, member only events, educational presentations and demonstrations, and cultural festivals are just a few types of events held at the Japanese Garden. The presentation and management of events on the site was a high priority, especially for recurring events and member only events. Events are also able to be categorized by a location within the Garden to create dynamic content relationships, such as highlighting location information on an Event page and highlighting events happening within a Garden Space on that Garden Space’s page.

Garden News

News story posts offer a number of layout options, including a customizable call to action widget which can be placed in the story. In this example, it is used to highlight a related Event.

The News section was created to allow the Garden staff to publish news and updates on a regular basis. The News section provides a number of flexible content components and formatting options so the staff can create and format stories in ways that highlights the content. During our site analytics review, we found that Photo Galleries were some of the most viewed content on the previous site so we created special post-types so Photo Gallery posts would be highlighted among all the News posts.

Dynamic Content Feeds for News and Events

Leveraging the News and Events sections of the Japanese Garden site, a dynamic content feed component was created so Garden staff can pull in relevant content on key pages. For example, this component could be placed on the Pavilion garden space and dynamically pull in events and news stories related to the Pavilion.

Visitor Information Component

The Garden’s hours and cost of admission were two of the most sought out pieces of information on the site. In addition to adding this information in the Visit primary navigation item, it is also displayed in the footer and as an embeddable component that can be placed on any page on the site. All of the visitor information is controlled in one place in the content management system so staff only needs to update it in one place for it to then populate all visitor information components on the site.

Instagram Integration

From a content strategy standpoint, the Garden posts almost daily on Instagram. We integrated this external publishing channel into the site which allows the staff to post a photo on Instagram and have it show up in specific places on the site. By tagging photos with a Garden Space location, these photos are then categorized to display on the corresponding Garden Space page on the site, creating context for the Instagram photos.

Chinese and Japanese Language Sections

Chinese and Japanese pages default to the correct fonts, and also contain a sidebar navigation to allow visitors to navigate within these sections.

Chinese and Japanese visitors to Portland are a growing audience for the Japanese Garden. Sub-sections of the site were created specifically for these audiences, providing translated content that is relevant for these travelers. Additionally, the dynamic content feeds support Chinese and Japanese press releases so this content can be dynamically pulled into these sections.

Membership Calls to Action

Increasing membership was a key business objective for the Garden. Staff can place a Membership Call to Action on practically every page, driving traffic to learn more about the benefits and different levels of membership.

Alert System

Sometimes the Garden needs to alert visitors about closures, construction, or other special events. The alert system displays a message at the top of the site: red for closure alerts and green for other types of alerts.