Live Conversation Redesign

Project Overview

Live Conversation, formerly known as Moderate in Session in UserZoom, is a feature of the UserTesting platform dedicated to moderated research. After the merger between UserTesting and UserZoom, I worked as the designer on this part of the platform, which was undergoing a redesign to combine the best elements of both platforms. In this project, I reworked the UI of the UserZoom Moderated Interview, with a particular focus on translating the vertical menu into a horizontal one. Since the horizontal menu is the industry standard for video calls, this change aims to improve ease of use by creating a more familiar interface for our users.

Goals

Adapt the UI to follow established video call conventions, ensuring a familiar and intuitive experience for users.
Update the legacy interface to align with the new design system, enhancing visual cohesion and ensuring consistency across the platform.
Improve UX by fixing little problems reported by users

Approach

Aligning the UI with widely-used video call tools involved conducting a thorough benchmark and competitive analysis, as well as evaluating our platform’s current interface to identify areas for improvement. I also had by the UX team important feedbacks by deep interview sessions with experienced users of both platforms.

Competitive analysis

For the competitive analysis, I considered both direct and indirect competitors, as well as the platforms of UserZoom and UserTesting. Lookback stood out as the most relevant direct competitor for user interviews, while Skype, Zoom, and Google Meet were the dominant indirect competitors in the market.

The analysis is divided into four categories based on the most relevant areas to examine: Onboarding, Dashboard and Navigation, Usability and Interactions, and Advanced UX Features. Each category includes subcategories to dive deeper into specific topics, as shown in the following table.

Menu redesign - mid fidelity

The first iteration is a mid-fidelity design, created for quick testing with users. I also worked on the sidebar, but the main focus was on the horizontal menu, which is highlighted in the image below.

Different role, different menu

In the live conversation there are different roles: Moderator, Note-taker, Hidden-observer, and Participant. Each one have with a slightly different sidebar and menu, so I started to explore all the different configurations possible to figure out eventual disable states, notification badges and features to remove (e.g. the "notes" feature in the Participants' menu).

Research

Now it's time to test the understandability of the menu. It is important to assess whether the modifications are easily understood by both new and existing users from UserZoom and UserTesting, as the new design will serve both these groups as well as new users. For this reason, participants from each company were recruited for the study, resulting in a total of 12 participants (13, actually).

Affinity mapping

After conducting the UX research, we analyzed the anonymized responses from the participants and grouped similar feedback and observations to identify trends, common themes, and key pain points across both UserZoom and UserTesting users.

Insights - problems highlighted

Request screen functionality and icon

92% of participants (12 out of 13) didn’t expect to see the “request screen” functionality. The tooltip is clear and understandable, but the icon doesn’t convey the possibility to request screen

Notes icon confusion

Notes icon is counfused with transcript (3/13) or calendar (2/13)

Notes icon and enable state

None of the participant could guess notes will be available after the recording of the session starts, and 4 are confused about the reason for notes to be disabled until rec ordng

Iterate on design

Thanks to the insights gathered from the research, we were able to iterate on the design and move forward. The rigid menu bar was integrated into the background, transforming into floating icons that give the UI a more modern and lightweight feel. The screen-sharing icon was updated to a double-sided arrow to better represent its dual functionality. Additionally, the notes icon now includes a pencil to prevent confusion with a calendar.

Below are various menu states, highlighting the most important elements of the UI at a glance.

Approaching the sidebar

Now it's time to explore the redesign of the sidebar UI. Since notes and chat are the two features most closely tied to the sidebar, the redesign is centered around them. Additionally, the sidebar has been reimagined as a floating element over the background, reducing the sense of a rigid grid and enhancing fluid transitions between different features and layouts.

At the bottom of the chat there's a tab menu that allows the Moderator, Note-Takers, and Observers to switch from their chat to the one with the participant (even if only the moderator is allowed to text the participant)

Notes display the author's name and timestamp. A three-dot menu allows users to edit both the content and the timestamp if needed.

Conclusions

The redesign of the Live Conversation feature successfully guided the UI toward industry standards, improving usability through recognition-based interactions and modernizing the interface to align with the new design system. While not fully completed, the project laid a strong foundation for a more intuitive and seamless experience for users from both UserZoom and UserTesting.

Through research, affinity mapping, and usability testing, we gathered valuable insights that directly informed design decisions, ensuring that changes addressed real user needs. The transition from a rigid layout to floating elements enhanced flexibility and improved navigation, making interactions feel more fluid and natural.

At this stage, my role in the project concluded, with the final designs serving as a solid starting point for further development and refinement.