WeMap redesign

In SI622, my team was commissioned to evaluate 3 in-class collaboration apps. We redesigned one of them, WeMap, a collaborative mindmapping app, based on user research and usability study findings.

Major usability issues

Why are the nodes moving around?

Since the app is meant for real-time collaboration, identifying whether other students are working on a particular node is important. However, it is not enabled in WeMap.

File organization

Teachers would like students to save some mindmaps and refer to them later. However, it is not easy to look for mindmaps in the app. As a result, when the teacher wants the students to save the progress, she asks them to work on their notebooks instead of the app.

Gestures

As the maps get larger with collaborative effort, students need to pan across the screen to check nodes. From the interview, we realized that the gesture system in WeMap was not intuitive. Moreover, two students did not realize how they could pan across during the usability testings.

Rcommendations 📹

As a deliverable of the class assignment, we recorded a video with all the findings and recommendations.

Redesign

Scoping

As an illustration of our recommendation, I decided to start from the node editing page because it is the central part of WeMap, and that redesigning it will help with the first usability issue — not being able to see whether a node is being worked on.

Sketching out possibilities

I started from sketching out the flow and possible interactions, and evaluated each solution based on my understanding of the challenge.

Comp & documentation

As I proceeded, I documented the major changes and decisions I made to support further discussion.

Design tradeoffs

I went through 4 alts of visual presentation of users and chose the one that best supports the main goal of WeMap.

Research

We generated interaction maps, and conducted interviews, surveys, comparative analysis, heuristic evaluation, and usability testings. Personally, I believe the interviews, comparative analysis and usability testings generated the most insights in this study. Below is a summary of the methods we used.

Interaction map

To gain a comprehensive understanding of the app flow, we first generated an interaction map to walk through all the interactions.

Interview

With the help of the developers, we conducted interviews with 6 students and 1 science teacher to understand user needs and the context of use.

Survey

From the survey we obtained quantitative feedback regarding students’ opinions on the use and effect of WeCollabrify from a broader set of respondents.

Comparative analysis

To understand the pros and cons of WeMap, we selected applications for collaborative productivity, particularly those geared towards students as well as other applications with collaborative learning components. This step served as an inspiration in our redesign of the app.

Heuristic evaluation

Based on Nielsen’s 10 usability heuristic rules, we consolidated 137 usability findings into broader topics.

Usability testing

To further validate the usability issues that prevent users from completing the core learning functions, we planned a set of tasks involving featured functions that have revealed potential usability problems in previous studies.

Team

Team

Jharina Pascual, Alejandro Guerrero, Lawrence Chang, Iman Yeckehzaare

My role

I participated in 7 interviews, designed and analyzed the survey, conducted comparative analysis, performed heuristic evaluation, conducted usability testings, and wrote the reports with my teammates.

As the sole designer of the team, I was also responsible for designing the graphs and embodying our recommendations in the redesign.