Since 1946, international architecture design and engineering firm PGAL has been creating innovative solutions in interior and exterior design for clients in many arenas, including airports, hospitals and residences. Knowing the wide scope of PGAL’s projects, St. Louis– and Denver–based design firm TOKY made sure that its portfolio site featured an easy way to navigate its extensive output through a filtered search system. “On the All Projects page, the user is presented with a full list of filters to choose from,” explains Jay David, interactive creative director at TOKY. “Once one filter is selected, further search options are automatically eliminated to correspond with results for the chosen filter. Once a user selects “Aviation,” for example, any filters that do not overlap with that category—like “Education” and “Recreation”—will disappear. This prevents the site from presenting the user with zero results—a potentially frustrating user experience.” 

Matching its innovative filtered search system, TOKY also kept loading times at a minimum by using front-end best practices—no easy feat with a site that features many big, responsive project images. Built in Drupal, the site features HTML, SVG, CSS and JavaScript minification on the front end, with inline critical CSS in each page’s head tag and asynchronous loading for the rest of the page. TOKY implemented an assortment of tools in Drupal’s ImageAPI Optimize, including pngquant, opting, pngcrush, jpegoptim, jpegtran and jfifremove, in order to facilitate image optimization, resizing and loading times. Part of a larger rebranding effort, TOKY’s site for PGAL took nine months to complete, and has seen a marked increase in pageviews and deeper interactions.