Case Study

MindMappr

Web-based mind-mapping app to help students organize notes and make connections between concepts

Launch Prototype
Context

At a Glance

MindMappr is an interactive web app that allows students to map out complex topics and quiz themselves on how well they know the information. I was the sole developer and designer for this class project.

The final web app was well received by students, especially those struggling with classes that taught complex theoretical topics.

Research

Living the Problem

The idea for this project came from months of working together in teams on projects and talking with students about their coursework. I saw two challenges emerge,

A Divided Team

Due to team size or schedules, teams struggled at times to meet together in the same physical space.

The Overwhelmed Student

Individual students struggled to make sense of abstract concepts often getting lost in the details of printed notes and required reading material.

Ultimately, I decided to focus on the overwhelmed student because solving it first would provide for a strong foundation for future enhancements such as collaborative features.

Implementation

Design Through Development

I took a different approach for this project by choosing to design in the browser. I simplified the scope at first and focused on building out individual components (user interactions, tree generation and data saving/retrieval). However, I quickly ran into a roadblock where focusing too much development was hindering the design. So I built out a static CSS and HTML mock-up to work towards.

Initial Static Mockup

Adding Dynamic Functionality

Frameworks & Customization

To reduce work and maximized output I used tools like jQuery UI for animation. Although this allowed me to move fast and build animations quickly, I also had to hack together my own code to overwrite default behaviors. Some things had to be custom made. For example due to the way a user would arrange and restructure nodes, the underlying connections had to be done dynamically so I relied on JavaScript to calculate and repaint the node links using SVG.

Design

Finishing Touches

With most of the back-end stuff done I polished up the project adding a bit of responsiveness, color and additional features.

I would totally use this to take notes! Really clean UI.

—Student at CMU
Usability

Next Steps

Although I haven’t done usability testing for this project, from a few informal observations I realized that the onboarding experience for MindMappr could be improved. Clear call to actions and a guided tour could alleviate some of the initial confusion that users might have.

Next Project
CMU Interaction Design Studio

bikeSense

A smart sign that notifies car drivers of nearby cyclists and improves city planning.