Interaction Maps

Background

As a User Experience Research Fellow at the University of Michigan's Center for Academic Innovation, some of my main projects have been creating interaction maps for two of the Center's software tools, ViewPoint and GradeCraft. 

ViewPoint

Interaction Map? Site Map? User Flow Diagram?

In the UX world, there are a lot of different names for the many research and design methodologies we use, and sometimes what's referred to at one place as an "interaction map" may be called a user flow diagram somewhere else. To expand on this, it's also safe to guess that one person's interpretation of an "interaction map" will differ from someone else's interpretation. Because of this, I knew it was important to find out what specific information the software team was hoping to gain from this map.

Throughout my design process, I shared the map (in its various stages) with members of the software team, and I continually reached out to gather insight and understand what the UX designers, developers, and the software portfolio manager envisioned getting out of the map.

One of the UX designers suggested creating a version that was, in her words, more of an information architecture-style map, where you just see the names of pages rather than screenshots. I explored this type of map as well, and I found it helpful to more easily see how you get from one page to the next without getting into the details of the individual pages. 

Most of the team members I spoke to were looking for a visual tool that would help identify usability issues.

To create the map, I went through the process of designing my own simulation using the ViewPoint website. Along the way, I took screenshots to capture every step of the process. Though this was an intricate process, I became incredibly acquainted with the tool!

Along the way, I completed a heuristic review of ViewPoint. Following Nielsen’s ten heuristics, my fellow UXR intern and I provided recommendations regarding the flow/usability of specific features that we wouldn’t have noticed without images of the actual screens. For example, we suggested adding confirmation/warning messages when deleting roles, groups, students, or anything else.

GradeCraft

The GradeCraft team was going to be having a Retreat in early November to discuss the next year's plans for the tool. After the success of the ViewPoint map, the Associate Director was interested in having maps created for GradeCraft as well; she was hoping to have maps that visualized the student experience of using GradeCraft.

When I began designing the map for GradeCraft, it was instantly clear that there was an overwhelming amount of information on the website. This was also expressed in conversations I had with my supervisor and members of the GradeCraft team. I met with several team members to better understand how the map was going to be used before ultimately coming to the decision that the map would be more helpful if it was actually two maps.

I also chatted with another intern who happened to be taking a course that used GradeCraft. It was helpful to hear her perspective on the tool and find out how she interacted with the tool most frequently. 

Taking this feedback into account, I followed a similar process to how I created the ViewPoint map: grouping similar interactions together and labeling each set of interactions.