PGAL is an international design firm specializing in architecture, interiors, engineering, and planning. The growing firm needed a website that would better represent who they are today, after 70 years of award-winning work for a diverse range of public and private sector clients.
TOKY Branding + Design created a responsive site that introduces PGAL’s new brand and showcases the firm’s robust portfolio in a beautiful and intuitive way. TOKY specializes in digital and print work for clients in architecture, building, and design, as well as the arts, education, and premium consumer products.
PGAL was ready to move away from its outdated, custom content management system (CMS), and was open to recommendations. TOKY’s decision to use Drupal was influenced by experience on a recent project for the Landscape Architecture Foundation. The framework proved to be the right choice for the Landscape Performance Series (LPS) site, which features similarly robust search and filter functionality. In fact, some of the custom code created to achieve selective filters for the LPS website was also used for PGAL.
Another major reason we chose Drupal was because we were able to create a simple, intuitive interface for the site editors that wouldn’t be possible with other CMS solutions, especially with the many different content types, taxonomies, and blocks. We knew that using Drupal permissions correctly, along with admin-improving modules such as Admin Views, Field Group, Better Formats, RoleAssign, and Navbar, would greatly improve the user experience for the site’s most frequent users: content authors.
Quick, Intuitive Project & Site Search
One of the central goals of the site redesign was to give users a quick and intuitive way to find specific projects. On the previous version of the site, users were required to select a category before seeing any work at all. The new site lets users jump right in and explore all projects, and from there, narrow down their exploration using filters and/or project search.
TOKY paid close attention to the filtering process to ensure fast and painless project discovery. On the All Projects page, the user is presented with a full list of filters to choose from. Once one filter is selected, further search options are automatically eliminated to correspond with results for the chosen filter. For example, once a user selects “Aviation,” any filters that do not overlap with that category — for example “Education” and “Recreation” — will disappear. This prevents the site from presenting the user with zero results — a potentially frustrating user experience.
The same is true for project search. Once a user keys in a search term, the available filters are reduced to fit that search criteria. For example, if a user searches “school,” the “Any Year” filter options will update to include only the years in which a project that includes the term “school” was completed.
It was important to PGAL to display project results as either images or lists, so we included the ability to toggle between either option. For the image display, results are shown in two sizes: large squares for featured projects, or small squares for all other projects. When adding project content, the client can choose whether the project will display as a large or small square.
To improve the full site search experience, results are grouped into categories. For example, if a user searches “Houston,” results are separated into three categories: Project Results (projects that include the search term), News Results (news stories that include the search term), and Additional Results (miscellaneous pages that include the search term). The goal is to present the user with results that are more organized and easy to understand.
Fast Load Time
In order to achieve a fast load time (97 on Google Page Speed), we implemented a number of front-end best practices including:
- HTML, CSS, SVG, and JavaScript minification (in part thanks to the Speedy module)
- Inline critical CSS in the
<head>of the page and asynchronous loading for the rest of the page - JavaScript moved to the bottom of the page, and script execution deferred via hook_js_alter()
- Image optimization via the ImageAPI Optimize (or Image Optimize) module using pngquant, opting, pngcrush, jpegoptim, jpegtran, and jfifremove
- Drupal core page caching for anonymous users, compressed cached pages, and CSS/JavaScript aggregation
- Resource prefetching and DNS prefetching
- Apache server configurations
Efficient Content Management
The firm’s marketing team wanted a CMS with a user-friendly back-end admin experience. After replacing the custom CMS with Drupal, all content — from the Home page and Project pages to leadership bios — can be quickly and easily managed.
Certain content types — including leadership bios, careers, and locations — have the potential to be used in several different parts of the site. To save PGAL’s staff from having to reenter content in multiple places, we made these content types entities that are then pulled into their assigned pages. For example, details about each of the firm’s 11 locations were entered into the CMS once, but this content is pulled into both the Locations page and the Careers page via the Entity Reference module. The same is true for client names; if a client is listed on a published Project page, that client’s name is automatically pulled into the master list on the Clients page.
Development Process
In terms of development, this project took three months to complete. TOKY used agile project management and had milestones every week to review and test specific components of the site. The site has been tested in the latest versions of Chrome, Firefox, Safari, Chrome for Android, iOS Safari, and Internet Explorer versions 10 and 11.
Outcome
Comparing April 11, 2015 through April 21, 2015 (old site) and April 11, 2016 through April 21, 2016 (new site), the redesign led to:
- 19% increase in new users
- 22% increase in page views
- 15% increase in pages per session
- 31% decrease in bounce rate
- 59% increase in Page Speed Score (61 in 2015 vs. 97 in 2016)
We submitted a patch to the Views Infinite Scroll project that fixes a JavaScript error: https://www.drupal.org/node/2661994
Also, we reviewed contributed patches in the following issue queues:
Eric Thoelke, Executive Creative Director
Jay David, Interactive Creative Director
Melissa Allen, Senior Web Producer and Strategist
Katherine Leonard, Content Strategist
Rob Hutti, Designer
Daniel Korte, Developer
Mike Watt, Developer
