Concept Mapping Tool

Project Role: Design Lead

Most features on BrainPOP used to be simple assessment activities, like quizzes, worksheets and articles. However, BrainPOP was moving towards creating interactive learning “Maker” tools. Working with a third party vendor, BrainPOP launched a new concept mapping tool called Make-a-Map, which then was the most complex UI they'd ever built. Over time, the tool saw the addition of new features and a few rounds of redesigns.  By this point, Make-a-Map was suffering a degradation in user experience.

MAM_oldies@2xMAM_oldies@2x

Problem

The problem I could see is that there was a lot going on on the interface. There were buttons, shapes, sliders, and icons everywhere. What do you do if you’re new to the tool? Where do you look first? What are all these buttons for? Every function of the tool was surfaced up front, with little hierarchy. It was also eating into the primary real estate of the creation canvas, making the user experience frustrating when placing and moving nodes.

Solution

I wanted to bring clarity to the visual hierarchy first, while maximizing the amount of canvas space available. I organized the different features of the tool into categories, like the draggable DOMs, canvas utilities, and assessment functionality. I made a mental model of how a user would create a concept map. This helped clarify where categories could go based on the point of need, and therefore helped determine what should be top-level versus recessed. The workhorse of the interface would be the left menu bar, consisting of a series of subpanels. Canvas utilities like zoom in/out and lasso multiple nodes would exist right on the canvas (like Google Maps), and editing, saving and submitting the map would exist at the top.

MAMdesign_v4.1@2xMAMdesign_v4.1@2x

Process

While normally I prefer to working within Agile methodology, in this case, it made more sense to hand off detailed documentation to the third party vendor. Based on the specs, the developer was able to implement to high fidelity, which reduced QA time in the end.

For example, something as small as the connecting link between nodes required a high level of specification:

MAM_spec@2xMAM_spec@2x
MAM_Annotated@2xMAM_Annotated@2x

After release, Make-a-Map logged 6x more engagement in time than the next feature.