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.

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.

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.

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:

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.

The presenters included an impressive list of industry heavyweights like Baba Shetty, Chief Media Officer at Hill Holiday, Suzie Reider, Director of Ad Sales and Marketing for YouTube, and Lance Jensen, Creative Director for Modernista! All had engaging presentations but the most profound (at least to me) was Brian Collins, Chief Creative Officer and Chairman of COLLINS. His discussion touched on a few, well articulated points, but the most interesting to me was the effect of society and its direct influence on art and creative endeavors.

Brian referenced the early 1960s, when the Russians had beaten the U.S into space. This was a scary time for Americans. The Russians had the edge and, to add to the anxiety, the threat of nuclear war was very real. Enter John F. Kennedy at Rice Stadium in 1962. All of America was watching. And in this difficult time, JFK took the high road, he challenged, engaged, and inspired the nation to come together and put a man on the moon. And we did.

During this time, the world of art, fashion, and architecture began to take a fascinating turn. It started to reflect thoughts of a not-so-distant future and, with that, the hope and aspirations of an inspired society that permeated everyday life. Images in Popular Science illustrated cars of the future. Movies scripted everyday life in space. Fashion showcased a shiny (literally) tomorrow where models looked like the next astronauts and industrial designers and architects used organic shapes and experimental materials to create new and exciting ways to live. There was hope—and the creative minds of the day reflected that.

Brian then went on to discuss the next time America truly came together as a unified nation. It was September 11, 2001. President Bush’s response was not one of hope and encouragement, but of revenge and anxiety. “Shock and awe” became the phrase of the day and a burdened government and fearful citizens created a new vernacular. In the creative community, specifically agencies, terms like war rooms, officers, tracking, capture, territories, and blitzes became prevalent. The Hummer, a vehicle originally designed for battle in the streets of Fallujah, was now parked in suburban driveways across America—GM had done a great job of equipping a soccer mom for any obstacle that might arise on her way to the grocery store. Our society began to look inward and the creative views were a bit more myopic. As a nation, we had lost our sense of control and the images of the day reflected sadness, the quest for power, and the struggle for normalcy.

So what did I take away from all of this? It was an affirmation that art is truly the window into the current state of a culture and society. It penetrates not only the creative minds of the day but it burrows itself into the fabric of society in ways that transcend conventional written history. Single events and micro interactions can impact the output of artists for years and, in turn, cultures begin to reflect these interpretations through fashion, music, film and architecture. Is Brian’s point a new concept? No. But through storytelling and reflection, artists can see why it is so important to our craft and our history to keep creating.

But it also turned out, that the majority of the client stakeholders were puzzled as to what PixelMEDIA was providing. They didn’t understand what Information Architecture was, and hadn’t even thought about the overall user experience for the product. Yet, they had requested an IA. How odd.

The understanding was that we were to immediately dive in and create a series of wireframes outlining the key screens for the application. This proved a difficult place to start, as we didn’t have (a) a clear design objective (b) we didn’t know what the users needed to do or (c) how the new product would help them do it better and more easily than they imagined possible. At our request we rewound a bit, and after a few meetings, all parties agreed on the basic design objective, which enabled us to ensure the customer’s needs, the brand, and the business objectives were balanced and clearly articulated.

Next, PixelMEDIA took the initiative to craft a set of task flows. This was an interesting decision, because we didn’t think we’d need to create such documentation for the project; but taking this step provided everyone a deeper insight into how we could craft a new experience as the design process continued. We focused our efforts on outlining the user’s primary goals and how they would achieve them in order to form the core of the application’s design. This allowed us to focus on the features that matter most to the customer. The task flows provided a visual mechanic that showed gaps in the requirements documentation, as well as providing a way to further the vision and understanding of the application.

Once the task flows were completed and approved, PixelMEDIA began designing the experience’s basic framework. We kept the requirements focused in a set of wireframes that outlined a typical scenario, to visualize how the customers would walk through the application and achieve their goals.

The client has been exceptionally pleased with the work to date, and PixelMEDIA has developed a more strategic partnership by bringing the project solution to completion. As the wireframes portion of the project nears completion, all parties feel that the resulting solution provides a more elegant, simple and streamlined experience for the customers.

Or in the customer’s own words:

We are obviously very new at some of this stuff and a large part of why we chose to go with PixelMEDIA is because we were confident that you wouldn’t just throw a design over the wall; rather, you would work *with* us, regardless of the fact that we would slow you down. We’re all learning quite a bit from this experience, and I for one am very impressed by what you guys have done and how you’ve helped our team figure out which direction we should try to head in.

By thinking less tactically and more broadly, PixelMEDIA has been able to educate the client on the importance of Information Architecture, and helped the client identify what their customers needed most from the application.