Tocquigny

Agencies are known for being their own worst clients. Like the old story about the cobbler’s kids having shoes that are falling apart, agencies typically struggle to complete their own internal projects. The problem is that, while most agencies have processes for web strategy, planning, and design that they use with clients, they almost always ignore them when working on their own projects.

This problem can be attributed to two factors:

1. Agencies tend to give other projects higher priority and don’t apply the time, energy, or resources needed to ensure success
2. Agencies think that because they know their brand and target audience so well, they do not need to plan

Two months ago, we made the decision to redesign Tocquigny.com and, needless to say, everyone at Tocquigny wanted to avoid this pitfall that is so common with agencies. To ensure success, we decided to run the project exactly the same way we would run any project for one of our clients. As a result, we were able to successfully plan and launch a site that both demonstrates our core competencies and effectively communicates our brand pillars.

In addition to ensuring the successful relaunch of Tocquigny.com, this project provided a great opportunity to share a hands-on case study of our strategic planning process for websites.

Step 1: Brand and audience definition

Prior to beginning work on the website, the Tocquigny research and strategy group went through their full planning process to craft messaging pillars, audience personas, and an enterprise map showing how the website integrates with other marketing efforts the agency is launching to promote itself. This work was critical in laying the foundation for web planning as it established goals, identified audience needs, and showed how the website fits into the bigger picture of the agency’s other marketing initiatives.

Step 2: Competitive Analysis

The competitive analysis is a critical step in all web initiatives where we review other sites that either compete directly, share common objectives and audience segments, or elicit the emotional response we desire.

In the case of Tocquigny.com, the four messaging pillars identified by our research and strategy group were Knowledge, Business Accountability, Creativity, and Innovation. Because the objectives for Tocquigny.com spanned the spectrum from demonstrating marketing and business expertise to showcasing creative talent, the sites reviewed in the competitive analysis needed to span the same spectrum. To aid in identifying best-in-class sites, we divided the spectrum into three categories:

1. Creative/interactive agencies
2. Consulting firms
3. News/knowledge portals

The end result of this review and analysis was that we were able to identify a full set of best practices for content and functionality that could be adapted for Tocquigny.com.

Step 3: The Content Matrix

There is a chasm that must be crossed in every web project where requirements and big ideas are synthesized into a final feature set. Difficulty getting alignment with key client stakeholders on what is — and is not in scope — can paralyze a web project before it even gets off the ground.

To address this challenge, we’ve developed a planning tool that we call the Content Matrix, which helps us to get alignment quickly and document the planned direction for web projects in an easy-to-understand chart. The best way to understand this process is to walk through the steps we took to develop the content matrix for Tocquigny.com:

1. We collected all input requirements and ideas for the site. This included any thoughts we had scribbled down, requirements we received from senior partners, and ideas that came out of our competitive review.
2. We conducted a series of whiteboard sessions — first with just the project team, then later with our agency partners — the “client” — to capture a wish list for the site and discuss each item’s alignment with business objectives and audience personas.
3. Following the last whiteboard session, we organized the results into our deliverable, the Content Matrix — which is essentially a grid aligning potential content/functionality line items against audience segments and site objectives.
4. Finally, we assigned prioritization values based on effort and impact and added them as columns on the far right side of the Content Matrix.

Step 4: User experience design: the design behind the design

Once the scope of content and functionality had been defined, the next step in web planning is to determine how all of these features should be assembled to form a cohesive site. We call this step User Experience or UX Design, and it is critical in our design process.

“Design” is a broad term — especially when designing for the web. UX Design, as we define it, covers all of the design disciplines that should be practiced before we begin thinking about color, fonts, and the overall visual design of the site. Industry terms for this include Information Architecture (IA), Interaction Design (IxD), Usability Design, Usability Engineering — to avoid terminology overload, we simply roll them all up into User Experience (UX) design. Boxesandarrows.com, an online magazine for user experience designers, has a great description for this discipline, calling it “the design behind the design.”

