Cox Health Center

Creating the Prototype that Becomes Cox Health Center

The Cox Health Center website prototype provides a centralized wellness experience for helping users manage fitness activity, discover health and nutrition information, find trainers, view schedules, connect with workout partners, and explore fitness programs.

Cox Health combines personalized progress tracking with editorial content, class schedules, trainer discovery, nutrition education, and motivational calls to action.

Core capabilities

  • Track workouts, total time, calories burned, badges, challenges, and leaderboard progress.
  • Discover nutrition education, healthy-eating guidance, and health and fitness articles.
  • Find training programs, CrossFit sessions, group-fitness classes, and fitness schedules.
  • Search for trainers and fitness centers using structured profiles and filters.
  • Connect with a running buddy or workout partner.
  • Explore fitness benefits and follow clear steps to get started.
  • Organize Profile, Training, Nutrition, Gym, Health, and Contact resources through consistent navigation.

Intended audience and value
The experience is designed for Cox employees and health-center users with different fitness goals, experience levels, locations, and interests in personal progress, nutrition, training, fitness classes, professional support, or community participation.

By bringing progress tracking, wellness education, schedules, trainer discovery, and social motivation into one experience, Cox Health Center helps users move from awareness to action. Users can review their progress, find relevant resources, choose a class or trainer, connect with a partner, and take practical steps toward healthier lives.

Screenshots

Tools/Skills

Bootstrap5 HTML5 CSS3 JS Massonry jQuery (js library) Illustration Photoshop MixItUp (js plug-in)
Project Overview

The Cox Health Center website prototype was designed as a centralized wellness experience for helping users manage fitness activity, discover health and nutrition information, find trainers, view schedules, connect with workout partners, and explore fitness programs.

The experience combines personalized progress tracking with editorial content, class schedules, trainer discovery, nutrition education, and motivational calls to action. Rather than treating fitness as a single activity, the prototype presents a connected ecosystem for health, training, nutrition, community, and personal improvement.

The case study is based on the attached prototype screens and the content visible within them. The available source material documents the experience structure and design intent but does not specify individual project ownership, research methods, launch metrics, or stakeholder feedback.

Case-Study Type: UX/UI Design

Solution Type: HTML / CSS / JS

App Slide 1 App Slide 2 App Slide 3 App Slide 4 App Slide 5 App Slide 6
Monitor and Person Frame

The Cox Health Center project was a prototype used by management to pitch the concept to leadership. With several on-site gyms, multiple health-oriented events like 5Ks, and health-based financial incentives to live a healthy lifestyle, the online presence was a sure win.

Understanding the opportunity

Health and fitness resources can become fragmented across schedules, articles, trainers, nutrition information, progress metrics, and social or community activities. Users need a clear way to understand what is available, choose an activity, monitor progress, and find motivation to continue.

The prototype addresses several related needs:

  • Track workouts, time, calories, badges, and challenge progress.
  • Discover nutrition and health information.
  • Find training programs, CrossFit sessions, and group-fitness schedules.
  • Explore available trainers and fitness centers.
  • Find a running or workout partner.
  • Learn about fitness benefits and ways to get started.
  • Navigate between personal progress and broader wellness resources.

The UX Challenge:

How do we create one health-center experience that makes personal progress, wellness education, fitness scheduling, professional support, and community motivation easy to discover and use?

This framing influenced the dashboard, navigation model, content categories, schedule views, trainer directory, partner-matching experience, article layouts, and calls to action.

Audience needs and design challenges

The prototype needed to support people with different levels of fitness experience and different reasons for visiting the site. The design challenge was to support these different needs without turning the experience into an unstructured collection of health-related pages.

Personal progress users
Users needed to:

  • See recent workout activity and performance at a glance.
  • Understand metrics such as number of workouts, total time, and calories burned.
  • Track progress through challenges and leaderboards.
  • Earn or view badges that reinforce continued participation.

Health and nutrition users
Users needed to:

  • Find accessible information about nutrition and healthy eating.
  • Read health and fitness articles.
  • Learn about practical habits, meal timing, and food choices.
  • Move from a high-level article preview to more detailed content.

