Lele Zhang | IIElevenLabs

IIElevenLabs

Imagining a simultaneous listening and reading experience

ElevenLabs mobile app homescreen and player mockup.

Team

1 Engineer
1 Designer

Skills

UI Design, UX Design, Competitor Research, Prototyping

Timeline

Nov-Dec 2023

background

ElevenLabs wants to connect to readers as a venue for news and literature.

ElevenLabs is a Series B startup that has revolutionized the landscape of text-to-speech (TTS) technology by delivering hyper-realistic, expressive AI voices. Although they primarily generate consumer experiences, they are expanding their target audience to include enterprise customers through partnering with news outlets and publishers.

ElevenLabs 2023 webapp speech synthesis page.

An example of how ElevenLabs is used by consumers + by enterprise customers

Problem

Delivering news and reading material while introducing a simultaneous reading and listening experience can be confusing and overwhelming for readers.

ElevenLabs challenged me to quickly create a mobile experience that would facilitate consumer access to their AI Voice services alongside reading materials from enterprise customers.

Solution

An import experience embedded into a library, browsing, and AI voice library.

Jump to final solution

arrow_downward

ElevenLabs mobile app homescreen, player mockup, and import page.

Challenge

Working under a short turnaround.

Initially I was working on the spot with the developer, who was concerned about getting a specific mockup done as soon as possible. However, I realized that even with the timeline, I could still focus on how users would navigate the import functions and various libraries within in the app.

Homepage with bookmark symbol, import function list, library button, and player bar.

Image of what the developer initally wanted

Homepage with import function list, library preview, and player bar.

Image of my first mockup during that session

Discovery

How do readers engage in simultaneous reading and listening experiences?

With my limited timeframe, I conducted a competitive audit on three types of platforms that tackled similar problems.

I found that across these platforms, there was a search page, a player/reader page, a library, a browse page, or a fusion of the former two. Search pages often displayed categories of contents and sometimes recommended material beneath the search bar. Library and browse pages often contained a continue/recents section and most popular/recommended material just beneath that.

Listening platforms: Podcasts, Spotify Podcasts & Books, NYT Audio, Podcast App, Audible, Librivox
Players always had the play bar, play/pause button, rewind and fast forward buttons, share buttons, and speaker functions. Sometimes there would be shuffle functions, sleep timers, a queue button, or options to move to the former/past track. The libraries often featured square covers, sometimes deviating with a banner or portrait format to highlight select content. When in squares, audio content was listed vertically and horizontally, depending on the length and purpose of the list.

Reader platforms: Libby, Apple Books, Kindle
Reader players often had a preview of the cover, an indication of where one was within the book, bookmark functions, search functions, and display settlings. Books were displayed in portrait style without accompanying descriptive text.

Text to speech: Speechify, Speak4Me, NaturalReader, AI Text to Speech
Text to speech apps also had the import page, which was sometimes the homepage and sometimes a central button. The import page always listed a variety of import options. The libraries listed material in the same format listening platforms did (vertically with square covers).

Moving forward, I realized that I needed a way for users to easily find all of the above described functions while building on the novel experience ElevenLabs provides with their expressive voice services.

Competitive analysis moodboard of 13 apps.

Images I captured during my competitive analysis

insights

Mobile readers prefer a simplified navigation experience, even in cross-functional contexts.

Mobile users tend to be on the go, so it is especially important to minimize cognitive overload through spacing out content. Therefore, it is especially important to consider how every piece of information is delivered

In mobile experiences, simplicity and prioritization are crucial

Users have to access their libraries, browse content, browse voices, and import content. Only one function can be highlighted at a time.

Listening and reading require multiple modalities

In reading experiences, navigation is intrinsic and invisible, while in listening experiences, the play bar and button are centered. While the listening and reading experiences are navigated similarly, the players differ greatly in how content is displayed.

Multiple functions imply multiple libraries

With the combined functions of the app, there are two sets of libraries: readings, and voices, and personal and community versions of those libraries as well.

NARROWING the problem

How might we create a synchronous listening, reading, and browsing experience for readers while highlighting custom voices?

We wanted to account for all the different functions within the app to create an experience that is simpler overall.

IDEATING

Ideating solutions that focus on the delight of custom voice technology

Beyond building a seamless experiences, I wanted to highlight the experience of making one’s first custom generated output. I focused on ideas that built a sense of play and exploration with responsive feedback and signifiers for users to comfortably explore the custom voices.

Low-fidelity sketches of the app concept

The design concept

Converging on the concept of comfortable play

I found that emphasizing moments of novelty leverages the custom voice experience while reducing moments of confusion and apprehension for the user.

DESIGN ITERATIONS

Refining explorations

Generally, ElevenLabs found the explorations intuitive and enjoyable. However, they found some parts needing clearer communication of options, clarity of user action, or were not necessary in the interface.

Voice settings menu page and voice settings page with arrow to combined page.

Iteration 1

Reduce user actions with simplified display to access settings

Player screen with play button and player bar on the right with arrow to screen with expand button, play idea, highlighted text section, and scroll/player bar.

Iteration 2

Clarify product purpose with developer-approved visual elements in the minimized player

Screen with save button, listen button, and voice preview with voice icons, bookmark, voice information, and library button with arrow to screen with listen button, done button, and voice preview with icons, information, bookmark, and preview button.

Iteration 3

Provide voice details and use iconograpy to clarify user context

THE FINAL SOLUTION

Explore AI voices through responsive delight.

A streamlined import experience embedded into an AI-powered platform that helps readers navigate their library, browse new additions, and explore AI voices.

Quickly import information and test AI Voices

Users can easily toggle between import options like writing/pasting text, taking/uploading photos, URLS, and files, which they can then listen to with AI voices.

Navigate your library and find new additions

With filters and sorting in their personal library, and time filters, personalized recommendations, popular selections, and curated categories in the browse section, users can easily find their generated output, and new additions.

Read and listen according to your preferences

Readers can easily shift between a larger player with more functions and a mini player that highlights the text. A progress bar at the side acts as a way to monitor progress and move throughout a reading.

INSIGHTS, ANSWERED

Overwhelming amount of features -> prioritize library access

Multiple conflicting modalities -> flexible player displays

Lots of libraries -> filtering and curation

client feedback

“this is pretty awesome“

Mobile App Developer at ElevenLabs

REFLECTIONS

Key learnings

It was really fun to work with an engineer to develop the low-fis and using user-centered design while asking questions about the app. I learned so much from working in an accelerated environment about mobile app development and prototyping. Some key takeaways:

Sometimes what someone is asking for can look drastically different from what they want. Through walking through the needs of the user with the engineer, I was able to get to the crux of the request much quicker.

You can’t do everything on your own. While I wanted to be comprehensive to build out the overall experience in the app, I realized that with a limited time frame, I would have to over-compromise on quality. During this project, I learned about building in stages and to focus with a broad task.

Kuma

Expediting connections for a healthier future.

arrow_forward

Solution

arrow_downward

Imagining a simultaneous listening and reading experience

Let’s build something together ☺