Populous

Populous

An elegant architectural showcase that works great on mobile, allows for many unique content types and is easily managed in WordPress.

Every Project Starts With a Beginning

We pored through the designs and details provided by Milkshake in order to begin defining all the content types, templates, and relationships (taxonomies). In short, we began creating both a design model and content model in order to map the needs to WordPress’ abilities (post types, archives, custom page templates, etc.).

Artifacts provided by Milkshake

We were handed dozens of source material documents outlining the final way the information architecture had been determined, relationship mapping denoting where related content is to be referenced and shared, a functional specifications document inventorying the features and expected behavior on various views, 50 Photoshop design files demonstrating nearly every template and state change imagined.

Making Sense of the Matter

From those very helpful source materials, we then started to translate the information into artifacts that would be meaningful and conductive to our team’s planning and development process. Information architecture was translated into post types, relationships started to identify taxonomies, and content types exposed potential URL structures. Full-size PSDs became a starting point for review and identification of every feature, every requirement, every related piece of content and allowed us to reconcile with the functional specifications provided.

For instance, some content and views called for much more than a standard two-column template. In the case of the “Expertise” pages, we determined the content needs were complex and unique enough for each post we proposed implementing Carrington Build. This would allow the client to drag and drop and create custom layouts for their custom content needs (now and in the future). From there, we also identified the need for a custom vertical “tabbed box” Module that had not been articulated previously and was only discovered after re-thinking the content as modular blocks on the page. After implementing Carrington Build and the custom Module, this allowed the page layouts to fit the unique and evolving content needs.

Our development planning involves representatives looking at all aspects of the project: design, development, project management, and content architecture and results in a well-documented, thought-through artifact that serves as our guide to delivering a high-quality result.

As we continued to flesh out a development plan, we captured open questions, identified potential new features, found commonalities across multiple templates that could be combined into one, and so on. Both back-end developers and front-end developers were responsible for coordinating on each and every page template to make sure no false assumptions were made or development considerations were overlooked. For instance, if the home page has a rotating series of quotations at the top, what is a seemingly simple interface has a number of aspects to consider: it needs to be styled, respond and resize in mobile and tablet views, have an interface to manage and add new quotes in the content management system, and the back-end system should cache the results of the series of quotes so it’s not making requests to the database more often than necessary.

Working closely with Milkshake and their design team, we were also able to suggest minor tweaks to the provided grid-based designs to leverage an existing JavaScript and CSS-based responsive layout. With some simple shifts and media queries we were able to fairly simply improve the browsing experience for mobile and tablet devices so that content resized, columns collapsed, and the layout responded well to the browser size.

In short, spending the time up-front to review, discuss, research, plan, decide, define, re-define, and document the project led to additional considerations improvements upon the original project plan. This all on top of the requisite level of due diligence needed to know what it is we’re all setting out to do, how it’s going to work, how it will be built, and when milestones will be completed.

populous-responsive

Architecting an Architecture Firm’s Website

As part of the content architecture and relationship definition process, we designed (and ultimately implemented) mechanisms in WordPress to allow data to be defined in one place but used in more than one situation. For example, using WordPress “Users”, a “Team Member” profile and biography information could be stored. That profile data can then be displayed on a “Team Member” post type (a dedicated landing page for each employee), and that User could also be selected from a “Team Member” taxonomy (such as when picking the participants in a Project to display everyone involved).

populous-bio

Being able to associate content with other “things” allows the website to tell a cohesive story. For example, while every Project has the ability to define “Team Members” that participated in it, those individuals could also be applied to public “Appearances” at conferences. People could also author and publish “Perspective” posts that lend more insight into the firm’s process, new technologies and techniques, etc. Given this, and the way we architected the site early in the project, this allowed the Team Member’s profile to show all activity across the site’s disparate content. We made this easily manageable in WordPress for a number of content types: team members, offices, and areas of expertise, for example.

Once all content types, relationships, features, and layouts were defined and reviewed by the client, we leveraged Carrington Core to easily and logically build the various views to match the provided designs. In some cases, some page layouts were similar enough we could re-use atomic Carrington Core templates and views and allow for a easily maintainable and consistent website.

Classy Features for a World Class Website

Working with the team at Milkshake was great because they were able to dedicate time with Populous to ideate and evaluate all kinds of fun and unique features of the website that came from profound business needs.

In many WordPress content management implementations the “Author” connection is used to define an explicit relationship between a person and a piece of content. For this site we had a much more robust set of business rules and needs to work around. This included pairing multiple team members to a project (years before more robust off-the-shelf solutions were created), but only allowing marketing staff (not associated with the project) to be the ones actually create and edit the content. In other words, John and Jill worked on this project, but Sally is the one who is responsible and allowed to manage this content. This required not only defining and maintaining separate user-to-content relationships, but also implementing custom permissions that allowed users without a full-fledged “Editor” role (reserved for individuals able to edit all content within the website) to make changes to content in specific areas.

populous-work

Another unique feature came from the fact Populous is a multi-national firm working on interesting projects all over the world. As such, it was decided that an interactive map would be a great way to allow users to browse projects and case studies and see both where and what kinds of projects have been completed. Using the Google Maps API, we built a solution that translated each project’s provided address into a latitude and longitude. From there, the system plotts a marker on a map. Beyond that, this custom-designed marker includes details about the project including a photo slide-show drawn from the post’s gallery, and a link to the full case-study (if applicable) thus extending the usefulness and navigability of the interactive map.

The Last 90% of a Project

We really enjoyed working on this project because we worked with a partner who had a great understanding and appreciation for: the technical planning and decision making process, the efforts involved to implement interesting and unique features, “getting their hands dirty” in some of the seemingly minor project details.

The preparation, design and development of a website is 90% of a project. The packaging, testing, content entry, re-testing, revisions, launch preparation, and so on, is jokingly referred to “the last” 90%. Being able to share responsibilities in testing, content entry, training and preparation allowed for this project to launch on a quick timeline as our organizational capacity was (more than) doubled.

Check out the final result.

Additionally, working collaboratively with Milkshake on behalf of Populous allowed for a greater number of, and higher quality, decisions made throughout the process. Whether it was re-defining a feature’s management expectations to meet an edge case or re-distributing footer content columns to match a new responsive-based grid layout, the ability to work closely together resulted in an excellent end result.

If this sounds like what you need and expect from a development partner, we’d love to hear from you.

Contact Us About Your Project

We love the opportunity to work with interesting teams on challenging projects. Our expertise in websites, web applications, WordPress and general best practices makes us a great partner for whatever you're looking to build.

Our team of professionals includes designers, developers and experienced project sherpas. Not only will the technical result be high-quality, but we will be your trusted guide throughout the process.

Get in Touch

Explore Other Case Studies