The sponsors and DOER asked PixelMEDIA to consolidate the 6 separate websites into one site and to create a single branded user experience: Mass Save.

Success Factors

Mass Save’s strategic objective was straightforward: to encourage residents and businesses to be energy efficient through increased awareness and through direct energy-saving incentives offered by the Mass Save sponsors. PixelMEDIA identified three key project initiatives to achieve this goal:

Define audience segments and needs-based categories

Working with a team that included each sponsoring company, PixelMEDIA helps to define the target audiences and segment them into Residential, Business, and Professional (contractors, architects, etc.) categories.

With the categories in place, the team defined the needs and goals of each segment, as well as the business rules that would determine eligibility, availability, and call to action for each.  At the same time, PixelMEDIA looked at the six original websites to determine each one’s value proposition; the unique content; and the engagement model and call to action.

The resulting organization model was based on a progressive sequence that matched incentives with the needs of users at several levels: Lighting and Appliances, Heating and Cooling, and Building a House or Addition. Customers could take small, low-cost steps—such as installing compact fluorescent bulbs (CFLs) or replacing a refrigerator—or learn about “whole house” solutions that offered incentives on heat and hot water systems, air conditioning, or home insulation. In addition, customers could easily browse across categories to learn about other energy-saving opportunities and make plans for improvements throughout their homes and businesses.

Since the initial launch, two more categories have been added to accommodate the long-term goals of deeper energy savings and enhanced awareness about energy efficiency: Home Energy Assessments and the Learning Center.

Develop a tool to deliver localized incentives

Because incentives were specific to certain sponsors, PixelMEDIA needed to develop a mechanism that prevented customers from seeing incentives that were not offered in their service areas. A ZIP-code based incentive finder was designed to let customers identify their location, fuel type, and building type.

Once a customer entered a ZIP code, the incentive finder matched it against a database of the sponsors’ service areas. The fuel type and building type data refined the search to return gas or electric incentives and incentives designed for single or multi-family homes. In addition, the incentive finder filtered out out-of-state customers and customers of municipal power companies. The system was intelligent enough, however, to return results to municipal electric customers who heated their homes with gas.

Deploy an enterprise-level content management system

The consolidation of the 6 websites provided an opportunity to reduce production and administrative costs. PixelMEDIA implemented an enterprise-grade content management system (CMS) for Mass Save that streamlines the process of creating, approving, and publishing new content to the website by multiple sponsors and vendors. PixelMEDIA also provides support services for major revisions and user training. In addition to reducing production cost and complexity, the CMS enables a structured approach based on the branded look and feel of the website.

Results

The consolidation of six websites into one resulted in a unified, branded user experience and a single destination to support a range of statewide and regional energy efficiency campaigns. The masssave.com URL provides a simple, easy-to-remember call to action in television, radio, outdoor, and print advertising and provides a recognizable, trusted presence at events across the state.

In the time since the 2010 launch, the website has seen an increase of more than 500% in visitors, and more than 5 million page views—an increase of 570%.

In May, 2011, PixelMEDIA implemented a customized analytics framework that will coordinate site activity—including conversions and downloads—with the growing spectrum of marketing efforts. The tracking tools have enabled the Mass Save team to accurately track the steady increase in active participation on the site.

In the fall of 2011, the residential section was redesigned to add the Home Energy Assessments and Learning Center categories and relaunched in conjunction with a range of marketing efforts.

In October, 2011, Massachusetts was ranked as the country’s leading state in terms of energy efficiency investment and initiatives by the American Council for an Energy-Efficient Economy (ACEEE). The State Energy Efficiency Scorecard ranks the states based on best practices and leadership in energy efficiency policy and program implementation. Prior to the launch of the Mass Save program, marketing campaigns, and website, Massachusetts had been ranked third.

The new Mass Save brand continues to grow as a focal point for sponsors, state agencies, contractors, and energy customers, with an increasing emphasis on no-cost home energy assessments, financing, and contractor participation.

Success Factors

Banner advertising on websites that included AARP and WBUR (Boston) would drive traffic to landing pages that featured a series of video interviews with people who had been affected by cancer. The landing pages were designed according to best practices for generating interest and conversions:

