End-to-end:
Badging and completion experience
TL;DR
O'Reilly Media, a SaaS company, introduced a digital badging initiative to enhance the value and shareability of professional development course completion, partnering with Credly to deliver verifiable credentials. As the product designer, I collaborated with the project design lead to execute the end-to-end design of the badging experience within a fast-paced six-week timeline. I mapped and accounted for multiple user flows, crafted key page touchpoints, and optimized badge visibility, motivation, and ease of sharing.
During the process I integrated O’Reilly’s brand elements into high-fidelity designs while preserving consistency with existing platform patterns. To maintain alignment I partnered with cross-functional teams, navigated evolving engineering constraints, and prioritized clarity, engagement, and user motivation throughout the process. In the end, I delivered a badging experience, produced detailed documentation for development, and outlined a post-launch user testing plan to further refine the experience.
In the end I translated product requirements into clear, actionable deliverables that guided engineering in building a badging experience aligned with key platform touchpoints. The experience informed users of the value behind completing certified courses, effectively driving engagement. As a result, the first quarter saw an 8% increase in course completions and secured new contracts with third-party course designers to expand the course catalog over the following year.
Overview
O'Reilly Media, Inc. is a SaaS 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.
Goals
The company set two primary goals: first, to boost user engagement by increasing course enrollment and completion; second, to collaborate with company administrators seeking targeted employee training, thereby expanding course offerings through third-party designers.
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.
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.
My Process
Roles and Responsibilities
As the product designer, I partnered with the project design lead to craft an end-to-end badging experience. Beginning with the product requirements, I mapped user flows and developed design solutions that supported both learner and admin needs. I also collaborated with the project manager and engineering lead to align cross-functional efforts and deliver a seamless, intuitive user journey—from course completion to badge sharing.
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 awarded badges at 80% completion. I designed for multiple badge claim entry points—whether users completed a course post-launch or retroactively claimed badges for courses finished within the previous six months.
By collaborating with cross-functional teams, I identified process gaps and deepened my understanding of the broader badging ecosystem. These efforts ensured a cohesive, accurate experience across all use cases.
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 users clicked a course title, they landed on the Product Detail Page (PDP) for either live or on-demand courses. These pages presented essential information to help users evaluate whether the content aligned with their goals. By integrating badge visibility here, it ensured users were aware of the credentialing opportunity before starting. Upon reaching 80% completion, they could also claim their badge directly from this page.
The User Profile Page, accessible via global navigation, served as a central hub for personal learning which displayed playlists, history, highlights, and notes. To introduce badge awareness here, I designed a new “Badging” section. In its empty state, users were prompted via a CTA to explore course offerings. Once they approached 80% completion, they could then claim their badge directly from the profile page.
The Universal Content Viewer (UCV)—the main interface for consuming courses, audiobooks, and books—combines a reader with a learning environment. Because users spend significant time in the UCV, I prioritized surfacing badge progression here to keep learners aware of their real-time progress.
After determining how badging would interact on those four key pages, I created a detailed document defining required UI states across four key pages, which guided the structure of low-fidelity wireframes and ensured coverage of all user scenarios—before, during, and after badge completion.
Low fidelity
After determining how badging would interact on those four key pages, I created a detailed document defining required UI states across four key pages, which guided the structure of low-fidelity wireframes and ensured coverage of all user scenarios—before, during, and after badge completion.
Working in low fidelity enabled rapid exploration of the ideal user experience. Through design critiques and collaborative feedback, I gathered insights from the product design team, which helped identify and refine the strongest design directions for the four key pages of the badging experience.
The Product Detail Pages utilize a three-column layout, which positions the badge reminder for immediate visibility while supporting future scalability. A prominent CTA button invites users to start the course, reinforced by motivational copy. To further emphasize the reward, the course timeline now ends with a badge icon, visually signaling achievement at completion.
A portion of the on-demand product detail page required states. Accounting for various states was necessary before beginning low fidelity.
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 functions as a centralized badge collection—like a digital trophy case. Before enrolling, users encounter an empty badge section that guides them to available courses and facilitates sign-up. Once users earn a badge, they initiate the claim process directly from this page. For previously claimed badges, users can view them and access the Credly website to download their certificates.
“Your Badges” is a new section within the profile page and allows the user to accept or view their badge.
Engineering constraints and alignment with the existing framework shaped the Universal Content Viewer experience. Since the UCV uses a persistent right-side rail for key tools and actions, I designed the badging experience to follow this established pattern.
I integrated the new badge feature directly into the side rail alongside other icons, maintaining UI cohesion, minimizing layout disruption, and enabling users to easily track badge progress without interrupting 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.
high fidelity
After receiving badge assets from the Brand team, I used the feedback I received from multiple teams and transitioned into high-fidelity. This phase strengthened the experience by establishing a clear visual hierarchy and infusing the pages with creative energy aligned to the O’Reilly brand.
O’Reilly’s iconic animal illustrations inspired choosing the badger as the face of the badging experience—a playful, thematically fitting touch. On the Product Detail Page, I placed the badger within the progress bar and used subtle animations to highlight course progression and completion, drawing users’ attention naturally.
The badger’s movement wasn’t just decorative - it was intentional. By moving the badger along the progress bar as users advanced, we leveraged the goal-gradient effect to boost motivation and add a sense of anticipation and delight.
On the Profile Page, each badge displays the official asset alongside the course title and course-level label. To keep the MVP interface clean and focused, I limited the number of badges shown. Future course completion data will guide how many badges display by default, enabling the experience to scale effectively based on user behavior.
At 80% course completion in the Universal Content Viewer, an animated badger bursts in with confetti to celebrate the milestone. The badge then settles into the side control rail as a persistent button, aligning with the existing UI pattern. On hover, the badger playfully peeks out to prompt users to claim their badge; once claimed, the tooltip updates to encourage badge viewing.
Results
I translated product requirements into clear, actionable deliverables that guided engineering in building a badging experience aligned with key platform touchpoints. The experience informed users of the value behind completing certified courses, effectively driving engagement. As a result, the first quarter saw an 8% increase in course completions and secured new contracts with third-party course designers to expand the course catalog over the following year.
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.
Next Steps
Key stakeholders played a central role in shaping and approving the final experience. With the direction solidified, my next steps included designing additional states and preparing engineering hand-off documentation.