Training and fitness users
Users needed to:

  • View CrossFit and group-fitness schedules.
  • Find trainers by location or fitness center.
  • Learn about training opportunities.
  • Discover fitness programs that match their interests and goals.

Community-oriented users
Users needed to:

  • Find a running buddy or workout partner.
  • Become a partner for someone else.
  • See motivational content that makes participation feel social and achievable.
Discovery inputs and content strategy

The available screens show a content and interaction strategy organized around the major tasks a health-center user is likely to complete.

The content model includes:

  • Personal activity and progress
  • Challenges and leaderboards
  • Nutrition education
  • Health and fitness news
  • Training programs
  • CrossFit and group-fitness schedules
  • Trainers and fitness centers
  • Running and workout partners
  • Fitness benefits and getting-started guidance

The content strategy balances three levels of information:

  1. Quick scan: Metrics, navigation, article headlines, schedule rows, filters, and calls-to-action.
  2. Guided exploration: Nutrition articles, trainer profiles, training resources, and fitness explanations.
  3. Action: Find a partner, become a partner, read more, view a schedule, select a trainer, or get started.

This structure gives users both an at-a-glance dashboard and multiple paths into deeper health and fitness content. The prototype also uses a mix of elements to test how different content types work together:

  • Real interface labels
  • Structured data
  • Article headings
  • Calls to action
  • Placeholder content
Experience strategy and user journeys

The strategy was to organize the website around a connected wellness journey: understand personal progress, discover an opportunity, choose an action, and build a sustainable habit.

The prototype supports several connected paths:

  • Progress journey: Review workouts, metrics, badges, challenges, and leaderboards.
  • Nutrition journey: Discover Nutrition 101, learn facts about food, and explore practical eating guidance.
  • Training journey: Find health and training resources, choose CrossFit or group fitness, and review schedules.
  • Trainer journey: Filter trainers by fitness center and explore available professionals.
  • Community journey: Find a running buddy or become a partner.
  • Motivation journey: Read health and fitness news, view inspirational content, and use clear calls to action to get started.

The strategy was guided by five principles:

  • Personalization at the entry point: Lead with the user’s progress and activity.
  • Choice without overload: Organize wellness resources into clear categories.
  • Actionable education: Connect articles and guidance to a next step.
  • Social motivation: Make partnership and community participation visible.
  • Flexible participation: Support different goals, fitness levels, locations, and program interests.

This strategy positions the experience as both a personal dashboard and a wellness discovery hub.

Information architecture and screen structure

Consistent top-level navigation:

  • Profile
  • Training
  • Nutrition
  • Gym
  • Health
  • Contact

The information architecture was designed to help users enter through personal progress, a health topic, a training need, a schedule, a trainer, or a social fitness goal and still reach a clear next step.

The primary experience areas include:

  • Personal dashboard: Displays the user profile, recent workout period, number of workouts, total time, calories burned, badges, and challenge progress.
  • Leaderboards: Presents challenges such as the 20K Uphill Challenge and Fit at 50 Countdown with rankings, progress, and pace indicators.
  • Cox Health Center homepage: Introduces Cox Café, Health & Training, and Fitness Schedules through three high-level content cards.
  • Nutrition: Provides Nutrition 101, Facts About Food, food imagery, eating guidance, and links to additional content.
  • Health and Fitness News: Organizes wellness articles with images, summaries, and Read More actions.
  • Running-buddy experience: Uses a large motivational hero to encourage users to find or become a partner.
  • Trainers: Provides trainer cards and filters for fitness centers such as Barbara Cox Fitness Center and Chip Allen Fitness Center.
  • Fitness schedules: Presents CrossFit and class schedules in a day-and-time grid.
  • Fitness benefits: Explains what fitness can do for users and provides a clear Get Started Today action.
Key design decisions and visual system

The design translated the strategy into a clean, editorial, and action-oriented health-center experience.