A/B testing of banner ads

The Jackson Laboratory wanted to gather data for future campaigns, so PixelMEDIA suggested a round of A/B testing of the banner ads. A/B testing means creating different versions of an ad or landing page and running both during the same time period. For example, out of 20 users, 10 would see ad A and 10 would see ad B. The click-through rate would be tracked to see which ad generated more interest,

Continuity of relevant terms and images

An important goal of the testing was to determine which combination of words and pictures best established and maintained the continuity—or “scent of information”—between the banner ad and the landing page. Maintaining this continuity is critical to helping readers remain focused and confident that they are moving along the right path toward their goals.

A prominent primary call to action

Each landing page included a large call-to-action that included a brief description of the offer, which included an online subscription to The Jackson Laboratory’s magazine, The Search. The strategy was to focus on a single call-to-action (subscribe to the newsletter) but offer several options for doing so: directly from the landing page, from a subscription page, or from the GYH website. The options allowed people gather more information if they wanted to before subscribing.

Solution

One set of banner ads featured pictures of the people behind the personal stories. The other was a set of bold graphic treatments of the headline, without people. The ads would be competing with other ads on the busy websites, so quick message comprehension was important. The Jackson Laboratory team wanted to learn which direction would be more effective for future campaigns, so multiple design and copy treatments were rotated in ad placements and results tracked.

Results

Despite the presence of competing photographic imagery on the target websites, the ads with images of people attracted significantly more click-throughs and generated higher conversion rates. The people ads and the graphic ads used the same copy, but the association between headline and person proved to be the stronger approach. For subsequent phases of the campaign, the graphic-only ads were suspended in favor of the people-based ads.

Success Factors

Early in the project, it became clear that busy, high-profile target audiences would need to grasp the substance and benefits of PKC’s product offering quickly before making the commitment to learn more about PKC. To differentiate the company from competitors that offered less reliable content, PKC wanted to convey the image of a company staffed by experts and driven by domain expertise. PKC and PixelMEDIA determined that a multi-part visual approach would provide a more engaging experience for time-strapped audiences and offer immediate differentiation from the competition.

Product Iconography

The first task was to create a set of icons representing the three core components of the PKC solution: Profiler, Advisor, and Explorer. Each product offered a progressively more detailed presentation of medical data, so the PixelMEDIA design team developed a set of icons related by color and shape. These icons would be used as signposts on the web pages, and as the primary actors in a set of animations that described the business value of the PKC products.

Business Value Animations

As the icons were developed, PixelMEDIA content strategists and designers developed the scripts, storyboards, and final files for a series of animations that would illustrate key product concepts on the home page and high-level product pages. For the home page, the focus was on the basic value proposition. On the product pages, a more detailed visual explanation provided an overview of the component and its place in the solution set.

Location Photography

To link the technology to the expertise behind it, PixelMEDIA recommended a design approach that layered the animations over scenes from the PKC offices. Working with PKC’s own photographer, PixelMEDIA provided written and visual direction for the photography, which features employees from every level of the company on nearly every web page.

Solution

In addition to creating and directing the icons and animations, PixelMEDIA drafted a new message architecture and website copy; developed a new site architecture and page wireframes; coded the website and animations; and managed the project from start to finish. The ability to complete all phases of design and production in one location helped to meet an aggressive timeframe, and simplified the challenge of working remotely with a client in Vermont. In fact, the entire project and all reviews and meetings were conducted by phone or web.

Results

PCK can now go to market with its new product set, confident that the website will support its long-term marketing effort. Its sales team can now use the website as a virtual presentation, walking clients through the product set and using the graphics in their own materials and presentations. The website also serves as an internal communications and recruiting tool: its visual explanations and concise messaging helped the company communicate its new direction to current and future employees.

Success Factors

Empirix had a solid internal working group in place to drive the messaging and content of the new website, including the re-alignment of its extensive product offerings with its new solutions framework. In addition, Empirix was developing a new logo and brand identity elements that would be incorporated into the new website. PixelMEDIA identified 3 key elements needed for a successful outcome:

