Award Badges
SCHOOX
Digitized enterprise certification tracks for Sport Clips
Refining the mobile awarding experience to transform achievements into professionally valuable milestones.
Overview
I led the mobile UX and UI redesign for the Award Badges system, optimizing the awarding workflow for admins and learners on the go. By focusing strictly on the mechanics of viewing, filtering, and bestowing rewards on mobile, I ensured that high-impact recognitions could be made contextually and instantly. Because of significant engineering and time constraints, the creation of badges was explicitly removed from the mobile scope and deferred to a future implementation. This strategic narrowing of focus allowed me to deliver a polished, efficient mobile-awarding interface.
Goals:
Streamline Mobile Awarding: Simplify the user flow on mobile devices from badge selection to confirmation, especially for multiple recipients.
Establish High-Trust UI: Create a visual language focused on professionalism and clarity to ensure achievements feel earned and professionally valuable.
Ensure Systemic Consistency: Develop mobile components that align with the minimalistic aesthetic of the broader design system
ROLE
Product Designer (Mobile)
RESPONSIBILITIES
UX Mobile Strategy, Mobile UI Integration, Awarding Flow Optimization, Behavioral Measurement
COLLABORATORS
Product Management, Design Systems, Engineers, Product Designer (Web), UX Researcher
YEAR
2024
Redesign
Following the completion of the core LMS redesign and award badges/social feed implementation, I chose to independently revisit the platform's visual architecture. Although the shipped version met all business requirements and was performing well according to our metrics, I saw an opportunity to push the UI/UX toward a more premium, high-density aesthetic.
ELEVATING VISUAL HIERARCHY
I wanted to explore more sophisticated ways to manage deep-nested data, such as organizational charts and complex course progress, without overwhelming the user.
MODERNIZING THE IDENTITY
The goal was to transition the platform from a "standard corporate tool" to a sleek, modern workspace; aligning it with the expectations of high-growth tech teams.
PERSONAL PROFESSIONAL STANDARD
This was an exercise in pure craft, allowing me to apply updated design patterns - like refined shadows, border-radius logic, and enhanced data viz - that I felt would improve the long-term "feel" of the product.
The Challenge
While the overall project sought to replace generic gamification "noise" with meaningful symbols of achievement, the core mobile challenge was functional: managers needed a high-trust, fast way to award these symbols contextually. The existing mobile interface made filtering hundreds of badge types and potentially thousands of recipients practically impossible. The goal was to take the powerful backend capabilities - including AI-driven badge definitions designed by the web team - and deliver them through a simple, satisfying mobile card UI
BUSINESS NEED
Increase platform engagement and behavioral loyalty through professionally valuable psychological incentives.
USER NEED
Admins need a mobile experience that allows them to instantly identify and reward specific behaviors without manual overhead.
Legacy Badges screen
Discovery Phase
I led a mobile-specific audit of existing patterns to identify why current recognition felt low-value and difficult to manage on a small screen. We mapped the "Mobile Awarding Journey" - from an admin identifying a standout behavior to the final "Badge Awarded" confirmation - to ensure the system felt lightweight but professionally significant.
We identified three mobile pillars for the badge ecosystem:
ACCESSIBILITY
Simplify the badge library into searchable categories, allowing managers to find the right "tier" of reward without excessive scrolling.
PRECISION
Implement robust filtering logic that allows for multi-recipient awarding by organization unit or group, solving the pain point of selecting individuals one-by-one on mobile.
VALIDATION
Optimize the visual assets for mobile cards, ensuring that high-fidelity details (like gradients and borders) signal mastery even on smaller displays.
PROBLEM TO SOLVE
Admins perceive generic gamification on mobile as functional "noise" because rewards are not delivered contextually; current workflows for navigating badge types and filtering thousands of potential recipients are unmanageable on a mobile device, rendering the gamification system low-impact for intrinsic motivation.
Research
Gathering Insights
Research conducted by the core team revealed that "meaningless" rewards - generic "participation trophies" - are quickly ignored. While many clients expressed interest in gamification, our competitive analysis of tools like Docebo showed that badges were often relegated to a static list, providing little real-time value to managers.
One key observation showed that some admins primarily awarded badges only for coarse, mandatory completions rather than using it as a flexible, social recognition tool. This research validated my strategic decision to prioritize on-demand, contextual awarding features specifically for admins on mobile, ensuring they could recognize high-value behavior the moment it happened.
Emerging Themes
SCARCITY & STATUS
For a reward to feel professionally valuable on a mobile profile, the UI must clearly distinguish between a basic participation mark and a high-tier achievement.
AWARDING VELOCITY
Managers need to filter through thousands of potential recipients and dozens of badge types instantly; any friction in this search-and-assign flow leads to feature abandonment.
INSTANT FEEDBACK
Because mobile interactions are transactional and brief, the "success state" of awarding a badge must be visually undeniable to prevent duplicate awarding.
Docebo (competitor) screenshot
HOW MIGHT WE
How might we design a streamlined mobile experience for contextually filtering and awarding professionally valuable status symbols, ensuring that gamification can be applied instantly and meaningfully on the go?
User Testing
Testing the Solution
Because badge creation was explicitly deferred to future mobile implementation, our testing focused entirely on the consumptive and awarding side. Usability testing on mobile prototypes with admins validated the contextual filtering workflow. To gather actual usage data post-launch, we utilized UX Cam to measure behavioral trends and engagement frequencies within the mobile flow.
Mobile Awarding Learnings
VISUAL HIERARCHY
Insight: Managers found selecting 100+ individual members on mobile extremely tedious.
Action: Improved filtering logic to allow for intuitive multi-selection by org units or predefined groups on mobile, enabling "mass awarding" instantly.
PROGRESSION TRACKING
Insight: Users did not always realize if the awarding action was successful, leading to duplicate rewards.
Action: Partnered with Design Systems to create a highly-visible, polished "Badge Awarded!" animation to provide instant psychological feedback and transactional clarity.
SOCIAL SHARING
Insight: Navigating between 'System', 'Corporate', and 'Group' badges was fragmented.
Action: Created a unified mobile view that defaults to showing all types, with contextual filtering available to narrow the selection.
Legacy Badges screen
Redesigned Badges screen
Impact
The Results
The mobile improvements to the Award Badges system transformed it from a non-functional feature into a critical contextual tool. By aligning the system with the sleek design system and simplifying the mobile logic gates, we created a gamification engine that successfully drove intrinsic motivation and behavioral recognition.
Improved Adoption For Enterprise Certification Tracks
Reduced Operational Friction for Multi-Recipient Awarding
Validated System Efficiency by Regional Administrators
What I Learned From This Project
SIMPLIFYING LOGISTICS IS THE DESIGN VALUE
In highly-constrained environments like mobile, the greatest design work isn't the final visual; it's the invisible logistical logic that makes a task like filtering thousands of members feel effortless.
CONSTRAINT PRIORITIZES IMPACT
Removing the complex "badge creation" task from the mobile scope allowed me to dedicate deep focus to the awarding flow; the functional part of the system that actually drives engagement on the floor.
COLLABORATION PREVENTS DUPLICATION
Partnering closely with the Web Product Designer and the Design Systems team taught me how to ensure visual and functional cohesion across platforms while respecting the technical boundaries of each environment.
PORTFOLIO
MORE CASE STUDIES
LIVE APP
COMPLEXITY MAPPING
AI SHIP LOG
Social Feed
Social Feed
Social Feed
MOBILE PRODUCT DESIGN
INTERACTION STRATEGY
ENGAGEMENT SYSTEMS