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.
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.