Message Architecture

PixelMEDIA experience designers worked with the Empirix team to focus the company’s value proposition and to articulate a set of proof points for audience segments that needed to design, test, and deploy large call centers and customer service operations. The message architecture stressed a broader solution-based approach built on a proven portfolio of products, and was used by the Empirix team as a guideline for copywriting for both online and traditional media.

Information Architecture

The experience designers at PixelMEDIA created a full inventory of the Empirix website and worked with Empirix to determine which content best supported the new positioning and where content would need to be edited or created. Using the inventory, PixelMEDIA created a new site architecture that put solutions at the forefront while providing a clear and logical organization of the Empirix product portfolio.

Content Design

The goal of the architecture was to present products in the context of a customer challenge and Empirix solution, and to help customers focus on the content that was relevant to their situations. A set of detailed wireframes was created for each level of the website to visualize how the content would be organized and presented on screen. PixelMEDIA also produced a set of Microsoft® Word® content templates and a style guide to help the Empirix team draft and edit page copy within recommended word and character counts.

Solution

Using the wireframes and the new Empirix design elements, PixelMEDIA designers created the Adobe® Photoshop® layouts that would be used to build the final HTML templates. A clean, 3-column grid provided put the new content front and center, while providing clear navigation and focus areas for related topics and calls-to-action. With the final designs and approved content from Empirix, PixelMEDIA’s development team coded and QA’d the new website and spent a full day with the Empirix developers to ensure they had the information needed for a successful launch.

Results

The new Empirix website went live in November, 2011. The redesigned website gives Empirix a powerful new focal point for its outbound marketing programs and news releases. In addition, the website now supports a sales process that is centered around solutions, and helps Empirix to deliver a higher-level value proposition to higher-value customers at the enterprise and solution-provider levels.

Success Factors

The sponsors and DOER asked PixelMEDIA to consolidate the 6 separate websites into single Mass Save website and to create a unique brand identity. The new brand would serve as a recognizable focal point for a wide range of online and traditional marketing activities, and having a single brand would reduce the cost and complexity of maintaining multiple marks and identity systems. PixelMEDIA identified 3 key elements needed for a successful outcome:

Stakeholder Input

PixelMEDIA conducted a one-day workshop with the sponsors to map Mass Save brand attributes against the emotional and rational drivers for the three main audience segments: residential customers, businesses, and industry professionals.

Message Architecture

Using the resulting brand attributes map, PixelMEDIA worked with the sponsors to developed a value proposition and a set of key messaged based on “Savings through energy efficiency,” “Ease of access,” “Trust and expertise,” and “Investing in the future.” The resulting message architecture continues to serve as the framework for writing the Mass Save website.

Mood Boards

The PixelMEDIA Creative Services team presented a set of “mood boards” to sponsors and stakeholders. A mood board is a set of colors, images, typefaces, and other design elements grouped to convey a feeling or mood—futuristic, earthy, businesslike, etc.—and to elicit a “gut” reaction. The Mass Save “neighborhood” that appears at the top of each page reflects the positive reactions to a warm, “traditional” approach that would speak to a diverse audience that included residential customers, businesses, and trade professionals.

Solution

Based on the approved mood boards and message architecture, PixelMEDIA produced a complete visual identity for Mass Save: logo, typography, colors, and supporting imagery. The approved logo continues the “building” theme with houses and multi-story buildings against a sunburst. The logo and brand elements provided the foundation for the design of the website and were distributed to the agencies that were creating campaigns and content for Mass Save. PixelMEDIA also produced a design and editorial style guide to ensure that the brand elements are properly applied in order to remain legally protected.

The resulting visual design and editorial tone reflect the spirit and mission of Mass Save as well as the needs of its audiences: easy access to incentives and information; clean, simple controls; and a commitment to helping customers understand the many energy-saving opportunities available through Mass Save.

Results

The consolidation of six websites into one resulted in a unified, branded user experience and a single destination to support a range of statewide and regional energy-efficiency campaigns. The Mass Save brand offers a simple, easy-to-remember identity in television, radio, outdoor, and print advertising and provides a recognizable, trusted presence at events across the state.

