The customer needed a way to easily convert their show's audio feed 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.
Project Type: Enterprise
Designed for: Desktop
Stakeholders: 1
Product Manager: 1
UX Designer: 1 (me)
My role was discovery, concept design, testing, and presenting to stakeholders, engineers, and prospective clients.
I worked directly with the Product Manager discussing the requirements, key attributes, and goals of the project. I also interviewed our customer NPR about their current audiogram workflow. My goal was to thoughtfully incorporate the audiogram feature into the product.
My first challenge was to revamp the current video clipping interface into a version that supports only audio.
Once the user creates their clip in and out points, they select the scissors icon to reveal clip options. By selecting audiograms in the interface dropdown, the audio is auto-transcribed.
The user has the option to select a background theme. In this example, the user selects NPR's Ask Me Another theme. This adds the show's logo and NPR branding. If they user wants to edit the captions, they select the edit captions button.
The user can align the caption text by inputting a timestamp or by adjusting the text sliders. Also, the user can easily fix any errors in the text by double-clicking on the text field.
The user can select "Create Audiogram" once all the edits are complete. With the audiogram created, the user has the option to either download or post it directly to social media.
After user testing, we showed a prototype to NPR. They were impressed with the improved workflow and agreed to sign a contract extension with a stipulation that the feature is implemented into the product. The new audiogram feature is currently in development and is scheduled to be released 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
