UX/UI Redesign for Mobile Audio Courses

I
9 min readOct 24, 2019

--

Isaiah Baldissera UI UX Design Mobile App Learning edtech

Objective: Redesign a mobile audio-course UX/UI for the busy adult learner.

I’ve used the Problem → Opportunity → Feature structure to improve the Knowable mobile app. This post is fairly brief; if you’d like to hear more about my user research findings, please contact me. Here are some of the solutions I discuss:

  • How to differentiate from competitors by positioning the product for a different type of user attention.
  • How to redesign audio clip sharing for faster organic growth.
  • How to integrate and animate Show Notes to add value to the user experience.
Isaiah Baldissera UI UX Design Mobile App Learning edtech
Redesigned course summary with animations

Why I’m bullish on audio for education

I stumbled upon a recorded version of Stephen Covey’s 7 Habits as a college student. I’ve been an avid consumer of audiobooks ever since. In recent years, educational audio has held its own, even with the rise of Netflix and Youtube. This is thanks, in part, to the rebirth of podcasting, ignited in late 2014 by the mystery-thriller Serial, which garnered close to 200 million downloads (see the spike on the graph below). Podcast industry annual revenues now exceed $500 million—those from audiobooks are twice that—and both are expected to grow by about 25% each year.

As a medium that enables anyone with a mic and an internet connection to quickly produce content, and anyone listening to simultaneously go about their daily activities, audio is perfect for informal learning, especially for busy adults. I’m excited to work on this design project because I think my findings can apply broadly to other edtech companies and help them improve their audio experience for all learners.

Google Trends worldwide search volume for both ‘audiobook’ and ‘podcast’ from 2004-present. Serial’s debut is the spike in 2014.

The edtech company Knowable, which creates audio courses on everything from ‘how to sleep better’ to ‘how to launch a startup’, was looking for product design help. It took me a couple of weeks to speak with potential users, create concept sketches, interaction flows, and design the mobile UI using Sketch and Invision Studio. I created the designs from scratch, and used some of Knowable’s existing titles and course descriptions.

Talking to listeners

I had informal interviews with six men and women between the ages of 25 and 33, who were weekly consumers of podcasts and audiobooks.

Top insights from user interviews

1) Long-form is king. The majority of the audio consumed was expert-interview or discussion-type podcasts over 40 minutes in length. None of those I spoke with had listened to any modularized audio courses, or short clip audio (10 minutes or less) within the past 2 years.

Isaiah Baldissera UI UX Design Mobile App Learning edtech
One of my interviewee’s typical daily mobile use

2) The 15-minute rule. When do people choose to flip on a podcast instead of scanning Instagram? I noticed a pattern: those I spoke with only listened to educational audio when they had over ~15 minutes of spare time (walking the dog, exercising, commuting, etc). Anything less than 15 minutes (standing in the checkout line, waiting for a Lyft, etc), and they’d typically opt for what I’ll call ‘mindless mobile time’ —re-checking the weather, news, and social media. Why? The main reason was that it was inconvenient (finding the earpods, multiple clicks to download and start the podcast). The second reason was that they didn’t believe they’d get any tangible takeaway from listening to a couple of minutes of a long-form podcast.

3) Limited sharing. Although everyone I spoke with had shared written content in the last week (articles, blog posts, tweets), none had shared any audio, even though they’d each consumed over 4 hours of it during the week (compared to reading roughly 8 hours-worth of online content). Most didn’t know how to quickly share a selection of a larger audio file, and none of them wanted to inconvenience their friends by making them download a new app.

User interface and interaction mockups

Problems, Opportunities, and Features

Adding my own experience to the user research, I came up with these musings and design solutions for the three biggest issues facing Knowable.

PROBLEM 1: Increasing competition in long-form audio.

Educational audio is a crowded space where free content abounds. For most companies, question #1 is “how do we differentiate our offering and get users to pay?”

Only one of my interviewees had paid for educational audio in the last two years. She’d spent roughly $50, which is half of the going rate for a single Knowable course. Most were skeptical of paying $100 for a course they saw as merely a more structured version of the podcasts they freely downloaded.

There was general consensus that they’d only make the switch to paid content if they knew for certain that the course content was better. Convincing them of this would require:

  1. Listening and learning first-hand.
  2. Receiving recommendations from respected friends.

In other words, they’d need to preview a bit of the best of what the course had to offer, and be able to freely send and receive with friends. Two things very few edtech companies have optimized for.

Isaiah Baldissera UI UX Design Mobile App Learning edtech
Logo design concept symbolizing leaves from the “Tree of Knowledge’”

OPPORTUNITY: Differentiate by owning the ‘short-form’ space with both free and paid offerings.

a) Showcase course quality with free daily clips

  • Preview great content — not sales pitches. Most courses, audio or otherwise, offer previews that are part-syllabus and part-pitch. They introduce the user to the topics covered, but most stop short of actually providing nuggets of learning that provide value to users. If the product is strong (which we’ll assume it is!) offering free daily clips is often the most honest and effective means of persuading users to become subscribers. It’s also worked for book-summary startup Blinkist. As one interviewee said:
