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]

The UX Certification Debate

The UX Certification Debate

This past June, in London, an unassuming conference-goer attended a UX workshop and days later became the first person to be UX Certified by the Nielsen Norman Group (NNG). Sounds pretty cool, right? The lucky guy, Ian Thompson, responded “The courses give the knowledge to work with and challenge our delivery partners and the Certification will allow me to achieve credibility in these endeavors.” So who wouldn’t want a certification from one of the most respected User Experience, Research and Training groups? And could this be a bad thing?

ux-debate
Apparently some people thought so, at least initially. Soon after the first certification was handed out, events like The UX Certification Debate popped up. Unfortunately I was unable to find any talking points or recap from this event so it got me wondering what complaints people could have. Honestly, I couldn’t come up with much and here it is:

It’s just a money grab by NNG

futurama_moneyThe argument here would be that NNG has created these certifications as a way to boost their Training attendance. While I can see the argument that it’s a pure business move, I just don’t think that was their goal. I think the goal of the certifications is to standardize our industry a bit more. I don’t think it’s a bad thing and I think NNG’s reputation will certainly give it some clout. While they wouldn’t be the first legitimate group to do this (Human Factors International has had their certifications for a few years already), I could see this developing more traction.

The UX field evolves so rapidly, today’s certification will be meaningless soon

NNG-CertsTo me, this has absolutely no validity. I’ve attended a number of events over the years and I don’t look back at any of that time and money invested as being useless now. First, it made me better at my job at the time. Whether it was new techniques I was learning or validation that I was already doing many things correctly, all of it helped me at the time. Second, it expanded my experience. On top of that, most events are a great place to network. A certification curriculum would be a great place to meet other like-minded peers that are passionate about what we do.

Certifications will automatically advance my career

I think the less experienced you are, the more the certification would actually help you. Like most conferences, I think they would be a great way for inexperienced people to dive in and very quickly vastly expand their knowledge. Still though, I think they could have value for even the most experienced. Anybody that goes to a conference and says they didn’t learn a single thing either didn’t pay attention or has a serious case of denial.

I can forego higher education and just get a certification

belushi-animal-houseEven though I think these courses could be very effective for beginners, I don’t think they could completely replace a degree in the field. I’m not saying that a degree is absolutely mandatory, but I think it builds a strong base. While the conference material may be more dynamic and fast-paced, you’re likely missing out on some key principles that couldn’t get covered in just a few days. You’re also not getting the repetition and depth of principles that a sustained curriculum offers. When I’m looking at resumes, a degree will almost always trump a certification. Now a certification on top of quality field experience is a different story. Could a certification tip the scale between two similar resumes? Sure, but it’s certainly no guarantee.

If nothing else, having a certification will show that you are dedicated to furthering your development. I’d like to make it to one of their UX Weeks soon so I can follow up on this article with my experience. Until then I’d love for someone that has been certified to provide their take on the process. Let us know what you thought!

SEO is a Team Game: Intro

SEO is a Team Game: Intro

Google’s search ranking algorithm factors in over 200 different things. The exact list is not public but there are a number of generally agreed upon factors. I spent time digging through that list, and others, and it was apparent that the old adage ‘content is king‘ still rings true with search engine rankings. But content isn’t a one man army, nor should it be. Despite the fuzziness that we have around SEO, or rather because of the fuzziness, SEO must be approached with a team effort.

Google SEO

I have taken a large number of commonly agreed upon SEO factors and grouped them by team responsibility. I split up that work into a series of posts that will follow this post. There was some overlap and debate about which team would handle a few items so you may find a few items in a different spot than you would arrange them. Here are the groups I split them into:

In this series:

[voce-related-posts]

Design for viewports, not devices

Design for viewports, not devices

Old habits are hard to break. That’s probably why I still use TextMate when there are more robust editors out there like Sublime and Atom. You get comfortable with something you have used so much that you just keep using it, despite knowing that things have changed.

Your responsive web design workflow might be suffering from such a habit. Tell me if this sounds familiar: You’re in design mode for your responsive site and it’s time for deliverables. You present the client with your designs, starting with the Desktop design before showing the iPad view and then the mobile view (probably in an iPhone wrapper). This has been the standard process since iPhones changed the industry and the rest of the competition poured in. But that was a few years ago, and in an industry that is evolving so rapidly, this is already archaic.

responsive-design

If you design for desktop first, the mobile experience usually suffers. Ignoring the mobile experience would be ignoring industry trends.

You shouldn’t be thinking how your site will look on an iPhone, Galaxy, iPad, etc. The device is irrelevant, it’s the viewport (that is, the size of the screen) that matters. Using a tablet breakpoint based on the iPad dimensions has been common practice. But what are the dimensions on an iPad in landscape view? Essentially it’s the common desktop experience. If you design your iPad experience and desktop experience separately, you’re going to have issues.