The new Mass Save brand continues to grow as a focal point for sponsors, state agencies, contractors, and energy customers, with an increasing emphasis on no-cost home energy assessments, financing, and contractor participation.

That’s what makes working on The Friends Project new website so interesting—and rewarding. The Friends Project is a non-profit organization in Portsmouth, NH, that organizes events and activities for people with disabilities. I met its tireless founder and president, Heidi Chase, as well as Nathaniel, a participant, and his parents, in our project kickoff meeting.

Our meeting agenda was basically the same as for a business client. Why not? The same questions and principles apply: Who is the audience? What are they looking for? What do you have to offer? What do you want them to do? We hit the whiteboards and the Friends Project team dug right in.

Audiences

We listed the potential audiences, which included participants, parents, volunteers, staff, donors and supporters, the press, and the general public. We realized that the audience was divided into two main categories. Participants (including parents and volunteers) use the site to see schedules, event listings, locations, and pictures of past activities. The General Public comes to donate, volunteer, read news, and get more background on the project. Nathaniel gave us great information about the things that participants care about. The resulting organization model pushed participant-focused content to the foreground. Public-focused content was featured in the utility navigation.

Goals

Next, we began to think more strategically about how the new site could help the Friends Project achieve its goals. There was the business side: Attract more donations. Raise awareness about the program and about people with disabilities. Make it easier to publish new content and update event listings. And there was the fun side: build a site that participants could call their own and that had lots of pictures of their friends.

Key tasks

Tasks were organized by the two main audience segments. Donating was at the top of the list for the general public—especially if there was an easy way to make donations on a regular basis through a service like PayPal. For participants, the most important tasks were learning about programs, checking the calendar for updates, and seeing pictures and videos of past events. Key documents were also identified: an emergency contact form and a volunteer information form for download.

Feature List

Finally, we went around the table to brainstorm the features of the new website. Ideas included a monthly calendar that showed upcoming events. A page for comments from parents and participants. A place on the home page for last-minute listings or cancellations. And, most important, an interactive gallery for photos and videos. Nathaniel and his parents focused on features that made it easy to find information about programs and events. For Heidi and her team, it was important that the features be easy to update and maintain.

What we discovered

For every project, success in the end is largely determined by the quality of the information in the beginning. We took a businesslike approach to the Friends Project website. And it worked due to the great insight from Heidi, Nathaniel, and Nathaniel’s parents. Soon, the Friends Project will have a new website that has been designed with the needs of its audience squarely in mind. For us at PixelMEDIA, the opportunity to work with people with disabilities has shown us that audience needs are pretty universal. In fact, the business community might learn a thing or two from the Friends Team.

The new building will enable new approaches to education centered around contextual problem-solving. For example, break-out rooms provide the space to allow large classes to divide into smaller discussion groups, then reform to share ideas and solutions. The building’s integration of advanced technology will further enable teaching and learning in the age of video, computer networking and the Internet.

Whittemore Dean Daniel Innis sees the new building as transformational, encouraging new educational models. “Contextual learning is problem-based learning,” says Innis, who envisions students solving the real-world problems of local businesses in a classroom setting, an approach facilitated by the design of the new building and inclusion of new technologies. “In this model, students are not just getting the content knowledge of those courses, they’re also using that knowledge to solve real-world problems.”

UNH issued its own challenge to PixelMEDIA: develop a website that would raise awareness of the challenge, engaging with multiple audiences and giving levels as though each were the campaign’s only focus. The website would need to be general enough to meet the needs of donors and fundraisers, spanning every phase of a capital campaign’s life, yet be compelling enough to meet its primary purpose: to raise money.

“Early on, we knew that the success of this campaign would depend upon our ability to leverage the strengths of the Internet as a fundraising medium,” says Elena Maltese, Director of Communications at the Whittemore School of Business & Economics. “More and more, that depends upon a user-centric approach.”