Isaiah Baldissera UI UX Design Mobile App Learning edtech
Startup and home screen user interface design and animation

“If I can listen to a clip and get an ‘a-ha!’ moment of learning, I assume there’s even better content behind the paywall, and I’m much more likely to buy.”

  • Rotate clips daily to increase active usership. One way to structure this would be to take 3–6min clips from a variety of courses and feature 2–3 of them each day—giving enough breadth each week to meet diverse interests, without overwhelming the user. Far from giving away the entire course, this would provide enough content to whet a user’s appetite, stir up just a bit of FOMO, and create a reason to return on a daily basis. Completion or streak-tracking — indicating how many clips a user has listened to in a row—could also increase repeat engagement.

b) Differentiate from long-form competitors by creating an experience convenient enough for users to tune-in during short breaks.

Isaiah Baldissera UI UX Design Mobile App Learning edtech
Widget designs for convenient access to mobile audio.
  • Positioning for WHEN, not WHAT. The long-form audio marketplace is packed. Few will pay $100 to replace the free podcasts and $10 audiobooks they listen to while commuting. Positioning Knowable’s paid courses instead as a substitute for short breaks of ‘mindless mobile time’, could prove an easier sell. By modularizing courses and optimizing for the ~5-minute clip for a sizeable part of each course, Knowable can help users feel productive and inspired during short breaks.
  • One-click learning. ‘Inconvenience’ was another reason my interviewees didn’t listen to educational audio when they had less than 15 minutes to spare. The current Knowable app takes a full four clicks to access audio from startup—no wonder Instagram and Twitter feeds dominate our short breaks! We can cut the accessibility time down to a single click by featuring a widget (as shown in the image), making learning convenient enough to replace mindless mobile time.
Isaiah Baldissera UI UX Design Mobile App Learning edtech
Webapp designed for convenient sharing and listening.

PROBLEM 2: Difficulty sharing audio.

Only one person I interviewed had shared non-music audio clips with friends. They all shared text-articles regularly, but why not audio? As the fundamental driver of organic growth, the sharing issue is as important to the company’s viability as any. One reason cited by those I spoke with was not knowing how to share a selection of a lengthy audio file—largely a non-issue with short, modularized clips. The other reason was that users thought their friends wouldn’t want to download another app.

OPPORTUNITY: Decrease barriers and increase the visibility of sharing.

a) Make sharing easy with a download-free web app player in addition to the native app. Having to download and log in to a new app just to skim a 5-minute audio clip is a huge barrier for most of us, yet, it’s a requirement for most audio players. The ability to immediately listen to shared clips through a mobile browser (see image) could increase the volume of shares and the likelihood they’ll be listened to. In addition, simple playback speed controls and ‘skip ahead’ functions that are visible on the player make a world of difference to the busy autodidact.

Isaiah Baldissera UI UX Design Mobile App Learning edtech
Simple animation to highlight the sharing function at moment of completion.

b) Emphasize and facilitate sharing. Beyond offering short, modular clips and a convenient web app, I see an opportunity to highlight the function of sharing itself. Instead of simply making a share icon omnipresent, the key is to emphasize the function at the moments users may need it most (after a clip has been completed, as shown in the image). Through simple, non-invasive icon placement and animation, the designer can put sharing at the forefront of the user’s mind, while maintaining a high quality experience.

PROBLEM 3: Underutilized Show Notes

This is a missed opportunity that I haven’t seen any app take advantage of. The people I interviewed loved the idea of having Show Notes — the time-stamped lists that provide links and footnotes to the audio itself. However, few made use of them on a regular basis. Why? Too inconvenient— most audio players require users to open a browser just to view them. Flipping back and forth between apps makes for a clunky experience. This is a small, but significant barrier to a feature that users see as enormously valuable, not to mention a great way for producers to gain data on their audiences, and possibly even affiliate revenue.

OPPORTUNITY: Integrate and animate Show Notes to add value to the user experience.

Isaiah Baldissera UI UX Design Mobile App Learning edtech
Show Notes that scroll in sync with audio.

a) Make show notes as accessible as possible. Users say they love them, so why are they usually hidden? Why not put them front and center, and enable automatic scrolling in sync with the audio, so that a user sees the relevant note and link while it’s being discussed? The GIF I’ve created illustrates a simple way to see both the Show Notes and audio controls.

b) Easy link browsing. Show Notes almost always feature external links. The users I spoke with wanted to continue listening to the podcast while browsing these links, but found themselves switching back and forth regularly when they wanted to pause or replay something. I recommend having a native web-view interface (shown in the GIF’s last frames) that allows simultaneous link browsing and control of audio. A straightforward solution that could dramatically increase utilization of a feature users want more of.

Wrapping up

The designs I’ve created are simple enough to be applied to a variety of edtech applications. I hope that by improving the UX/UI of educational audio apps, those of us who are low on time can find an efficient and effective way to learn and grow.

If you have any questions about my work, please get in touch! I’m always looking for good people, new projects, and interesting ideas.

Check out some of the other projects I’ve been working on:

--

--