Our primary concern in this stage of web strategic planning is to create a framework for finding and interacting with content that is intuitive and engaging for the intended audience. The key deliverable from this process is the Site Requirements Specification or SRS. You can think of the SRS as the blueprint for a web product. For Tocquigny.com it included the following elements:

• Nonfunctional specs — these are general requirements that impact the site as a whole. They include, but are not limited to, browser requirements, accessibility requirements, content management system parameters, screen resolution considerations, and SEO guidelines.
• Taxonomy or site map — this is a hierarchical view of the site that defines the primary sections for content, outlines the primary and secondary navigation menu systems, and identifies the number of page levels (primary, secondary, tertiary, etc.) that need to be considered when designing the interface.
• Domain model — this is an abstracted view of all data “objects” that will populate the site. It serves as a vocabulary unification tool by naming each object and outlining all of its properties. For example, a site that includes a News/Press section might define a data object named “Press Release” which might have properties including date, headline, summary text, full text, etc. The content management system for the site must fully support the objects defined in the domain model.
• Use case scenarios — these are set of instructions that step through how a user will accomplish a task (1. User clicks button; 2. User is shown page X, etc.) The tendency is for UX designers to get overly detailed in this step of the process; however, we try to keep our user case scenarios fairly simple and high level — with just enough detail to ensure everyone understands how the site will work.
• Annotated wireframes — this is the real substance of the SRS document, consisting of a rough sketch of each unique page on the site. These provide an overview of content and functionality for each page along with detailed directions for design and implementation.

Step 5: Technology platform evaluation

At this point, the planning and design of Tocquigny.com took a split path: The technology team worked on how the site would be built, while the creative team worked on how it would look.

Our approach to technology implementation is to adapt existing technology systems where possible, rather than starting from scratch. In the case of Tocquigny.com, while we had defined a fairly complex domain model for content, the Content Management System (CMS) required to power it was definitely not unique enough to warrant building from square one. Just as we would do for a client, we evaluated multiple CMS platforms, creating a comparison matrix showing each platform lined up against the requirements for the site.

In the end, we decided to build the site using Expression Engine because of its robust feature set and the flexibility afforded to us by its use of open-source technologies.

Step 6: Design concepts

While the development team was setting up Expression Engine to meet the requirements of the SRS, the creative team was bringing the site to life through design concepts. We consider this the last step in web strategic planning and design, and while not necessarily the most important, it is definitely the most fun.

“Design concepts” establish the look and feel for the site through one or more page mockups — for Tocquigny.com, we used the home page and one content page. We assigned three art directors to work on the concepts independently, giving them all the SRS along with a creative brief summarizing the Tocquigny brand attributes that we wanted the site to convey. After several rounds of internal revisions, the team presented three concepts to our “client,” the agency partners:

One of the first things you’ll notice when looking at these is their similarity. Because they were all based on the same two wireframes from the SRS, they have the same content elements and visual hierarchy. We also had the art directors use the same double-helix graphic on the home page, so it would be easier to focus on the rest of the design instead of the feature area, which will be changing on a regular basis.

Effectiveness in communicating the essence of our brand was the primary criteria our partners used to evaluate these concepts. Will people get the same feeling when visiting our site that they get when visiting our office space? Will they have the same emotional response as if we were giving an in-person presentation? Ultimately, concept B was chosen because of its alignment with our brand. Several more rounds of revisions were made to the selected concept before it was finalized and ready to be passed into production.

Final Thoughts

Relaunching a brand online — particularly one that portrays so much personal investment — is not an easy process, but it does not have to be impossible. It does not even have to be painful. Most projects go awry when disciplined web planning is bypassed, and the “fun look and feel” elements are begun without clear direction. While this can be tempting, it rarely results in success — and the best-case outcome of this lack of planning is a site that looks great, but it probably does not accomplish the right objectives.

While it has not been a completely smooth ride, we’ve managed to accomplish our objectives for the new Tocquigny.com and avoid pitfalls common to internal agency projects. Hopefully you’ll agree the end result was worth the effort.