In fact, the website employs numerous user-focused features and calls to action. Visitors to the site can read brief descriptions of the mission and the challenge, watch short video clips of Dean Daniel Innis and various UNH alumni explaining the urgency of the campaign, download awareness-raising materials for use with various groups, sign up to receive a newsletter or emails informing registrants of progress toward fundraising goals. Visitors can even see the impact of their donation on a contributions calculator. Throughout the site, visitors are encourage to engage, interact, spread the word and donate.

PixelMEDIA services included information architecture and content strategy, graphic design and coding. Maltese points to an additional, often-overlooked service that helped the work stay on track: “The project management was excellent. I could walk away and know what we discussed during our last meeting was going to happen, exactly the way it was promised at PixelMEDIA. That provides a sense of security you can’t imagine.”

“Plus, they’re just plain fun people to work with.”

Take a look at the new UNH website. And while you’re there…think about donating to help UNH fulfill the Peter T. Paul challenge and build the future of business and economic education in New Hampshire.

In the support & maintenance division, edits are often purely functional and extremely urgent.  One thing I try to do with my clients is suggest small improvements above and beyond the standard maintenance requests, and emphasize how easy it is to keep the request affordable.  Almost everyone wants to “do it right,” but clients often have a boss ready to veto 30 hours to redesign and rebuild the entire products section.  However, customers may not realize that significant improvements can be made despite limited time and budget:

• 1-2 hours for an information architect look at a problematic page that frequently elicit customer complaints
• ½ hour for a copywriter to punch up the language on a flat homepage promotion
• 2-3 hours for a designer to restyle a confusing chart so that users can get critical product information “at a glance”
• 3-4 hours for a developer to automate a task that normally takes the client 1-2 hours to accomplish using a content management system (CMS) several times weekly
• 15 minutes to create a Google Analytics account and add the code to a landing page to make sure a search engine optimization (SEO) campaign is effective

Affordable suggestions like these introduce clients to expertise that normally only get tapped during large-scale projects. They also remind them that we really do have their best interest in mind and that we are as frustrated by the “bubble gum and duct tape” add-ons to their website as they are. It’s important for everyone to remember that while a full-scale website redesign might not be possible during tough times, these “small victories” in key places (i.e., where customers often identify difficulty) can happen on a regular basis, and often have a big impact. The focus and frequency of these changes can draw attention to improvements that might have otherwise gotten lost during an overwhelming, large-scale redesign, and show users that your company strives to be responsive.  Innovation, intelligence, and creativity in small doses can still be enough to inspire customer involvement and loyalty.

1.  Be brief.

Most visitors come to your website to accomplish a specific task, and they do not want to spend a lot of time reading irrelevant copy. Write clearly, concisely, and assertively. Use better nouns and fewer adjectives.

2.  Make your content easy to scan.

To help impatient or hurried readers grasp what you’re trying to say, make your page easy to scan by breaking long copy into paragraphs of 150 to 200 words each, defined by meaningful subheadings (and don’t try to be cute or clever). The goal is to tell the essence of the story using only the subheadings, supported by the body copy.

Bulleted lists and the judicious use of bolded text can help readers scan the content.  Be sure bolding does not conflict with established standards for links and visited links.

3.  Use the inverted pyramid.

The “inverted pyramid” format presents a summary at the beginning of a story with subsequent paragraphs revealing more detail. It’s used in news and press releases to help readers grasp the important idea by reading the first paragraph. The readers can then decide whether the topic is of sufficient interest for them to read further.

4.  Use keywords to stay on topic.

Focusing on keywords and phrases can help you stay “on topic” and use terms that customers care about. If the list of keywords you want to include in the page copy is excessively long or diverse, consider creating separate pages. Using keywords and phrases in standard HTML headlines and subheadings (H1, H2, etc.) gives added weight in search engine rankings and makes the page easier to scan (see number 2).

5.  Consider page length.

To scroll or not to scroll? It depends on the page level and depth of information. On higher-level pages, which tend to guide users to more detailed pages, less scrolling is usually better. At the lower-level detail pages with longer content, assume the reader is interested in the subject matter. Scrolling is preferable to breaking the content into multiple pages.

