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

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.

For example, I tend to be a bit of travel bug on the weekends, and often will look at  a particular NH events calendar to find if there is anything interesting happening in the state.  A few months ago it underwent a redesign. The new site is gorgeous, and adheres to many design best practices.  However, my Delicious link to the calendar no longer functioned!  It took an astute eye to point out to me (after I browsed my way to the new calendar), that the page was now “event-calendar.aspx” instead of “events-calendar.aspx”.  Even worse than this seemingly pointless change to the page name and the lack of 301 redirect to tell the server “automatically take people who want this old URL to the new one instead,” the site didn’t have a custom error page with a convenient site map allowing me to easily locate what I might have wanted—all I got was an ugly server error telling me the page wasn’t found. At that point, there was no recourse but to change the address in the browser until I found the homepage.  A less-savvy user wouldn’t know to do this; a less-patient user wouldn’t bother.

So I asked myself, how could such simple things have been left out?  My answer is this: the term “best practices” is helping to hold the industry back.

We once had a client who asked us to change all instances of “best practices” on their site to “good practices,” claiming that people find “best practices” too intimidating and don’t bother trying.  I think there might be a similar mindset hurting the web industry.  By referring to “best practices,” we set an expectation that these are “nice to haves,” rather than set a minimum standard to help make the web experience as a whole better for all users.

Consider these:

• Usability best practice: use consistent and persistent navigation so that users understand how to find other pages on the site intuitively
• Content design best practice: break copy up into small chunks and bulleted lists so that users can scan easily
• Search Engine Optimization (SEO) best practice: use descriptive page titles so that human users and search engines know what the content of the page is
• Visual design best practice: use sufficient light/dark contrast and choose font sizes that help people read web copy without straining
• Development best practice: optimize assets like images, stylesheets, and scripts so that users experience the fastest possible website

Why should it be acceptable for web firms to forego such simple things that can alleviate so much of a user’s anxiety?  Professional web companies already face enough competition from “the owner’s nephew who knows html.” Because we adhere to “best practices” as a core part of our philosophy here at PixelMEDIA, it’s easy to forget that leading by example only works if it’s transparent to the world.  If we, as an industry, want to help justify the cost of professional, strategic web design and development, then we, as users, need to hold the industry to a higher set of minimum standards.

Since 1996 the MITX Awards has grown to the largest and most prestigious awards competition in the country for technology innovations and celebrates the best creative and technological accomplishments emerging from New England.

The new Samuel Adams website features an extensive guide to Sam Adams beers and recommended food pairings; behind-the-scenes information on the people and the process behind Sam Adams; and a wide range of opportunities for beer enthusiasts to “share the passion.” The architecture, labeling, and design were inspired by the content. “It’s a treat to have great content to work with,” says Thomas Obrey, Co-founder of PixelMEDIA, Inc. “It kept the team’s thinking fresh from start to finish—every page was like its own mini-project.”

The new website delivers an enormous amount of valuable information to a passionate, engaged audience through the use of engaging information, education, videos, and social media connections. The content does not trail off after the top level pages, it becomes richer and more rewarding. And the information it provides can truly enhance the real-world enjoyment of food and beer.

For PixelMEDIA’s web development team, the diversity of page designs required a lot of deft HTML coding and some brand-new approaches. To honor its social responsibility commitment, Boston Beer insisted on maintaining its 2-step age verification. In addition, the PixelMEDIA team customized a set of content management tools (CMTs) for News, Events, and other time-sensitive content. They even implemented an e-store where Sam Adams fans could buy clothing, accessories, and Samuel Adams Boston Lager® glassware.

“It’s a tremendous accomplishment to be recognized along with our clients as a finalist in the MITX Awards,” said Erik Dodier, President and Co-founder of PixelMEDIA, Inc. “To be selected as the best of the best among such a vast array of talent in the region is quite an honor, and we’re proud to be a part of it again this year.”

PixelMEDIA will be recognized with the other finalists in the category of Consumer Goods at a gala awards ceremony traditionally attended by over 1,000 of the region’s top interactive marketing and technology professionals. Winners will be announced at the ceremony in the Boston Marriott Copley Place on Thursday, November 18th at 6pm.

About MITX
The Massachusetts Innovation & Technology Exchange (MITX) is the region’s premier professional organization for the Internet business and marketing industry. Reaching more than 7,500 professionals in New England, MITX is the community for thought leadership, building business relationships and professional training and development. Members of the MITX community take advantage of events, sponsorships, speaking opportunities and networking to make business connections and exchange ideas. With more than 60 events annually, MITX provides its members with the opportunity to promote their companies to targeted audiences and provides a valuable forum for networking with other likeminded peers to source potential business leads, partnerships, ideas, and funding. MITX is headquartered in Cambridge, MA. Visit us at www.mitx.org.

I realized that this group was trying to decipher the subway map, which had been placed directly above the door.

