When you think of a brand, most people think of a company’s logo. However, a brand is much more than a logo. True, the logo serves as a central hub and baseline for the visual brand, but there is much more to it than that. Don’t get me wrong, a company’s logo holds a lot of weight as it is the first thing most people will notice. The logo also sets the tone for the branding of a company as well, so it is a very important piece of the puzzle. Let’s run through all the elements that compose a company’s visual brand.
Logos can quickly say a lot about your company and what you do, so it is important for your logo to mirror your mission in some way. Logos should always be rendered consistently, but you can have variations based on placement and usage. For example, you may have a default orientation but offer an alternate orientation for certain circumstances. Another common variation example would be a one color version of your logo. It’s important that all variations have the same essential qualities and not be dramatically different from one another.
You must be explicit about the usages in the brand guidelines so the logo is used appropriately at all times. Scalability is also a key component, as a good logo can scale up or down and be easily identifiable. If details are easily lost at smaller sizes, you might want to think about simplifying your logo.
Another large part of a company’s visual brand is color. Colors evoke feelings and emotions that work at a subliminal level. You want to make sure you use a color palette that illustrates your core company beliefs and directives so that you communicate that to your audience. You would not only use these colors in your logo, but also in other brand materials such as your website, business cards, promotional materials, presentations, documents, printed materials etc. When creating your color palette, you’ll want to choose 2-3 key colors to use. Too many colors can be overwhelming and can make the branding muddy. Once the color palette is determined it is important to be consistent. You’ll find that consistency is key when it comes to branding. Inconsistencies send confusing messages to your audience and make you look unprofessional as well.
Believe it or not, but the typefaces or fonts you use communicate personality and set tone for your audience. A study called the Aesthetics of Reading even found that good typography induces a good mood. First, it is key, that you choose fonts that are legible for obvious reasons. Second, you want to use fonts that fit the tone of the brand. Serif fonts, which have letters with short lines coming off the edges, are view more as formal and traditional. Sans-serif fonts, which have no serifs, are viewed as more informal and playful. Sans-serif fonts are also more suited for digital media like website and applications. Script fonts resemble handwriting which can make them hard to read. Lastly there are decorative fonts, that are highly unique and very informal. Decorative and script fonts can be used for headings or in logos, but aren’t best used for body copy. When creating brand guidelines, you’ll also want to determine the proper letter spacing and line height for text as these also important factors your audience will be influence by.
Visual branding creates consistency, trust, credibility and familiarity. Making the wrong choices with your visual brand identity can be disastrous. Think about your company’s message and mission and make sure the logo, colors and typography reinforce them. Create a brand style guide that you can share with all your employees so that they have a reference to maintain consistency. If need be, police the usage of branding elements to make sure everyone is being compliant as not everyone respects or understands the value of consistency. With a harmonious visual brand your company will have a loud and clear voice that speaks volumes to your audience.
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
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
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.
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.
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.