6.  Avoid excessive cross-linking.

Too many highlighted links can distract the reader and clutter your content with multicolored links. Avoid linking to pages that are not related to the main topic.  If you want to cross-sell, make it clear that you are leading the reader to a different topic, for example, “You may also be interested in …”

7.  Use technical terms consistently.

Establish a guide to branded terms and industry terms and use them correctly and consistently to avoid confusion. Define any terms, abbreviations, and acronyms that are not familiar to the reader. If you use acronyms to save space, be sure to spell out the full name the first time it appears on each page.

8.  Write for an international audience.

Remember that your audience may come from non-English speaking countries. Keep the following guidelines in mind:

• Always include the country in mailing addresses, and format it appropriately.
• Do not refer to toll-free telephone numbers that cannot be accessed internationally; make sure you provide a means of making contact from outside your country.
• Avoid references to politics, race, nationality, religion, or lifestyle.
• Do not use the term “domestic” to refer to your local country, or “foreign” to refer to the rest of the world.
• Avoid cultural references, e.g., “American spirit,” or “German engineering.”
• Avoid abbreviations; they rarely translate correctly.
• Avoid jargon, slang, and idioms that are meaningless to other nationalities.
• For measurements, include both metric and American units if possible.
• Do not use #, `, or “to indicate pound, foot, or inch in American measurements.

9.  Avoid overly self-referential copy.

It’s good to imagine your web page as a “first date.” Limit “we” or “our” statements to a bare minimum (keep count).  Companies that talk about themselves a lot are often compensating for a lack of insight into what their customers want and need.

10. Don’t forget the call to action.

It’s amazing how many times this is forgotten. Most people come to your website to accomplish a task, so be sure to give them something to do. Better yet, give them a range of choices. Don’t rely on the general “Contact Us” link on every web page.

Here’s a quick look at other people’s briefs. No jokes, please.

The Creative Brief
Ad agencies produce a Creative Brief at the earliest possible point in the project. The brief serves as an important internal document that helps the agency’s account teams and creative teams work together more effectively. It’s important to note that the creative brief doesn’t propose any creative approaches. In fact, the creative team is usually not involved in the drafting of the creative brief. The purpose of the creative brief is to give the creative team a reference point for developing a solution.

The Organizational Brief
I came across this post recently and thought it offered a lot of valuable insight. The author, MJ Braide, has developed (and trademarked) the Organizational Brief as a method for companies to align their organizations to their brand strategies. A website redesign can trigger a lot of questions about an organization’s core business models, product lines, and go-to-market strategies. This is especially true for companies that have experienced a recent merger or acquisition: the pressure is on to upgrade the website, even if the organization is still be taking shape (or shaking out).

The Experience Brief
Braide follows up with another good post about the Experience Brief as a tool for effective brand management. Like a Creative Brief, an Experience Brief can foster a better working relationship between client, agency, and team members. In our business, I think a tool like this could help our clients think in terms of “designing a user experience” rather than “designing a website.”

We can tailor an Experience Brief to inform all aspects of Experience Design, including Information Architecture, Content Strategy, User Research, Nomenclature, Visual Design, and Application Design. Because so many disciplines are involved in designing the user experience, there has to be a common point of reference for everyone. Having a brief in hand can prevent the gradual drift away from the original goals as individual interpretations and small variations build one upon the other.

Brand Agencies (and consultants like Braide) usually equate “User Experience” with “Brand Experience” and rely on brand attributes and messaging to define the user experience. From the Interbrand Brand Glossary:

Experience: This is when consumers have been exposed to various brand attributes. A successful brand experience happens with exposure to a brand’s most positive aspects, and this can happen in a store, through advertising and websites, or through word of mouth. The critical aspect is to have the experience match or exceed the customer’s expectations based on promises made in communications.

Messages set expectations; content satisfies expectations. At a strategic level, the Experience Brief balances the user’s needs and expectations with the company’s messages and brand attributes. It also provides a tactical framework for making decisions about content, navigation, and design at every phase of the project and serves as a benchmark for evaluating the outcome.