Instead you should be designing for available space, viewports. For the best chance at a clean, optimized, fast performing site, you need to start with the mobile design. Mobile design, not iPhone design. Sure you can use common phone sizes as a range of what to design for, but it’s important to remember that it is a range. Anywhere from 300-400 pixels for your initial design is a good starting point. Development should be using a fluid grid or percentage-based styles, so your design will flex to fit the viewport.

As a bare minimum, you’ll have a breakpoint for the smallest devices and another at the common tablet width of around 768 pixels. I like having a breakpoint between the two, to modify columns that are getting too wide. This is a prime example of how we don’t design for devices, but available space. Things like sidebar elements commonly get nudged below the main content on smaller devices, and they often end up expanding to fill a space larger than they do even on a desktop viewport. This lack of planning leads to a poor looking design.

modular

Modular design allows for each element to look its best at any and every size viewport.

For the most flexibility, elements should be designed more modularly. Breakpoints are not a ‘one size fits all’ solution. Just because the navigation menu should collapse at a certain point, that doesn’t mean that everything else should only adapt then.

If the designer is not the person doing the front end development, the two need to work together closely on this. Designers shouldn’t be making 12 different comps in order to show how each element responds on different viewports. But overall design decisions also shouldn’t just be left up to the developer. From experience I can tell you that designer and developer expectations are different. This is a great spot for in browser design with the two working together.  More communication before development starts will lead to much less time spent later, and less code bloat from last–second modifications. After all, the main goal is a great user experience, and you can’t have that with poorly planned or executed design.

BTN Reaping the Benefits of Responsive Design

BTN Reaping the Benefits of Responsive Design

BTN-Desktop-TopLast summer one of our long-standing clients, Big Ten Networks (BTN), approached us about taking their existing site and making it responsive. We did the initial design a few years ago before responsive design was what all the cool kids were doing. We had continued to improve the site since the initial launch but we left the responsive facelift for the ‘Future Improvements’ bucket. And so there it sat, lonely, waiting for someone to come play.

BTN had done a good job of tracking and, more importantly, analyzing their browser statistics. They knew that they could no longer ignore mobile users. The nature of their site, a sports site with a mobile TV product (BTN2Go), meant that mobile users should make up a significant portion of their site visitors. Their previous mobile traffic was almost non-existent, and what they had was mostly tablet users. They knew they were missing out on providing their visitors an enjoyable experience.

This is the part where you’ve just finished renovating your kitchen and realize you should have taken a picture before the work started. You know the non-responsive experience though: Load page, pinch/spread to find the area you’re interested in, read, swipe down, click a link, repeat the process on the next page. Photo galleries? Forget about it.

BTN-TabletWe knew that one of our main goals would be to make the mobile experience much more focused on media because that’s what people were going there to see. Galleries and videos are central to the experience so that was a key focus for the redesign. I use the word ‘redesign’ lightly because we wanted to make use of as much of the existing assets already available in order to limit additional overhead. We also needed to do all of this without affecting the current desktop experience. Some simple media queries and styles were added to make the tablet version a slightly slimmer desktop experience but we really wanted to make the smaller device experience… well, an experience.

I guess this design/development practice could be dubbed ‘Mobile Last.’ It’s less than ideal since we often take the ‘mobile first’ approach when starting projects from scratch, but sometimes this all the project allows. Retrofitting responsive functionality presented us with some interesting challenges, specifically regarding how to present the content so differently on a smaller screen using mostly the same code as before. I’ll get more technical on a follow-up post and provide some code examples, so let’s keep this at overview level.

BTN-Mobile-TopAs you can see from the mobile screen capture, media is king on mobile. We do a simple header with a menu icon and a search icon. Breaking News sits just below that when present. Then we pulled together the main loop(s) from the home page and display the most recent in a mobile friendly carousel. We provide a button callout for their TV service and then a mobile friendly ad. We follow that with a school slider so you can jump right to your favorite school’s section. More headlines are then presented below with large images to engage the user. An additional menu is condensed at the bottom for easy access to popular sections. The result is an engaging experience that drives traffic through the site. Don’t just take my word for it, check it out on your phone!

So it’s nice and pretty now, but was it effective? That’s a resounding yes! A month to month comparison between Fall 2012 and Fall 2013 shows an increase in traffic of nearly 35%, with the majority of that jump coming from the mobile boost. This alone was something everybody was excited about. With responsive ads integrated cleanly, a byproduct of the success has been the increase in ads being served. While this was not the primary goal of this project, it was something that we knew would be a byproduct of a successful execution. This can be a key selling point to clients that are still hesitant to invest in making their site responsive. In the end, users are happier, your content/message is getting seen by more people, and there is a opportunity to improve advertising execution.

The ever-changing device landscape means this responsive design project is far from over. New challenges in ad positioning and navigation lie ahead, as more and more devices are being created that have a screen to view your site. We must always be thinking about how we can deliver each client’s content best to whichever device users are viewing it on.