The directive was unambiguous: DO NOT STAND IN FRONT OF DOORS. Safety and efficiency were the primary concerns. Yet the layout of the car required the users to defy the warning in order to get the information they needed to reach their destination. In addition, the map itself was squeezed into an extremely tight space. The type size was small, crowded, and set at the 45-degree angle. (It was the odd angle of the people’s heads, in fact, that clued me to why they were at the door in the first place.)

Note: necessity trumps instruction
Even dire warnings set in ALL CAPITAL LETTERS.

I speculated on the decision-making that created this potentially dangerous situation. Was there a usability professional involved? Did someone think that putting the stop names near the door would actually facilitate the process of identifying one’s stop and getting off the train?

Note: business trumps usability
I settled on another theory: misplaced priorities. From the front to the back of the car, every space at eye level was dedicated to advertising. Usability, efficiency, and safety were demoted in favor of revenue generation. I imagined the conversations that took place as the interiors of the cars were configured. I hoped that at least one usability advocate pointed out that the doorways presented riders with an impossible choice. But I knew that business concerns held sway.

Note: anxiety trumps brand
I didn’t have to ride the subway to learn this. It’s a scenario that’s common in the world of website design. The people at the door were placed in a state of anxiety: forced to ignore the warning while they struggled to locate their stop. I’m sure that they were relieved when they stepped off the subway. If they were tourists, coveted by the city, what was their impression of Boston? Will they use the subway again to explore other parts of the city? Did the advertisers get a return on their investment,  or were the riders too busy trying to navigate the system to look at the ads?

Advertising may earn short-term dollars, but usability is an investment that earns better feedback, return visitors, and true brand equity.

So what should be on your mood boards? Anything that g­­ets your creative point across. This can include colors, typography, imagery, illustrations, white space (or lack thereof), and messaging. If you are working with a content strategist or copywriter, we highly suggest adding taglines, slogans, brand attributes (adjectives), or a vision statement. This helps the client to not only visualize the proposed style, but to see how the verbiage can support the overall experience.  Sometimes we even take it a step further and add atmospherics that engage other senses as well, like smell, touch and hearing . By introducing more tactile elements like texture, music or scent, you can envelope the participants in a full sensory experience.

Mood boards can be extremely helpful when you’re searching for an overall tone or visual language, but they can also expedite the approval of a creative direction before heading into interface design. In the past, we have noticed that separating initial creative ideas from the mechanics of the site allows the client to make clear and concise design decisions without impacting time or budget.

There are a few things to keep in mind when creating mood boards.

• Choose an orientation that best fits the subject matter.
• Take into account the audience and how you’ll be presenting to them. Your mood boards can be digital or printed (or both) depending on whether your meeting is virtual or in person.
• Try and create boards that use similar elements. For instance, if one board includes brand attributes and color swatches, be sure that the other options do as well. This creates points of comparison that can aid in decision making. It’s always easier to compare apples to apples.
• And finally, have fun. Creating mood boards is not a rigidly define activity.  Use whatever pieces you can to express your vision, whether it is cutting and pasting magazine bits to Gatorboard or adding minute details and a custom polish to every serif.

Mood board examples:

It’s simple.  People are still using it. Even though the market share is declining, at last look IE6 still makes up about 20% of the market.  Buy why?  To compare a modern browser to IE6 would be like comparing a Corvette to a horse and buggy.  It lacks the bells and whistles of the newer browsers, it’s less secure, it doesn’t support png transparancy and it doesn’t support today’s web standards – which causes developers everywhere hours of frustration.

Ultimately, having to support IE6 is hindering the advancement of websites both in design and functionality.  With the release of HTML5 on the horizon, the web is about to take on a whole new direction and will leave those that don’t support it in the dust.  IE6 users will start to notice sites that look broken or simply do not work.  They will get messages asking them to upgrade (if they haven’t already.)  Even bigger sites like Facebook, YouTube and Digg are starting to limit their support of the browser.

So, my question to you is do you use IE6?  If so, why?  Is it a choice? Are you restricted by your IT department?  Did you just not know there was a difference between browsers, or that there are better ones out there?  Have you noticed sites are prompting you to upgrade, look broken or just don’t work?  Please, leave your answers in the comments.  I’d love to hear from you!

If you are looking for an upgrade try one of these:

• Firefox 3.5
• Google Chrome
• Internet Explorer 8

In the past, keeping spam off your blog was comparatively easy. Basically, you would block, erase or refuse any comment that provoked the user to buy Viagra, or click on adult links. As long as you monitored the comments, you would be OK.

Now, not so much. Modern spammers have taken it up a notch, and their “junk mail” is getting past a lot of moderators.

Spam will never go away, but there are a few things you can learn that will help you better deal with it.

