Audio Player:
The creation of the O'Reilly audiobook feature
TL;DR
I helped create the audiobook experience for O’Reilly’s mobile app, moving from a video-player workaround to a purpose-built, mobile-first audio solution. As one of two product designers, I led user flow mapping, competitive analysis, iterative design, and usability testing. Through unmoderated Maze testing, we used a diverge-converge approach to explore layouts and validated decisions, like chapter skip, playback speed, and mini-player behavior. With tight constraints (8-week timeline), we scoped an MVP while designing toward a full-featured vision. The result was a 150% increase of audiobook consumption on the platform and doubled app usage between iOS and Android devices within the first two quarters post ship. It continues to serve users well with minimal post-launch revisions.
Overview
O'Reilly Media, Inc. is a learning company that delivers technical and professional development through its online platform. Alongside books and courses, O’Reilly offers audiobooks to support subscribers who prefer learning through listening or want the flexibility to learn on the go. Initially, the mobile app used a stopgap solution—streaming audio through the video player in audio-only mode. To better serve audiobook listeners and improve performance, we reimagined the audiobook experience from the ground up with a mobile-first approach explicitly tailored for audio learning.
Roles and responsibilities
I served as one of two product designers on the native mobile app team and co-led the end-to-end design of the audiobook player experience. We kicked off with research, analyzing best practices across existing audiobook players and clearly defining the problem we aimed to solve. I mapped user flows to visualize key journeys, explored and iterated on design solutions, and gathered stakeholder feedback throughout. We conducted usability testing to validate our designs and refine the experience, then handed off to engineering seamlessly. Post-launch, we tracked performance and user feedback to ensure the experience aligned with listener needs in real-world use.
Scope and constraints
The product requirements document intentionally kept the scope for this net-new experience relatively light to enable a quick release. The roadmap included plans for a fast-follow mini-player and a few dedicated sprints for future upgrades. With scope creep always a risk, we designed our ideal end-to-end experience and strategically pared it down to a focused MVP that aligned with our timeline. We had eight weeks total from discovery through design and into dev handoff, so clarity and prioritization were key to delivering a solid foundation for the audiobook experience.
My process
Competitive Analysis
A key advantage of this project was starting from scratch—free from legacy constraints. During discovery, I led a competitive analysis of dozens of audio players, noting effective patterns, standout features, and future-facing ideas. We broke the interface into modular components and explored layout variations in box-based sketches, allowing rapid iteration without being tied to existing norms. These insights laid the foundation for our native player.
To maximize collaboration, we used a diverge-then-converge approach: Each of us selected our favorite rough layouts to refine individually, then regrouped to compare, critique, and align on the strongest directions moving forward.
As we refined layouts, a clear hierarchy emerged: playlist and share actions near the top, core playback controls centered. We also began exploring placement and sizing for a future mini-player to ensure it fit seamlessly within the native app.
We spent time refining the layout in low fidelity but moved to high fidelity early due to the icon-heavy interface. The only image element to accommodate was the audiobook cover, which varied between rectangular and square formats.
Designing for both iOS and Android required balancing consistency with platform-specific norms. Backend constraints and native interaction patterns meant the experiences couldn’t be identical, but we aimed for overall parity where it mattered.
We ran though dozens and dozens of possible layouts between both Android and iOS devices
We brought in the broader product design team for group feedback at this stage. We had established a solid foundation, but several problems still needed refinement through critique and discussion. Key topics included:
Whether to include chapter skip functionality and how it would integrate into the main controls
Feedback on play/pause iconography and whether it aligned with user expectations
Clarity and consistency of the seek icons (15s back / 30s forward)
Overall user experience around playback speed selection on Android
Early thoughts and input on the mini-player design and its future integration
Seek Button Timing
We chose 15-second rewind and 30-second forward skips based on common patterns seen in podcast apps—supporting quick replays and ad skipping, respectively. While we don’t have ads, we prioritized familiarity and user control. Two years later, with minimal feedback, these timings remain unchanged, validating our decision
Though the interface’s top and bottom felt settled, debate remained over keeping chapter skips and seek button timings (15 seconds back, 30 forward). Testing would help answer these questions.
Mini-Player
Designing the mini-player meant balancing constant access with minimal disruption. We included essentials like play/pause, 15-second rewind, a close ('X') button for control, and contextual cues like the book cover and scrolling chapter title. Tapping the mini-player expands it into the full player for deeper functionality.
The mini-player required a flow chart as it needed to be anchored to the bottom everywhere with the app, except on the audio player.
With the team's feedback, we decided to run another round of diverge-then-converge, this time in high fidelity. The goal was to interpret the feedback individually and explore how it could shape the next iteration of the audiobook player.
We split our design space again and approached the task by first outlining goals and key user tasks. We created separate prototypes from there, incorporating the latest design decisions and refinements. Once the high-fidelity prototypes were ready, we set up unmoderated usability testing using Maze to gather insights directly from users.
testing
Prototype A on the left, and Prototype B on the right
We ran unmoderated usability testing in Maze with 20 participants—10 per prototype—all with prior audio player experience. While Maze's desktop-only format and lack of live audio playback posed limitations for our mobile-first design, the test still offered valuable directional feedback, revealing usability trends and user preferences.
Task 1: Table of Contents
Find and start listening to the chapter on how to manage a team.
Can users correctly identify the table of contents (TOC) icon? Do they understand how to navigate within the audiobook?
Since the TOC was the most-used Reader feature, I proposed moving it right for better thumb access and tested its discoverability. We also tracked confusion with the similar-looking 'add to playlist' icon to see if users mis-tapped or chose correctly.
Task 1: The table of contents icon (left screen, bottom right icon) opened the TOC screen on the right through the use of a bottom sheet
Result and Recommendation:
Direct success of 90% for both A and B tests. The heatmap suggested that completing this task was enough for us to keep the icon in the bottom right corner.
Task 2: Chapter Skip
Restart the current chapter from the beginning.
This task aimed to validate whether a chapter skip function was essential. To keep the UI minimal, we tested a version without it and observed whether users struggled, found workarounds, or noted its absence—offering insight into its necessity and intuitiveness.
Task 2: Prototype A (left) demonstrates that a chapter skip was beneficial. Prototype B (right), had users tapping the 15-second back button multiple times to return to the beginning of the chapter. After the test, testers from prototype B mentioned they'd like an easier way to move between chapters.
Results and Recommendation:
Results supported including the chapter skip feature—users navigated more confidently with it, and the interface felt clearer. Three of ten testers without it explicitly asked for an easier way to switch chapters, reinforcing that the feature was both expected and needed.
Task 3: Mini player
You missed the last few seconds of your current audiobook while browsing the app.
Back up to the portion you missed.
Testing the mini-player allowed us to evaluate whether users recognized it as an interactive element or saw it as part of the static interface. We wanted to ensure it felt actionable - users understood they could tap it to return to the full player view, without overwhelming the rest of the screen.
Task 3: Do users know they can interact with the mini-player? This heatmap says yes.
Result and Recommendation:
With a 95% success rate we felt the mini-player was intuitive as designed.
Task 4: Playback speed
Double the current listening speed.
We explored various enhancements for playback speed control but simplified it for the MVP. Prioritizing clarity and ease of use, we delivered a straightforward version that met user expectations, with plans to iterate in the future.
Task 4: Our tap through playback speed cycled through five various speeds by half speed increments from 0.5 through 2.0 and tested extremely well.
Results and Recommendation:
100% success rate. Keep it as-is for now, but continue exploring other ideas that add surprise and delight in the future.
We also tested interactions with the progress bar and the download feature. Our goal for the progress bar was to see if users recognized it as an interactive element and whether they would tap or drag it to navigate within a chapter. The download task focused on icon clarity and recognition. Users were asked to save the book to their device, which helped us evaluate whether the download icon was intuitive and easily discoverable in the context of the audio player.
Left screen tested user awareness of the progress bar being interactive. Right screen tested download icon findability and clarity.
Once testing wrapped up, we used the insights to finalize updates to the interface and overall experience. With the core mobile designs locked in, we shifted our focus to additional screen formats - designing for Android tablets and various iPad views, including regular, compact, and split-screen modes. This ensured a consistent and optimized experience across multiple devices and use cases.
final screens
Presenting the final iOS audio player MVP
iPad MVP
iPad horizontal split views
iPad portrait split views
outcomes & lessons
Audio player’s result was a 150% increase of audiobook consumption on the platform and doubled app usage between iOS and Android devices within the first two quarters post ship. It continues to serve users well with minimal post-launch revisions.
The audio player remains my favorite project I worked on at O’Reilly. Building something net-new brought a unique set of challenges—defining our own MVP requirements, continuously evaluating feasibility with engineering, collaborating closely with my design partner, and communicating clearly through evolving ideas. One of the most rewarding aspects was the close partnership with the engineering team. Through constant dialogue, I gained a deeper understanding of platform-specific behaviors, especially around iPad, and learned how to communicate more effectively with developers. This project stands out as a true example of how strong cross-functional collaboration can elevate the design process and the final experience.
