Dialogue Transcription Validation
UI redesign for dialog transcription validation task for data collection product Neevo.
2020 | Defined.ai
Time frame: 2 weeks
My roles: Researcher, UX, and UI designer
Disclaimer: The visual language could not be changed completely as we had to stay as much within the company's design system as possible and maintain visual coherence with other platform jobs.
Contextualizing
Request from users
This project started with the request of 5 specialized users who said they had difficulty interacting with the old UI.
In this task, users have to listen to the audio segments and validate the quality of the transcription. If they find an error, they can either edit the selection in the audio segment or edit the transcript.
According to the feedback given, the audio segment selection area was tiny, making the action difficult and generating errors. In addition, the scroll that previously existed made it difficult to read and compare audio and transcription.
Goal
Facilitate the realization of the job through a UI that allows a better selection/editing of the audio segment and information visualization.
Target Audience
People who perform this job on the data collection platform.
How
Enlarging and reorganizing the work area to occupy the entire screen, increasing the audio space for better interaction, and allowing a better view of all job information.
Analysis and study
What to change
From users' requests and deciding that the goal was to make better use of screen space to facilitate interaction and visualization, we looked at the old UI to understand what needed attention in the reorganization of information.
-
1. Use all available screen space: despite the standard be the central container, some other exceptions allowed us to make this decision.
-
2. Increase the audio area: this was the main request from users as it would allow better interaction when selecting/editing audio segments.
-
3. Reposition shortcuts: the UI presented shortcuts that facilitated user interaction and could not be dispensed with, so it was necessary to think about it.
-
4. Reposition transcription/validation areas: in the old UI, there were many jumps when the user chose to edit a description. Besides, the space for writing was small. With the increase in the work area, we should also consider repositioning these areas.
Wireframes
The repositioning of the correction and validation areas took into account the order of actions and the increase in the audio area, which was the main request.
The validation area was bigger for presenting more text and content.
As most users already know the shortcuts, we thought of a solution that hid them with a tab to be opened.
Feedback collection
Due to the urgency of this project and also the availability of users who made the request, we chose to do a faster validation. We sent the wireframes to the 5 users and asked if they thought this solution would solve the issues they raised. 100% of them said yes and were willing to send further feedback when using the UI to perform real tasks.
Final result
Learnings
This project taught me a lot about the adaptation of UIs. It was necessary to understand the system’s limitations, contact the user directly to check if the problem raised was being solved, and see how to adapt the one that is the best solution to pre-existing visual language.
The result would be different if I could start this project from scratch and adjust other points, such as using clear icons and other inputs.