Award Badges - Mobile App Redesign
Badges are a key part of gamification in Schoox, helping organizations recognize achievements and motivate learning. I led the mobile experience, designing intuitive flows for filtering and awarding badges, while ensuring the process remained engaging and touch-friendly. My work focused on simplifying complex badge management for small screens and creating delightful interactions.
UX/UI Design | Mobile
Project Summary
Role
Mobile Product Designer
Collaborators
PM
Web Designer
Engineering
Design Systems
Problem / Opportunity
Web experiences for badges offered flexibility but were dense and difficult to navigate on mobile:
Selecting recipients for thousands of users was cumbersome on small screens.
Awarding badges lacked visual feedback and delight to reinforce engagement.
Key Questions
How might we simplify badge awarding for mobile users?
How can mobile users quickly filter, select, and award badges to individuals or groups?
How do we make the process delightful, intuitive, and consistent with gamification principles?
Before (of Create badge UI)
After
Research & Insights
Methods
User interviews
Analytics
Findings
Users wanted an option to see all badge types in one view, while being able to toggle between separate pages.
Selection of recipients must be fast, clear, and error-proof on touch devices.
Gamification is more engaging when award interactions provide visual feedback.
Insight
Mobile design needed consolidated views, touch-friendly selection, and satisfying micro-interactions to encourage engagement.
Competitor analysis
Problem Definition / HMW
HMW enable efficient recipient filtering and selection for large organizations?
HMW make awarding badges feel rewarding and delightful?
User flow of the admin journey
Empathy map of the admin journey
Maria, L&D Manager
Mid-level HR/L&D admin
Manages multiple teams across different locations
Uses badges to encourage engagement and reward top performers
Ideation & Exploration
Explored single-view dashboard for all badge types with filters.
Improved recipient selection: multi-select, hierarchical group selection, and clear touch targets.
Designed award feedback animation to reinforce positive action.
Mobile-specific challenge
Consolidating multiple badge types and award flows into a single, scrollable mobile interface.
Handling large groups and thousands of recipients in a touch environment.
Maintaining clarity and delight while avoiding overwhelming UI.
Visual guidance
Badge dashboard: scrollable grid/list with tabs
Recipient selection: accordion or nested multi-select with search
Awarding: micro-interaction animations for confirmation
Low-fidelity wireframes
Mid-fidelity wireframes
Design & Solution
Navigating Badge Types
Consolidated System, Corporate, and Group badges into a single mobile view.
Filters allow display of specific types, keeping touch interactions simple.
Filtering Individuals & Groups
Multi-level filtering allows quick selection of individuals or org-level groups.
Touch-friendly selection with highlighted state and clear feedback.
Creating Custom Badges
Users can upload, use AI suggestions, or customize presets.
Mobile UI ensures all tools are reachable with one hand, using modals and stepper navigation.
Awarding Badges
Once selected, badges light up to indicate readiness.
Awarding triggers a confirmation animation, providing delight and clarity.
Mobile-specific optimizations
Single-scroll dashboards for quick overview
Expandable sections for recipient selection
Floating action buttons for key actions
Mobile awarding flow (recipient selection + review)
Testing & Iteration
Conducted mobile usability testing on flows for badge filtering and awarding.
Iterated on:
Tap targets for multi-select
Award animation speed and feedback clarity
Key learning
Users engage more with touch-friendly, visually rewarding actions, so micro-interactions are critical.
Results / Impact
Increased team engagement through intuitive badge awarding on mobile.
Sports Clips adopted the system for a “level up” gamification program, recognizing training milestones with customizable badges.
Reinforced social recognition and motivation, contributing to overall employee satisfaction.
Quote from Client
““Our team members enjoy healthy competition, earning badges, and receiving recognition for training they’ve completed.””
Reflections & Learnings
Mobile-first gamification requires consolidation of actions and clear visual feedback.
Multi-step processes (filtering, awarding) need progressive disclosure to avoid overwhelming users.
Collaboration with web designers and PMs ensures cross-platform consistency while optimizing for mobile usability.