Key decisions included:

  • Establishing a consistent Cox Health Center header and navigation across the prototype.
  • Separating Profile, Training, Nutrition, Gym, Health, and Contact into recognizable top-level destinations.
  • Using a dashboard layout to make progress metrics, badges, challenges, and leaderboards immediately visible.
  • Creating three high-level homepage cards for Cox Café, Health & Training, and Fitness Schedules.
  • Using photography to make nutrition, training, fitness, and community content feel approachable.
  • Designing schedule grids for users who need to scan classes by day and time.
  • Providing trainer filters so users can narrow the directory by fitness center.
  • Using large hero imagery and motivational copy to support partner-finding and fitness participation.
  • Combining article cards, image-led stories, profiles, tables, filters, and calls to action within one system.
  • Maintaining a restrained visual language with strong typography, white space, blue accents, dark utility bars, and high-contrast action buttons.

The design intent was to make the experience feel organized and credible while still conveying energy, encouragement, and personal progress.

Content design and prototype greeking

Content design was central to the prototype because the experience combines metrics, schedules, articles, profiles, educational explanations, and motivational messaging.

The content-design work included:

  • Naming the primary navigation and health-center categories.
  • Creating clear labels for workouts, total time, calories burned, badges, challenges, pace, and progress.
  • Writing or structuring calls to action such as Read More, Find a Partner, Become a Partner, and Get Started Today.
  • Organizing content into nutrition, training, health, gym, and community pathways.
  • Establishing hierarchy between article titles, summaries, images, and supporting links.
  • Designing profile and schedule content that can be scanned quickly.

This allowed the design to demonstrate the intended content shape and visual rhythm before every final article, profile, or metric description was available.

How greeking supports UX/UI prototypes

In UX/UI design, greeking refers to using placeholder text or pseudo-content to show how copy will occupy space in a layout before final content is available. Common examples include Lorem ipsum, placeholder headlines, sample names, sample article summaries, and representative labels.

Greeking is not intended to be final copy, it helps designers and stakeholders evaluate:

  • How much space a headline or paragraph requires.
  • Whether a page has the right visual hierarchy.
  • How dense a card, article, schedule, or profile feels.
  • Whether text remains readable next to images and controls.
  • How the interface behaves with short, medium, and long content.
  • Whether the layout supports scanning and action.

The prototype uses greeking in areas such as leaderboard progress descriptions, nutrition articles, and trainer details.

Lessons learned

The prototype emphasizes several principles that are important to the success of a multi-feature wellness experience:

  • Lead with personally relevant information, such as progress and recent activity.
  • Organize a broad content ecosystem into clear categories and user journeys.
  • Pair education with a visible next action.
  • Use schedules, filters, and tables when users need to compare structured information.
  • Make social motivation an explicit part of the experience.
  • Use imagery to create energy and emotional connection without sacrificing scanability.
  • Use greeking intentionally to test layout and hierarchy, then replace it with final content before launch.
  • Test layouts with realistic content lengths, names, images, metrics, and schedule rows.

The central lesson is that a wellness experience must support both inspiration and utility. Users need motivation and encouragement, but they also need accurate schedules, readable content, useful filters, and clear actions.

Outcome and organizational value

The Cox Health Center prototype demonstrates a centralized digital foundation for personal fitness tracking, wellness education, training discovery, nutrition guidance, schedule planning, trainer discovery, and community motivation.

It creates a structure in which users can move from awareness to action: review progress, read an article, find a class, select a trainer, locate a partner, or get started with a fitness activity.

Because the available source material consists of prototype screens rather than launch reporting, no adoption, engagement, or business-performance metrics are claimed here. The documented value is the clarity of the proposed experience and the breadth of the journeys represented in the prototype.

Key Takeaway

The Cox Health Center project demonstrates a UX/UI approach to designing a connected health and fitness experience across personal progress, nutrition, training, schedules, trainers, community partnerships, and wellness education.

The central contribution was turning a broad set of health-center resources into a structured, navigable, and actionable prototype experience.

The prototype gives Cox a flexible foundation for helping users understand their progress, discover relevant wellness resources, connect with others, and take practical steps toward a healthier routine. Its use of greeking also demonstrates how prototype content can communicate layout, hierarchy, density, and intended interaction before final copy is available.