Case Study

Designing a scalable content experience

tl;dr

I owned the “in-content learning experience” on the O’Reilly learning platform and led various feature releases and design enhancements since 2022, This case study details how I re-designed the content experience and defined rules to govern how the UI adapts to various usage and context scenarios to support the feature releases planned for Q2 - Q3 of 2024. These updates were released to all users in August 2024 and have enabled usability improvements which led to increased user satisfaction and content engagement as a result.

Redesigned the in-content experience to support future growth.

The video player supports learning through synchronized AI-generated transcripts, allowing learners to follow along, search spoken content, and navigate directly to specific moments in the lesson.

I led the redesign of O’Reilly’s in-content learning experience to create a UI framework that could scale with the platform’s expanding feature set. This case study explains why the work was initiated, the design decisions that shaped it, and the implementation challenges I navigated along the way.

The existing interface could not accommodate the growing number of features planned for 2024.

Over time, new controls had been added to the same area of the interface, weakening its information architecture and making relationships between features increasingly difficult to understand.

The original experience exposed multiple visually similar controls with little distinction between their purpose. I introduced a dedicated transcript action bar to improve discoverability and reduce cognitive overhead.

Product stakeholders were concerned that continuing this approach would negatively affect customer perception and the overall quality of the platform. From a UX perspective, leaving the problem unresolved would make the interface harder to learn and navigate as additional functionality was introduced.

I developed a conceptual framework that defined where and how features should appear throughout the interface.

Working closely with product stakeholders, I mapped controls according to usage frequency, functional purpose, and impact scope because those characteristics most directly influenced placement and presentation.

Before designing the interface, I modeled the relationships between content types, shared capabilities, and interaction patterns to establish a common understanding of the product domain and inform a scalable information architecture.

The resulting conceptual model created a shared understanding of how the interface should evolve while providing a consistent decision-making framework for future enhancements.

I used conceptual modeling to align cross-functional teams

I first introduced conceptual modeling to O’Reilly’s Product Design organization in 2022 to help teams align on complex product requirements. I reintroduced the approach for this initiative to establish shared understanding and create alignment across product, design, and engineering.

While stakeholder alignment was important, the success of this project depended on creating a logical UI framework that would continue to scale as new capabilities were introduced.

Because learners would ultimately experience these decisions firsthand, validating them with users was essential. Our Chief Product Officer approved usability testing, allowing me to evaluate the proposed layouts before engineering implementation.

The following examples highlight the resulting designs for both video and text-based learning experiences.

I made badge eligibility visible without adding interface complexity

I moved the content title into the bottom navigation to create space for badge eligibility indicators. Placing the badge icon alongside the title allowed learners to easily recognize eligible courses and claim badges once they met the required criteria.

I introduced a contextual “Claim your badge” action after observing participants consistently search for it within the course contents panel during usability testing. Placing the action where users expected to find it improved discoverability and reduced unnecessary exploration.

Integrated coding tools into a consistent learning tools framework.

For books that support hands-on coding, I represented the sandbox as part of a dedicated group of learning tools in the upper-right corner of the interface. Grouping related capabilities together improved consistency while keeping instructional content as the primary visual focus.

I reorganized global interface controls according to their scope and purpose, separating environment-level actions from content-specific interactions. I also replaced the generic floating action button with a dedicated terminal icon, making the hands-on coding environment easier to recognize and access.

Following several stakeholder reviews, I finalized the design direction and conducted an unmoderated usability study with eight participants.

The study evaluated discoverability and usability across several key tasks.

Users easily located reading preferences

Participants were asked to increase the text size while reading a Python book. Every participant quickly identified the settings control, demonstrating that the preferences menu was both discoverable and intuitive.

Usability testing helped quantify the effectiveness of the experience. For each task, I measured success rates, completion times, and navigation patterns to understand where learners struggled and refine the interface accordingly.

Sandbox discoverability required further refinement