1. Spammers are trying to achieve something.

   There is always a reason a spammer is posting something to your site. Some reasons could be:

   • Encourage or trick someone to click a link. Either to sell something, or try and install malware on the user’s machine.
   • Use your page rank to build theirs. One big way to get website traffic is to get your link out there as much as you can. Spammers attack forms to place their links on your site. It is even common for people to search the web for high-ranking websites that have discussion boards. They will then register an account on one, add links to their profile signature, and make a few semi-valid posts to simply get those links on the site. This is sometimes referred to as “sblogging” (spam-blogging), and is usually not automated, but real people trying to promote their site.
   • Test for confirmation emails. Some blogs will email a user when a comment is posted for moderation. If a spammer gets a “your comment is being reviewed” email – they just got a valid email address (from) that they can now send spam to.

2. Spam comments are usually automated.

   This means that there is not an actual person manually putting the bogus information in to your form. More likely, there is a computer in some guy’s basement that is running a program whose sole purpose is to scan the web for forms. When a form is found, the program then submits data. Programs like this are relentless and absolutely flood the internet with bogus information. It’s not uncommon for us to get 100 – 300+ spam submissions every day.

3. Your post is probably not as popular as you may think.

   I say this because I see tons of bogus comment posts on the blogs I run, regardless of the site or post content. Once a spammer finds your site, they often submit something very general, vague and non topic-specific to trick the person into thinking it’s a genuine comment. Some examples may be:

   • “Wow, this is a great post. I’m going to subscribe to your blog”
   • “I love this site’s template. I want to make something similar”
   • “I appreciate your opinion on this, keep up the great work”

   You get the idea. These are painfully vague statements that can be applied to any post. If comment does not add anything to the discussion, it’s probably fake.

4. The spammer’s link may not be as obvious as you would imagine.

   As I mentioned above, spammers are constantly getting more clever. They know by now that a big “click here to reduce your debt” link is not going to get past most moderators. What I see a lot of these days is that when a comment is posted, the user’s “email” and “homepage” can be posted with it. While the comment may seem real, check the values submitted in these fields. Often it’s something obvious like “http://Buy-more-mortgages-online.com”. Again, if the comment is general and not topic-related – It’s probably an attempt to get the spam link onto your site.

5. Spammers can quote your content.

   The programs that read your page and submit the bogus comments can even grab a sentence or set of words from your post. These are the hardest to moderate, because the comment looks valid. For example, if your blog post is titled “Remodeling your bathroom,” the spammer may post something like “I agree with your views on Remodeling your bathroom. Great site, I will subscribe!” Before you approve this comment, check the email address and homepage of the poster for spam links.

6. Basic rule of thumb – don’t automatically trust anything posted to your blog.

   It may seem a little needlessly paranoid, but what I’m trying to get across is that you really need to analyze your comments before approving them for display on your site. Not all comments are bad. People do read blogs and post feedback. It’s just very easy to fall victim to false submissions. Take a second to review the comment before you approve it.

Important notes:

Never click a spammers link. If it looks obviously bad, like “http://reduce-your-credit-debt.hhtted.ru” – clicking it may gather info about your machine, track your IP or attack your system. Just delete the comment and move on. Remember, the spammer wants you to click the link.

How can you improve your spam filtering?

As a developer, I’m constantly testing new ways to beat the spammers. It’s like an endless circle. They make something that beats our system, we update the system – repeat. For now, any of these are a good idea:

• Use Captcha on forms, requiring a user to “enter the letters/numbers in the image”. This helps a bit, but some more advanced spam programs can actually read those so it’s not 100% effective.
• Add a “spam question” to your form. It’s becoming common for a form to ask something non topic-related to confirm the user is a human. For example, “what is the next number after 3″ can be added to the form. When the form is validated, it will fail if the correct value is not entered.
• Use CSS to “hide” a field. Because most spam bots do not render CSS, and just dump data into all form fields, webmasters can:
  1. add a field to the form
  2. hide it with inline styles (not seen by most browsers, but seen by bots)
  3. require that field be blank in order for the form to validate (bots will dump something into it)
• Add a rel=”nofollow” attribute to any link that can be posted to your site in any way by the public. This is a little gem will tell search engines (Google started, more catching on) that the link is not related to your page and not to follow it. This way, if a bad link gets through all your validation and moderation, it will not hurt your page rank. Search engines tend to think this way; If a site is linked to from your page, it must be related. The rel=”nofollow” outright tells them it’s not.
• Use tools such as Akismet to filter submissions. There are tools you can use that will filter out 90% of bad comments, by using a database of spammer techniques. Every comment sent to your form is compared against this database during validation. This is a great way to reduce the spam on your blog. It won’t stop it entirely, but with it you need to inspect fewer emails. In fact, by stripping out some of the more obvious spam from your blog, tools like this will only miss the really clever ones. So if a comment gets past the filter, be sure and still check all the points above. The filter may not have this spam signature in its database yet.

Summary

It’s a lot of work staying ahead of the spammers. Keep in mind that they are constantly trying to find ways to out-think you, and all of the applications that block them. If you get comments on your blog, take a second and really look it over before approving it. The odds are it’s not what you think.

If you have a form that is constantly being flooded by bogus submissions, contact us – we can help!