User Research, Interaction Design, and Front-end Engineering for video-based research website

Project Description

I was brought on to turn the prototype of MindSwarms into a full-fledged web application. I began by observing researchers at MindSwarms manage research studies, as well as managing some studies of my own.

Although I redesigned the whole application, I focused on the recording matrix, a grid of all the response videos for a study. It’s a focal point of the MindSwarms experience, because it’s the most unique, and because it’s the primary deliverable for our paying clients. I believed the matrix was overwhelming, and I’d heard feedback from researchers that it was hard to use.

Skills Used

  • User research
  • Interaction design
  • Paper prototyping
  • Wireframing
  • Ruby on Rails 3, HAML / HTML, SASS / CSS, Javascript

Design Process

Their initial design, before I came on

The prototype matrix, with only one scrollbar visible
This was the initial design for the website’s response matrix, which displayed research questions vertically (so you scrolled up and down to view different questions) and consumer responses horizontally (so you scrolled left and right to view different people).

It had an unlimited number of respondents and questions, so watching all the videos in a study required quite a bit of scrolling.

The prototype matrix, showing both scrollbars
Worse, the page scrolled vertically and the table scrolled horizontally using an internal scrollbar. That meant that usually only the vertical scrollbar was visible; to use the table’s horizontal scrollbar you had to scroll to the bottom edge of the table itself. This was confusing and frustrating, especially for first time users of the matrix, since they had to search until they found the horizontal scrollbar at the bottom of the page.

Starting to redesign

Paper prototype of matrix redesign
I drew a number of sketches where the whole page scrolled (without the table’s internal scrolling) and both scrollbars were visible. Eventually, I made this paper prototype and tested it with researchers. During this time I also used the previous research studies we’d run to convince the team to set maximums of 7 questions, and 30 people, per study.

The redesigned matrix, showing both scrollbars
Since there would almost always be more people than questions, I rotated the matrix from horizontal to vertical. People were shown vertically, and research questions shown horizontally. That dramatically decreased the amount of horizontal scrolling needed to view the whole matrix, which was an improvement since studies have shown that humans scan vertically faster than horizontally. Further, scrolling long distances vertically is preferred, and easier with a mouse, than scrolling long distances horizontally.

The redesign also allowed repeating the questions It also allowed me to insert a row with the questions in between every three respondents. That way a researcher could scroll down the page and always see the text of the questions within each column.

Well received, so further improvement

mockup of the newest designHowever, we continued to receive feedback that the matrix was overwhelming. I’m sure at least some of that was because most of our studies were 7 questions long, so there was still some horizontal scrolling. Then it occurred to me that we didn’t need (or even want) multiple videos playing at once, since each response video would talk over the others. So, only a single video needed to be full size, and the other videos (which weren’t playing) could be smaller. Based upon that, three different solutions came to mind: a pop-up, dynamically enlarging the player when it was clicked on, and putting the player in a separate pane of its own.

After sketching, I settled on the separate pane, because it was less jarring than a popup, and easier to implement than the dynamic resizing. Even better, this would speed up the page itself; at the time we used a separate player for each video, each of which had to be individually loaded, slowing down the process of watching videos. Instead, we could display much smaller thumbnail images for each video, along with a single full-size video player.

The rest of the team loved the idea, and had some suggestions (“Researchers are often segmenting using the screening data, could we show that as well?”). I iterated on it until I had a design we were all excited about.

Newest design implemented!
This was the final version of the response matrix. I implemented the whole feature myself, while learning Ruby on Rails.

This example only has 4 questions, but the design comfortably displayed the maximum of 7 questions while still fitting on a 1024×768 monitor. The right pane contained the consumer’s name, video, demographics, screening responses, and the text of the question. It also remains fixed in place on the screen, while scrolling through the long list of responses.

Feedback from Researchers was very positive. There were numerous comments that the interface is much easier to use, including that it’s “no longer overwhelming!” Another researcher said: “[L]ove the new interface…that’s exactly what I was hoping for!”