Participants were asked to access the coding sandbox to practice Python examples. Although everyone eventually completed the task, half required more than 30 seconds, resulting in an average completion time of 35 seconds.

I replaced the generic floating action button with a dedicated terminal icon that leveraged developers’ existing mental models, making the hands-on coding environment immediately recognizable and easier to discover.

I concluded that the terminal icon was unfamiliar to many participants outside software engineering. I recommended replacing it with an icon more closely associated with hands-on coding to improve recognition across a broader audience.

AI assistant was easy to find but expectations were evolving.

Participants located the AI assistant in an average of nine seconds and responded positively to its availability. Several expected AI functionality to be represented by a star icon, reflecting emerging conventions at the time of the study.

Unlike established concepts such as search or coding, AI lacks a universally recognized visual metaphor. Rather than introducing a novel icon, I positioned “Answers” alongside core learning tools, allowing its purpose to be inferred through proximity and repeated use.

Improved perceived performance by removing unnecessary motion.

While auditing the interface, I identified animation effects that introduced noticeable input lag during layout changes. I removed these poorly implemented interactions, resulting in a more responsive interface and a stronger sense of functional stability.

I removed unnecessary interface animations to prioritize responsiveness over visual embellishment. For developers engaged in hands-on coding, immediate feedback proved more valuable than transitional effects, resulting in a faster and more predictable experience.

To improve perceived performance, I identified every interface component whose animations added latency without providing meaningful feedback. I collaborated with engineering to remove these transitions, resulting in a faster and more responsive learning environment.

Strengthened orientation within long-form content

I redesigned the active table of contents state to make learners’ current location immediately recognizable. Distinct background treatment and a colored vertical indicator clearly differentiated the active module from surrounding content in both light and dark themes.

I introduced a collapsible course overview, allowing learners to reclaim screen space once they were familiar with the course structure. This kept the focus on the content while preserving quick access to navigation when needed.

I strengthened the visual hierarchy by making expandable modules easier to distinguish from standalone content and increasing text contrast to improve readability throughout the course outline.

Improving engineering handoff through clearer implementation guidance

Engineering teams primarily worked from Jira tickets, but supporting design assets were not always referenced during implementation. As a result, interaction details such as focus states and keyboard accessibility were occasionally omitted because they were assumed rather than explicitly documented.

Design handoff rarely ended with a prototype. I regularly created supplementary implementation artifacts, clarified interaction behavior, and, when appropriate, provided implementation guidance to help engineering translate design intent into a high-quality product.

To reduce ambiguity, I created supporting implementation guidance, including a reusable spacing system after the team temporarily lost access to Figma Dev Mode. These resources helped engineers implement layouts more consistently while reducing design discrepancies during QA.

I established a spacing system to bring consistency and rhythm to the interface. Standardizing spacing values reduced ambiguity during design and implementation, making layouts more predictable, scalable, and visually cohesive.

I continued supporting implementation throughout development by answering questions, providing clarification, and identifying issues during quality assurance. The experience reinforced how comprehensive design specifications directly improve implementation quality and reduce rework.

Through experience, I learned that effective handoffs are not about documenting everything—they’re about documenting the right things. The goal is to provide enough clarity to support implementation without overwhelming engineers with unnecessary detail.

Established a scalable framework with stable product outcomes

The redesign was released to 100% of users at the end of August 2024. Beyond improving overall satisfaction with the interface, the project established a formal conceptual model and UI framework that stakeholders continue to reference when determining how future capabilities should be integrated.

I designed the in-content reading experience to prioritize readability during extended reading sessions, with support for both light and dark themes to accommodate different environments and user preferences.

Because this initiative was preventative rather than optimization-focused, success was measured by preserving existing performance rather than driving KPI improvements.

Metrics remained stable throughout the rollout, confirming that the redesign successfully accommodated future growth without disrupting the learner experience.

Next Case