Designing ways to zoom in and out of research data

UX DESIGN - UX RESEARCH - USABILITY TESTING

Let's start with the problem

During research, we realized people zoom-in and out of the research data available to them. They go back and forth between call notes, the call recordings, the transcripts, and project highlights. But the product's information heirarchy didn't reflect that.

This case study only talks about the highlights page redesign with some references made to the product wide information revamp.

Old Highlight Page Design

The original highlights view in Looppanel required an overhaul after the introduction of projects and question script in the product.

Old Design

First Release

Phase-I release of the new highlights page

New Additions

Integrating project structure

Design Direction I: Questions in a side panel

I tried a variation where the question script of the project was in a side panel, and notes inside it on the right, segrated based on calls.

What didn't work

Questions on the left with notes on the right

Side menu for questions

Design Direction II: Questions at the top

To reflect the mental model of model of projects > calls > notes/video snippets, I designed the following two screens to represent that.

What didn't work

Call name at top with question inside

Questions on the left, with call name on top with note inside

Final Design based on testing

This version worked to a large extend since it reflected people's existing ways of zooming in and out of their work.

New Additions


New analysis screen prototype

Summary view

To wrap up the entire experience, we made a summary view that could be shared with the team.

The first step is to start grouping notes, then selecting what insight to put it under. All of this can be shared using a link.

Summary view

Changes across other parts of the product