Philadelphia (Official Visitor Site)

Philadelphia is a city of loyalists. Beating the drum for this great city comes as naturally to its residents and visitors as the desire to run up the Rocky steps. But while Philadelphia is proud of its icons—including the one with the giant crack—there’s the Barnes Foundation, the Magic Gardens, and countless other Philly institutions people need to know about. Happy Cog’s Philadelphia contingent has longed for the opportunity to work on a project to help get the word out about Philadelphia. In January of 2008, we got our chance.

That’s when Happy Cog began discussions with the Greater Philadelphia Tourism Marketing Corporation (GPTMC) about refreshing their web presence, located at gophila.com (now available as an archive). The original site launched back in 1997, and over a decade it had become one of the organization’s most important marketing vehicles.

But, as any site does, gophila.com started to show its age over time. It needed a facelift, and the design’s DNA prevented it from optimally engaging visitors with vibrant, dynamic, and engaging content. The site was also hampered by excessive navigation, which confused users instead of helping them gain their bearings. Lastly, the old site had no strategy for the social web.

Happy Cog and GPTMC tackled the user experience from the perspectives of Philadelphians and tourists alike. In addition to scrutinizing piles of user research data, Happy Cog’s own User Experience Director had just moved to Philadelphia and provided a bonus “outsider” perspective.

Changing perceptions

To widen a visitor’s perspective, fresh aspects of what makes Philadelphia unique needed not only to be promoted, but celebrated. The site had to be:

The revitalized design.

Upending preconceived notions of the city was no easy task. Happy Cog’s solution was to not avoid Philadelphia’s classic icons, but to craft a stronger holistic portrait of the city by also showcasing some of its lesser-known gems. Thankfully, for a period of years GPTMC had been amassing an impressive library of photo assets that documented the city’s blossoming neighborhoods, restaurant scene, architecture, and night life. Happy Cog’s recommendation was to combine these beautiful images of inspiring locations with a friendly editorial voice that was more consistent with a travel magazine. This highly visual approach (supported by a strong and appropriate content platform) not only enhanced the site’s ability to engage visitors, but it also assisted with trip planning activities. Presented as heroic panoramas, the stunning visuals and accompanying text subvert preexisting expectations of Philadelphia while highlighting helpful pathways for learning more about the city.

Simplifying choices

Site visitors were overwhelmed with choices on the old Philly tourism site. Mixing category-based and promotional navigation provided far too many pathways, resulting in an increasingly fragmented architecture that left visitors confused. With money tight and the landscape of tourism destinations becoming more competitive, that confusion was something Philly could not afford.

Analyzing existing content and architecture as well as previous research done by GPTMC revealed three critical behaviors the site architecture needed to support:

Happy Cog’s solution was to model the trip planning process out step by step, and then analyze existing and proposed content for its ability to support visitors every step of the way. For example, what are the motivating factors for choosing a city? A museum? A restaurant? A method of travel? A hotel? By using the trip-planning experience to frame the site’s navigation, visitors to the site can browse more easily to the content that makes the most sense. The result is a sublime balance between a planning tool and a rich category browsing experience, with logical support for taking action when and where it’s most appropriate.

Making it all manageable

The back-end management of the legacy Philly tourism site was facilitated through a series of custom publishing solutions and off-the-shelf blogging tools, none of which played particularly nicely together. Midway through the project, it was obvious that there was a need to devise a better way to manage site content. We wanted a better way to integrate these disparate publishing tools, and needed a single content management solution that was flexible enough to handle the many custom publishing needs of GPTMC.

ExpressionEngine to the rescue

Wikipedia lists over 140 publishing platforms. Some excel at static sites, some at blogs, and some are most appropriate for social media sites. Philly needed a system that was great out-of-the-box, and flexible enough to allow us to extend it to become great in new areas. ExpressionEngine (or EE) was our choice for this project.

EE enabled GPTMC to distribute content authorship across the organization. This was crucial, as GPTMC planned to manually migrate several hundred entries from a legacy MS SQL/XHTML publishing platform to a MySQL/Textile system. The straightforward administrator UI helped authors of varying skill levels dive right in and get to work, before Happy Cog created a byte of template code. This process also fit beautifully into Happy Cog’s development style, allowing our developers to code XHTML with real-life website copy. There was never a worry of real copy breaking the layout after coding was complete.

Similarly, a rock solid, and well documented, templating language allowed the Happy Cog team to distribute the development workload. Front-end and back-end developers worked in tandem to code out pages. Front-end developers were able to dive into EE’s plain-English template language and hook up basic site functionality concurrently with their front-end XHTML development. Back-end developers, meanwhile, were free to focus on coding custom functionality into the system.

Happy Cog implemented several custom front-end JavaScript slide shows, which remain highly accessible as well as fully editable. We customized the system in order to devise a content entry paradigm that kept specific photos together, while allowing the ability to promote featured photos to parent pages.

Working in tandem with Philadelphia-based Seer Interactive, an ethical search engine optimization (SEO) firm, Happy Cog implemented a large-scale 301 redirect tool, which allows GPTMC to manually or programmatically specify routes to ensure that their search rankings do not deteriorate as a result of the URL change.

Happy Cog also managed several third-party integrations through the back-end. This included pulling dynamic content from Google, Philly Fun Guide, WordPress, Twitter, Facebook, Flickr, and YouTube. These integrations imported structured data in a wide variety of formats, including XML and JSON, and were integrated seamlessly into the site.

Read More

Responsibilities

Information architecture, graphic design, user interface design, CSS/XHTML template development, CMS customization and integration. Launched 13 January 2010.

Selected Work