UX DESIGN, USER RESEARCH

Hubhopper Audiogram Tool

The Audiogram tool is a promotional tool for podcasters. It generates a simple animated video from the podcast audio that can used on different social media platforms.

OVERVIEW
COMPANY

Hubhopper

TIMEFRAME

2021

pLATFORMS

Web

ROLE

UI/UX Designer

CHALLENGE

Promoting podcasts when they're audio-first.

Since a lot of podcasts are audio-based, it can be challenging to create promotional content for them, especially if you don't have experience with video editing. Many podcasters were not familiar with video editing and we received questions on creation of promotional material.
SOLUTION

An online tool that does created the video for the user.

A tool that would let the users select visuals and text along with the audio they want to promote and generate it for them.
aDDRESSING THE PROBLEMS

Issues with the Design

On testing the design, I quickly discovered issues that were hampering the experience. Based on this, I decided to redesign the experience.
Before
The area denoted to video creation was very little

The preview of the video was small.

The space was used in a disproportionate manner. There was a need
to prioritize more important features
Iteration 1
After
After the rework, the users had a lot more space to work with.

They were provided with information about each element through the subtext.

The essence of the progress bar was retained through the side bar, while drawing emphasis on the video preview.

The Process

I divided the process into five steps. Based on these, I created the wireframes.

1

Select Audio

2

Canvas
Size

3

Design Elements

4

Add Subtitles

5

Generate
Video

Final Design

I divided the process into five steps. Based on these, I created the wireframes.
MY ROLE

UX Designer

I designed the UI/UX for the Audiogram tool.

Main Responsibilities:
1.  Feature Planning
3. Design (Wireframes, Prototypes, Iterations, Testing)

There were iterations of this project made and it was released to the public. However, the functionality was not fully developed and some features showed continuous issues. Due to this, this product was removed from the website. It is still under development and will be released to the public once it has been successfully developed.

IntroductionOverviewChallengeSolutionMy Role