Platforms

• Windows & OS X
• iOS / iPad

Technology

• JavaScript
• CSS3
• HTML5

Development Tools

• Notepad++
• Weinre
• Chrome

Overview

The Customer Influencer Map is part of a suite of tools used to develop marketing strategies. It is utilized through a methodology that identifies and prioritizes key project stakeholders. By being able to visually map out stakeholders and their influences an engagement strategy can be developed to build and maintain robust relationships with those key stakeholders and thus ensure the desired outcome.

This example is a subset of JavaScript-based tools that I developed for a marketing strategy company. It is a portion of the much larger project that consisted of a team of individuals and spanned 8+ months of development.

Click the link below to launch the “Customer Influencer Map” (you’ll need a screen resolution of at least 1024 x 768, preferably higher). This example shows step 4 – all other steps & UI not related to this step have been disabled.

Launch the Customer Influencer Map

Development Notes

What is interesting here at a technical level is that you can add “lines” to the chart, manipulate the line’s length, thickness, rotation and position – without any plugins at all. Everything is pure HTML – all of the shapes are DIV elements.

The following chart shows the tools available to manipulate the given objects:

legend

Without the client’s instructors explaining their methodology the significance of the line weights, line types, sizes of the circles, etc is hard to communicate. Suffice it to say that all of these elements establish a hierarchy of relationships between the identified stakeholders.

Features

  • Service call to retrieve JSON data via AJAX
  • Populate all steps with the retrieved data – only step 4 is enabled in this demo
  • Circles are drawn to match each previously saved Customer Group – we default to three in the demo
  • The sizes of the solid circles and their nested dashed circles impact data in previous steps as sizes within predetermined ranges have specific meanings/implications
  • All circles are resizable & dragable
  • Background colors of the circles can be changed to one of a predefined set of colors
  • All lines can be created, destroyed, resized and rotated. Line thicknesses can also be manipulated.