Modernizing the Porter Novelli Web Presence – Part Two: Discovery & Planning

Modernizing the Porter Novelli Web Presence – Part Two: Discovery & Planning

In mid 2013 Porter Novelli decided to invest in a redesign of their aging website.  Their website, now antiquated, no longer matched the current brand guidelines and failed to appropriately represent them when compared to their primary competition.  Porter Novelli consists of 90+ international offices but their website didn’t give individual offices much presence on the website nor a public voice.

Porter Novelli website Information architecture

Porter Novelli website Information architecture

The redesign kicked off with a multistep discovery phase to help in the planning of the new website.  The steps consisted of competitor analysis, stakeholder interviews and content analysis.  Primary competitors were provided and their websites were analysed and strengths and weaknesses were captured.  Standout features and content structure were the focus of the evaluations to identify themes and differentiators.  The purpose of the stakeholder interviews was to determine what from the existing website was still important and to identify what was potentially missing.  It was also important to identify publishing needs to make the website easier to maintain.  Key executives, select managing directors from larger international offices, as well as the website’s content manager were included in the interview process.  Findings from the competitor analysis were also used in the conversations with the stakeholders as fuel for discussion.  Lastly, content analysis was conducted to aid in the creation of the revised information architecture. Information architecture describes how content should be organized and presented, and how it should be linked together through navigation and menu systems.  The aim is to ensure that customers can find the information they want, easily and without confusion.

The first project deliverable, which aided in getting an overall picture of the current website, was a content inventory.  Once the discovery phase concluded we had a firm understanding of where the current website stood, including its successes and failures.  After talking to the stakeholders, we knew what features and content were important going forward.  Looking at the competition allowed us to find the industry baseline which set a benchmark for us to improve upon.  The content inventory, along with the findings from the stakeholder interviews and competitive analysis were analyzed and the second project deliverable was constructed.  The second project deliverable was a revised content flow showcasing a revised information structure and identified key variables that would later be used in the development phase.

Porter Novelli website redesign wireframes

Porter Novelli website redesign wireframes

The sitemap was also used in identifying the appropriate structures and menu systems which were then used in the website wireframes which were the third deliverable before starting design and backend development.  The wireframes served as a visual guide that represents the skeletal framework of the website.  Mostly void of style, colors or graphics, wireframes allowed everyone on the team to focus on functionality, behavior and the priority of content.   The wireframes also serve as a bridge between the newly developed information architecture with the visual design of the website.  They also aided in planning for all the devices.

We ended up with goals and a revised content outline and structure that set the foundation for the work going forward allowing us to start the website planning. With the discovery and planning phases behind us, we could kick-off the next phase of the project which is the design phase.

 

Modernizing the Porter Novelli Web Presence – Part One: Overview

Modernizing the Porter Novelli Web Presence – Part One: Overview

We recently had the opportunity to work with our parent company, Porter Novelli, in the modernization of their website.  What do I mean by “modernizing”?  Well, it has multiple meanings in the case of this project.

Porter Novelli Website Screenshots

The old website had quite a few years under it’s belt and no longer properly represented the agency.  While the logo had been updated, the website was very dark with black backgrounds that made it uninviting.  With the new website we took the opposite approach and made the website lighter by using large, high quality photographs and ample use of white space.  This made the new website much more engaging and a pleasure to browse.  The white background worked well with the orange and yellow brand colors which allowed them to pop and gave the website an energetic personality.  We also utilized modern web fonts which increased the legibility of the copy.

The overall messaging needed to be updated as well, so our content team rewrote everything from the ground up to ensure the right message was getting through to our visitors.  The old homepage was primarily focused on company news and it required digging to figure out what services the agency offered to the public.  The focus of the new homepage was not only to feature what Porter Novelli can do, but to also showcase internal news as well.

Porter Novelli is a global agency with a local focus, and their old website didn’t reflect that.  It also focused mostly on corporate information and didn’t let the individual offices have much exposure, so we set out to fix that for the new website.  The old website could be used to locate offices throughout the world and obtain the primary contact information, but that was the extent of it.  With the new design and structure, we built in a way for each office to customize their landing page giving them control over what visitors see and giving them a stake in the final product.  Each office now has the ability to feature their employees, post items to their portfolios, post news and blog articles.  This allows each regional office to have a voice on the main corporate website, removing the need for the regional offices to build and maintain their own individual websites.

And most importantly, we made the new website responsive.  During our competitive analysis we found that a majority of the agency’s competitors didn’t have responsive websites.  This was one way we knew we were surpassing the competition by making the Porter Novelli website accessible from mobile and tablet devices in addition to desktop computers.  The end result was a light, inviting, modern and responsive design that looks great and functions well across devices.

In part two of this series, I’ll be detailing the specifics of our processes during our discovery and planning phases of this project.  It was during discovery phase we found the issues with the current website and determined the goals for the website redesign.  In the interim, check out the new Porter Novelli website.

[voce-related-posts]