UX DESIGN, USER RESEARCH

Hubhopper Mobile App

Hubhopper Studio is a SaaS platform that provides podcast hosting and distributing services. I designed the user experience of Hubhopper Studio for the mobile app.

OVERVIEW
COMPANY

Hubhopper

TIMEFRAME

2020-2022

pLATFORMS

Mobile App

ROLE

UI/UX Designer

The Hubhopper App was a podcast streaming platform

However, the platform's focus was shifting to supporting podcast creation and building the industry in India.
CHALLENGE

Making podcasting more accessible for users.

With Hubhopper distributing to the Indian audience, there was an increasing interest in podcasting. However, not everyone had access to the tools required to create a podcast. Many people did not have laptops, and thus, faced a barrier in creating podcasts.

For existing podcasters, there was a need for an easy way to access their podcast at any point of time.
SOLUTION

A mobile-based experience for high quality podcasts.

The main aim was to build the creator community by making podcast creation more accessible. While the mobile version of the website was available, I wanted to provide users with features that would allow them to make podcasts that were high quality.

Majority of Hubhopper's listener base was in the mobile app, so we could drive creation by leveraging that listener base.
IMPACT
These stats were recorded 2 months after the release.

220%↑

in signups

150%+↑

in podcasts live
aDDRESSING THE PROBLEMS

Creation on the Mobile Phone

Before
I identified the key steps required in creating a podcast. Based on these, I created the app wireframes.

Iteration 1
In the first iteration, people found it difficult to navigate because of the way information was provided.

The drag option was not easy to use and precise selection was challenging.

Moreover, it was difficult to provide other sound effects with this layout.


Iteration 2
This option was more intuitive and preferred by the users.

While this option was good for basic editing, it became harder to navigate with more complex editing in episodes.
Iteration 1
Iteration 2
After
Iteration 3
I redesigned the option to make the 'Studio'
screen the first screen in the creation process.

Users could see all the options available to them and they would always come back to the same screen, allowing them to see progress.

Each file could be edited individually, but also collectively giving them more freedom if they required it.

The layout also utilised space better by having the creation contained in one screen.

150% increase in podcasts live.

Hubhopper Studio was initially designed to be a new app. However, I realised the advantage of leveraging the already existing listener base on the Hubhopper app.

We decided to combine the two apps.

The creation button in the middle signifies start a new podcast. It was put there to encourage more users to start a podcast
Drag to view
MY ROLE

Lead UX Designer

I designed the end-to-end experience for the Hubhopper mobile app. During this process I worked closely with the Head of Design to design the experience, and worked cross collaboratively with the Engineering and Marketing teams.

Main Responsibilities:
1.  User Research (Feedback, Data Analysis, Competitor Analysis)
2. Planning (Prioritising Features, Release Cycle)
3. Design (Wireframes, Prototypes, Iterations, Testing)
DETAILED ANALYSIS

Research Findings

71% of the Indian population has access to a smartphone, while the number for laptops or computers is much lower.

Users don't want to learn complicate tools for editing podcasts.

Users want to be able to access details about their podcast online.

Users like to take time to perfect their content.

Competitor Analysis

I compared other apps to see how they were providing creation based features to the users.
Most platforms had a complicated UI and the method of creation was long and indirect.

I studied Anchor.fm's design as the simple experience was quite simple to understand. I found some elements confusing initially, but quickly learned how to use the app.
DEFINE

The Problem

Users without access to a laptop or proper setup had a larger barrier to entry for podcast creation.
Existing users did not want to learn new tools. Instead, they wanted a simple way of creating podcasts.
Existing podcasters wanted a way to access their podcast data whenever they wished to.

The Personas

Purvi

Experienced Podcaster
Purvi hosts a podcast on personal development and has built a small but dedicated audience. She is an member of the podcasting community and enjoys networking.
Challenges
Managing her podcast alongside her full-time job can
be challenging.
Already proficient with podcasting tools on the laptop.
She needs a solution that allows her to
efficiently manage her podcast on-the-go. She is looking for a user-friendly mobile solution that doesn’t require advanced technical skills.

Varun

Podcast Enthusiast
Varun is intrigued by the idea of starting a podcast.
He enjoyes listening to a variety of podcasts on topics ranging from pop culture to marketing.
Challenges
Looking for a way to start a podcast without investing
in expensive equipment or committing excessive time.
Not particularly tech-savvy and is concerned about the
technical aspects of recording, editing, and publishing
a podcast.
Does not wish to learn new tools, but wants to give podcasting a try and decide how to proceed.

User Journey Map

To simplify and identify problems faced by the users within the flow, I created the User Journey Map.
DESIGN

Lo-fi Wireframes

Feedback

I constantly tested the designs with other people to see how they interacted with them and to take their feedback to improve the experience.  You can find some of the feedback below.

Mockups

IntroductionOverviewChallengeSolutionMy RoleDetailed Analysis