Redesigned the audiogram creation workflow to eliminate manual transcript generation and editing friction. The new process automatically generates transcripts with visual alignment tools, reducing a multi-step manual workflow to a few clicks. Customer testing confirmed the solution met their needs, leading to product adoption.
Collaborated with the Product Manager to define requirements, key attributes, and project goals. I interviewed NPR customers to understand their current audiogram workflow and identify pain points, ensuring the new feature integrated thoughtfully into the product.
First challenge: adapt the existing video clipping interface for audio-only use.
After setting clip in and out points, users click the scissors icon to access clip options. Selecting "Audiogram" from the dropdown automatically generates a transcript of the audio.
Users can select a background theme—in this example, NPR's Ask Me Another theme, which applies the show logo and NPR branding. To edit captions, users click the "Edit Captions" button.
Users can align caption text by entering timestamps or dragging text sliders. Text errors can be corrected by double-clicking any caption field to edit inline.
Once edits are complete, users click "Create Audiogram." The finished audiogram can be downloaded or posted directly to social media.
User testing validated the improved workflow, and NPR was impressed with the prototype solution. The streamlined audiogram process—featuring automatic transcription and intuitive editing tools—addressed their key pain points and demonstrated clear value.
NPR agreed to a contract extension contingent on implementing the feature. Development is underway with a planned release by the end of 2020.
The customer needed a way to easily convert their podcast audio into an audiogram for social media. Their current workflow was an in-house webpage that involved numerous steps, which included manual transcript generation and upload. After my conversation with the customer, I created a new audiogram persona outlining goals and user pain points. Using this, I designed a new audiogram process that included automatic transcript generation plus, an easy way to visual align/edit the transcript text. After it was tested, the customer was very impressed and the audiogram feature was added to the product.
February 2020
by Joel Gabiola
UX/UI, Interface
