Refreshed UI for Challenges, Habit Builders and Group Programs

We're shipping a completely redesigned participant experience for Challenges, Habit Builders, and Group Programs with a unified, phase-based interface that guides members from pre-registration all the way through completion with clear progress tracking, activity management, competitive leaderboards, and team engagement, all in a responsive layout that works seamlessly across desktop web and mobile app web views.

What's Changing

• The Program Lifecycle The new experience organizes each program into three lifecycle experiences, Overview, My Progress, and Completion. Before a program starts, the Overview page displays a rich preview with the program description, date range (if applicable), rules, and a visual walkthrough of every phase. Once the program is live, the interface automatically display My Progress. After the program ends, the Completion experience takes over with final results and achievements.

• Smart Registration Flow Overview adapts to the member's registration state and program configuration in real time. For date-based programs, before registration opens, a "Registration Opens Soon" badge appears with the open date. Once open, a prominent "Join" button lets members enroll with a single tap, after which a "You're Registered!" confirmation replaces the button along with a countdown to the start date. A phase-by-phase Overview section previews what's ahead, giving members a clear sense of the full program arc before they commit.

  

• Phase-Based Activity Navigation with Rich Activity Tiles During the active program, a horizontally scrollable phase carousel sits at the top of My Progress, showing each phase's status at a glance—completed (green checkmark), current (blue highlight), available, or upcoming/locked. Selecting a phase reveals its activities below, with support for desktop arrow-key scrolling and mobile swipe with pagination dots. Every activity appears as a structured tile showing its type icon (article, video, audio, course, tracker, flow, or general), title, description, point value, and required/optional status. Required activities display an amber "REQUIRED" badge and accent border, while activities with progress—like multi-day trackers or multi-lesson courses—show an inline progress bar with completion percentage. Members can filter by All, Required, or Optional, and toggle "Hide Completed Activities" to focus on what's left.

• Challenge Individual and Team Leaderboards with My Team Panel A dual-mode leaderboard supports both Individual and Team rankings, toggled via a segmented control. The current member's rank is pinned at the top with a "Jump to Position" link that smooth-scrolls to their spot in the full list. Top-three finishers get gold, silver, and bronze gradient badges. Members on a team see a dedicated panel alongside the leaderboard showing the team name, captain, overall team rank and total points, and a full member roster with individual point totals.

  

• Completion Screen with Grace Period Awareness After a program ends, the Completion page opens with a full-width hero card—a green-to-teal gradient with trophy icon and congratulatory message for members who finished, or a muted informational state for those who didn't. When a data sync grace period is active (e.g., for wearable step data), a notice explains that rankings may still change and shows the final results date. Below the hero, a results summary displays total points earned, phases completed, activities done, and days active. Challenges additionally include milestone achievement badges such as "Top Performer" and "Challenge Winner", which appear on the hero for members who earned them.

  

• Responsive Design Across Web and Mobile Web View Every component is built responsive-first. Program thumbnails shift from side-by-side to stacked. Phase carousels switch from arrow buttons to swipe-and-dot navigation. Leaderboard tiles compact for touch. Touch targets and all interactions are optimized for both desktop hover states and mobile tap.

Why It Matters

• Guided Experience, Not a Blank Canvas – The lifecycle experience eliminates guesswork. Members always see the right interface for the right moment—preview before the program, actionable progress during, and celebratory results after.

• Clarity on What's Required – Required vs. optional activity distinction, amber badging, and dedicated filters make it obvious what a member needs to do to complete a phase, reducing confusion and support requests for program managers.

• Challenge Motivation Through Competition and Recognition – Leaderboards, team panels, phase-completion celebrations, and achievement badges create multiple engagement loops that keep members coming back throughout the program.

• Consistent Experience Everywhere – Whether a member opens the program on their desktop browser or in the mobile app's web view, the experience is the same—responsive, performant, and fully functional—so program managers don't have to caveat the experience by device.

• Foundation for Program Types – The same interface powers Challenges, Habit Builders, and Group Programs, meaning improvements to the participant experience benefit all three program types simultaneously.

This redesign replaces the legacy program participant interface with a modern, lifecycle-aware experience built for the way members actually engage with wellness programs, phase by phase, activity by activity, with clear progress signals, social motivation, and recognition at every step.