End-to-end: Badging and completion experience
TL;DR
O'Reilly Media launched a digital badging initiative to make professional development course completion more rewarding and shareable for learners, partnering with Credly to issue verifiable credentials. As the product designer, I led the end-to-end design of the badging experience within a fast-paced six-week timeline. This included mapping and accounting for multiple user flows, designing the experience for key page touchpoints (course pages, user profiles, and the Universal Content Viewer), and ensuring badge visibility, motivation, and ease of sharing.
The high-fidelity designs integrated O’Reilly’s brand elements while maintaining consistency with existing platform patterns. I collaborated closely with cross-functional teams, adapted to changing engineering constraints, and prioritized clarity, engagement, and user motivation. Final deliverables included a new badging experience, documentation for development, and a plan for post-launch user testing to further refine the experience.
Overview
O'Reilly Media, Inc. is a learning company that delivers technical and professional development through its online platform. Over the past year, they made significant progress in evolving their structured learning offerings, allowing users to dive deeper into online courses that support their professional growth. These courses can be self-assigned or assigned by a manager, offering flexibility based on individual or team goals. To make course completion more meaningful, each course is digitally credentialed. Upon finishing, learners receive a verifiable badge that can be shared on LinkedIn, added to resumes and professional profiles, or downloaded as a PDF certificate, providing tangible proof of skills and accomplishments. At O’Reilly, we partnered with Credly to manage badge distribution. This platform allowed us to create, issue, and track digital badges as part of the Badging initiative, a key step in recognizing and showcasing learner achievements.
Roles and responsibilities
I was the product designer responsible for the end-to-end badging experience. Starting with the product requirements document, I mapped out user flows and explored a range of design solutions to support both the learner and admin experience. I collaborated closely with the project manager and product design lead to ensure alignment across teams and to deliver a seamless, intuitive user journey from course completion to badge sharing.
Scope and constraints
This was one of the faster-paced projects I worked on, with the entire design process scoped to just six weeks. The aggressive timeline meant we had to move quickly from concept to final designs, with usability testing deferred until after engineering handoff.
Users and audience
Our core audience consists of B2B learners who have completed a course and need official proof of completion. They often share this proof with managers, add it to professional networks like LinkedIn, or use it to meet certification requirements.
Our secondary audience includes admins at B2B companies that use Credly. These companies rely on trusted, pre-approved O’Reilly courses to encourage employees to build essential job skills through the O’Reilly platform.
Process and what I did
User Flows
I created multiple user flows based on the project requirements, each focused on different stages of the badging journey. These included:
Building badge awareness and guiding users toward earning a badge
Displaying course progression within the learning experience to show how much content remained before a badge could be earned
Defining the interactions required for a learner to “accept” and claim their badge
Some courses required passing a final exam to earn a badge, while others considered a badge earned upon reaching 80% completion. I also accounted for multiple entry points to claim a badge—whether a learner finished a course after the badge system launched, or retroactively claimed a badge for a course completed within the previous six months.
Collaborating with cross-functional teams helped me fill in gaps in the process and gain a deeper understanding of the broader badging ecosystem. This ensured the final experience was both cohesive and accurate across all scenarios.
A few of the user flows that were created for badge awareness and claim within the platform.
The user flows helped identify which areas of the platform would need to surface badge awareness and at what point the badge could be claimed.
I determined that four key pages required updates:
Live Course Product Detail Page
On-Demand Course Product Detail Page
User Profile Page
Universal Content Viewer (UCV)
When a user clicks on a course title, they land on a Product Detail Page - either for a live or on-demand course. These pages provide all the relevant information a user needs to decide whether the content fits their goals. Integrating badge awareness here ensured learners were aware of the credentialing opportunity before beginning the course. Upon 80% completion of the course, the badge could also be claimed from this page.
The User Profile Page, accessible via the global navigation, contains key user data such as playlists, history, highlights, and notes. It serves as a central hub for tracking personal learning progress. Badge awareness from this page directs the user to the course content page which allows them to sign up for a course. Once within the course and at 80% they can claim their badge.
The Universal Content Viewer (UCV) is the primary interface for consuming content, whether a course, audiobook, or book. It functions like a reader and learning environment combined. Since users spend significant time within the UCV, surfacing badge progression here was essential to keeping learners aware of their progress toward completion in real time.
Next, I created a detailed document outlining the necessary UI states for each of the four key pages. This helped guide the structure of the low-fidelity wireframes and ensured we accounted for the full range of user scenarios—before, during, and after earning a badge.
One key requirement from stakeholders was to celebrate the moment a user met the badge criteria. This meant immediately surfacing a clear, encouraging message or UI element at the point of completion to recognize their achievement and prompt them to claim their badge.
A portion of the on-demand product detail page required states. Accounting for various states was necessary before beginning low fidelity.
Low Fidelity
Working in low fidelity allowed me to move quickly and efficiently while exploring the ideal user experience. Through design critiques and collaborative feedback, the product design team helped surface the strongest directions for the four pages that required an update.
For the Product Detail Pages, we landed on a layout that used the center column of a three-column structure. This placement ensured the badge reminder was immediately visible without being constrained by narrow side columns, while also allowing room for future scalability.
We added a prominent CTA button that invites the user to jump into the course and uses encouraging language to reinforce motivation. Additionally, the course timeline was updated to end with a badge icon, allowing us to visually signal that a reward is waiting at the finish line and reinforcing the completion goal.
The badging experience on the Product Detail Page accounts for various states, all following our grid system and kept within the center column of the product detail page.
The User Profile Page was designed to serve as a centralized collection of earned badges. Each badge displayed includes clear status indicators demonstrating whether it's ready to be claimed or earned, allowing users to track their achievements easily.
Users can claim a new badge from this page or view an already-earned one. The layout was intentionally kept clean and scannable to make the collection feel rewarding and easy to navigate, while also supporting quick actions tied to each badge.
“Your Badges” is a new section within the profile page and allows the user to accept or view their badge.
The Universal Content Viewer (UCV) experience was shaped by engineering constraints and the need to align with the existing framework. Since the UCV uses a persistent right-side rail to house key tools and actions, we followed this established interaction pattern for consistency.
As a result, the new badge experience was integrated directly into the side rail alongside the other icons. This approach maintained UI cohesion, minimized disruption to the current layout, and ensured users could easily access their badge progress without breaking their learning flow.
Upon hitting 80% completion within a course, a new icon in the shape of our badge would appear at the bottom in a celebratory fashion, allowing the user to claim the badge from this screen.
Course outline
While other teams worked through the badging implementation, I took the opportunity to focus on enhancing the course outline experience as a bonus initiative. Historically, the course outline served only as a static overview of the course material. Our product design lead had already started exploring this experience in low fidelity. Once stakeholders approved the wireframes, I fleshed them into a more engaging and functional design.
User research has shown that our learners rarely follow a perfectly linear path through content; jumping around is far more common. Given that one of our primary goals with badging was to guide learners toward course completion, the course outline presented itself as a key opportunity to support that goal.
We added a visual progress bar next to each chapter in the outline, giving users a quick, scannable view of which sections they had completed and which still required attention. To further increase interactivity and encourage re-engagement, each chapter now includes a play button that serves two purposes: it acts as a bookmark to indicate where the learner last left off and provides a seamless entry point back into the content, reinforced by contextual chapter titles.
Original low fidelity course content outline
Before moving into high fidelity, I created a document outlining all the states the content outline would require.
Eventually, this long timeline was broken down into chapter sections.
Breaking it down like this grouped the chapter content to be easily parsed for better scanability, but also displayed the information in more easily digestible blocks.
Instead of looking at the course in its entirety and potentially becoming overwhelmed with the required time, the timeline progress bar and chapter blocks encourage the user to jump in as the time needed to complete individual sections is displayed in more manageable sections.
High Fidelity
Once I received the badge assets from the Brand team, I transitioned into high-fidelity design. This phase allowed me to solidify the experience, establish a visual hierarchy, and infuse the pages with creative energy aligned with the O’Reilly brand.
O’Reilly is widely recognized for its iconic animal illustrations, so we chose the badger as the face of the badging experience—a playful nod that felt thematically appropriate. On the Product Detail Page, I positioned the badger within the progress bar area, using subtle animation and movement to draw attention to course progression and completion.
The badger’s movement wasn’t just decorative - it was intentional.
By relocating the badger along the progress bar as users advance through the course, we tapped into the goal-gradient effect: the psychological phenomenon where people are more motivated to complete a task as they perceive themselves getting closer to the end. This movement added a layer of anticipation and delight, encouraging learners to keep going and see where the badger would appear next.
On the Profile Page, each badge features the official badge asset alongside the course title and a course-level label. We intentionally limited the number of badges displayed for the MVP to keep the interface clean and focused. Course completion data will inform the final decision on how many badges to show by default, allowing us to scale the experience appropriately based on user behavior.
In the Universal Content Viewer, once a user reaches 80% course completion, a celebratory moment is triggered—an animated badger bursts onto the screen with confetti, marking the milestone. After the confetti fades, the badge transforms into a persistent button in the UCV’s side control rail, aligning with the existing interface pattern. When a user hovers over the badge, the badger playfully peeks through, encouraging them to claim their badge. Once claimed, the tooltip updates to reflect the new state, prompting the user to view their badge instead.
Next Steps
Key stakeholders were involved in shaping the final experience and approving the designs. Now that the direction is solidified, my next steps include integrating stakeholder feedback, designing additional screens for error, hover, and focus states, and creating comprehensive documentation to support engineering implementation. Once the handoff process is complete, I’ll partner with the UX Research team to conduct unmoderated and moderated user testing to validate and refine the experience.
Outcomes and Lessons
The engineering team initially encountered challenges integrating with Credly, particularly around how badges could be accepted and claimed. This had a direct impact on the user flows and my design work. Given the tight timeline of the initiative, I did my best to keep flows updated in real-time. However, after guidance from the product design lead, I paused to let engineering work through the complexities. This decision proved valuable—it allowed me to step back and gain a more holistic understanding of the evolving product before refining the user flows more confidently and accurately.