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

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.

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:

Most software product managers (aka: referees) that I’ve worked with are sensitive to both the creative and technical natures of  UI projects.  They can help teams mitigate the misunderstandings that happen when humans work with each other, such as:

• Questions about requirements could feel like alien invaders probing for weaknesses
• Constructive suggestions might be taken as a good slapping with heavy criticism
• Exciting ideas might be heard as threats of new gnarly work if approved
• The needs of the end user could be seen as hilarious problems for another day

So product managers, this one is for you.  You see the user acceptance gain with the internal pain, even though the balance of the perceived heavy slapping may be in – or completely out of – your hands.

Since its release in January, 2009, NetMRI 3.0 has been well received by customers. Jay Ennis, Executive VP of Product Development at Netcordia, points to the user interface designed in partnership with PixelMEDIA. “… the new UI has helped us connect with customers,” says Ennis, “Wow” is a common reaction…” At the same time, Netcordia is solidifying its position in the competitive software industry and is capturing the attention of key media leaders like Red Herring, which recently named Netcordia to its annual Red Herring 100 list of America’s most promising technology companies.

A User-centered, Visual Approach
Netcordia’s NetMRI 3.0 improves the product’s Network Configuration and Change Management capabilities by providing multiple views of the network and every device connected to it, and then showing the effects of local changes on interdependent network initiatives. New diagnostic capabilities also help IT managers assess the potential impact of even the smallest changes to a network.

The new NetMRI 3.0 user interface features dashboards to
help IT managers track top problems and troubled devices, 
monitor trends, and identify the most important risks. click to enlarge

“I went to a customer six months ago and he said he loved the product, but he pulled a notebook out of a drawer and showed me all the steps he had to take to get to the feature he wanted,” said Yama Habibzai, product marketing director for Netcordia. “Over the course of the last few years, we’ve added more and more to this product. It was time to think about using a more visual approach to streamline the overall product experience for users at all levels.”

Gathering and incorporating user feedback was a key element in our approach. The Web-based interface consolidates core functionality into a set of dashboards, offering IT managers a fast, at-a-glance visualization of network performance. The dashboards show changes over time and the topology status view shows users exactly where a change took place. A combination view overlays both network health and policy compliance statuses on top of the topology map. The tabbed interface allows users to toggle quickly between different views of the network.

The redesigned NetMRI 3.0 user interface triages complex tasks into bite-size pieces. click to enlarge

When an issue is identified, users can drill down quickly using a system of logically organized “accordion” menus that replace the folder structure of previous versions and competing products. With a product as feature-rich as NetMRI 3.0, a well designed user interface helps customers maximize their return on investment by taking full advantage of everything the product has to offer.

“The new version is much better and very easy to navigate,” said Tod Isaacson, manager of network services at Loyola Marymount University. “Now, you can see several different screens at once that you had to hunt for in the past. I will use a lot more stuff that I didn’t know was there in the past because it’s now easier to find.”

For more information
Founded in 2000, Netcordia is a leading provider of network automation software to the world’s most complex and mission-critical networks. For more information, visit www.netcordia.com

In all, each member of the board had a slightly different definition but it was evident that each description was cut from a similar cloth. Surprised? Not really. Comforted? Yes.

Toby Bottorf, Director of Design, WGBH Interactive, had an interesting observation. He stated that we don’t design a user experience; we design for a user experience. I couldn’t agree with him more. In reality, we are just setting the stage. What happens in the hearts and minds of the audience is relative to their own past experiences, knowledge, environment and, of course, expectations. Since we are trying to mimic physical interactions within a virtual environment, defining expectations is paramount to creating a positive user experience. Much discussion was centered on the ability to enhance the experience by aligning expectations. Chauncey Wilson, Senior Manager, AEC User Research, Autodesk, Inc., discussed user experience in a similar manner to Maslow’s Hierarchy of Needs. Using a three-tiered pyramid, he defined the base as “relative and expected” functions that one would expect for choosing the experience. The second layer represents comfort. I equated this to factors like ease-of-use and thoughtful design. Third, at the top of the pyramid, is delight. Here, expectations are exceeded and the experience becomes an pleasurable one. But, the top tier is a moving target. Technology, design, and culture can easily push what was once a delight to a comfort. (see diagram)

So, what did I gather from all of this? For starters, we all are bombarded with choices and everyone is vying for your audience’s attention. So, when possible, reduce the “noise” level and minimize the need for your audience to make unnecessary choices. This not only reduces the need for complicated information structures but it relieves the stress of making the wrong decision. Second, define your intentions. Set the stage for a pleasurable experience early on. Frustration increases when your message is unclear which then encourages trial and error. And finally, stay current with both your audience and the environment in which the experience is delivered. If technology is the conduit, use good judgment and always precede with proper usability and interaction models. Push the boundaries to drive innovation (think the pyramid’s top layer) but expect to refine them. Some trends are harder for your audience to accept than others.

In closing, I must admit, it was a refreshing to hear others speak about user experience in a way that is subjective and open for interpretation. It’s evident that it means something slightly different to everyone, but with insight, knowledge, and a creative spirit, setting the stage for a captivating experience is well within grasp.

