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.