For more information about MITX and upcoming events visit MITX.org

]]> http://www.pixelmedia.com/blog/user-experience-or-user-expectation/feed/ 0 http://www.pixelmedia.com/blog/learning-how-to-listen-to-users/ http://www.pixelmedia.com/blog/learning-how-to-listen-to-users/#comments Mon, 01 Dec 2008 22:42:43 +0000 20 Doreen Gantt http://blog.pixelmedia.com/?p=58 Continue reading →]]> Have you ever sat in on a usability call?  Listened to what your client really has to say?

Usability testing is a technique used to evaluate a product or service by testing it on users. This testing can take many forms:

• a clickable prototype with visual designs
• visual designs alone (.jpgs)
• different navigation options
• onsite observations

Most of our testing takes place remotely, over the phone. We try to limit our calls to approximately 30 minutes, but often, as the user becomes engrossed in giving feedback, it will run longer. I’ve sat in on several usability calls.  Each one is an eye-opening experience.  If you get the opportunity, I would highly recommend taking the time.

Through the ones I’ve participated in, I’ve learned a few things.

Lesson #1: There are no right or wrong answers.

Sounds kind of Zen doesn’t it? For me, I like people.  Even more, I like to help people.  I want to ‘help’ the users make the right choice.  It’s a natural thing that I feel a lot of people sitting on a usability call would want to do. Often by the time we’ve reached the point where we have a script for the call and the assets for the call, we’ve been through several rounds of debate internally. We’ve taken many, many ideas and narrowed them down to only a few to present to the user. Sometimes we’ve become attached to a particular navigation or design. But as you know, the point of a usability exercise is to learn what the USER wants. I have had to readjust my thinking so I could be more open-minded about the choices, and avoid influencing a user. The final results are always well worth the effort.

Lesson #2: Keep your mouth shut

This one goes hand-in-hand with Lesson #1.  However this is not an easy task for me.  Somehow I think that’s true for a lot of people, not just me – silence is not always golden.  Sometimes it’s awkward.  And during those awkward moments of silence, when I didn’t have typing to occupy me, I wanted to jump in and give the user an answer.  Any answer.  Just to get things moving again.

The funny thing is that some people just need more time to think through what they’re seeing on their screen.  More time to absorb.  I’m willing to run down three paths and back to the beginning to find out that the 4th path is really the one I wanted.  Some people need to survey each path, consider the options, and then move forward.  Which way of responding is correct?  I refer you to Lesson #1: there are no right or wrong answers.

As an added benefit, if your users are verbal thinkers, you get a real insight into how they solve the particular problem you’ve put in front of them.

Lesson #3: Listen, really listen

If you are like me, as soon as someone starts to answer the question, you’re anticipating what your response will be.  I know people who won’t let me finish my sentence before they’re already answering the question they think I’m going to ask. This isn’t Jeopardy people!  It’s your product, your web site, your brand.  You owe it to yourself and your business to put aside your pre-conceived notions of what is right and wrong, to stop giving your users that answer that you want to hear, and to stop anticipating what will be said.  Listen, really listen – then refer to Lesson #2.  If you’re really stubborn, refer to Lesson #1 after that.

If you follow these 3 lessons, I think you will be quite interested to hear, learn, and hopefully accept what your users are trying to tell you.

Personally, I experienced users choosing a visual layout that would not have been my first choice. However, during the usability testing it was revealed that the users had to perform very specific tasks. These steps were taken in a very specific order – and we would not have known this if we did not complete the testing.

Just recently we worked with a company that was entering a new market space, targeting C-level executives instead of the technical people they had been working with. When we completed the usability for their product, it was determined that certain naming conventions, while common with technical people, did not hold the same meaning or value at the executive level.

So again I ask: Have you ever sat in on a usability call?  Listened to what your client really has to say?  Believe me it’s worth your time to hear what you customers, clients and users have to say. It’s invaluable.

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.

But this doesn’t have to stop at the test lab. With online and networked games becoming more and more popular, game companies have an opportunity to monitor their users remotely. Some companies, like Valve – makers of the hit Half-Life franchise – constantly monitor their players, which yields some interesting statistics.

For their recent title Half-Life 2: Episode Two, Valve published several charts and maps that display how long users take to complete the game, and where they have the most trouble. They also report the average session time, the percentage of players who make it to the end, and total sessions played. The information is aggregated from, it seems, all of the people who play the game.

Here’s a heat map that details the player deaths on a given map. Can you spot the most dangerous places to stand?

Bungie, the makers of the Halo franchise, offers a different approach: they expose every single thing that you’ve done as an individual player on the system. While the game comes with a story-based, single-player mode, it also offers a number of modes of online competition. After you’ve played a few rounds, you can visit your profile on the site and see every match you played, where you placed, where you died, what medals you earned, and who you played against. You can click on the other player’s profiles as well, to see every single thing they’ve ever done. (Here’s my profile – not too impressive, I know; some of our developers have put much more time into it.)

These analytics must be invaluable to the developers, as they fine-tune the next patch or expansion. But the most fascinating thing about this info is that the game companies share it so freely with their users. As players – and for “players,” read “users” – we’re always curious to learn more about ourselves. We want to hone our skills, or test our self-image, or just learn something new about how we really behave. We love looking at ourselves in the mirror – and this mirror makes for an addictive, absorbing feature.