MQ Portal — Mockup Index

Customer Portal — Mockup Index

Milestone 2.2 · Experience Design · March 2026

Current Design — Full Navigation Rebuild

5-section nav: Home · Discover MQ (accordion: Sports Programs, Events & Entertainment, Rentals, Dining, Store, News, Hours, Parking, Maps) · My Activities · My Teams · My Account. Mobile hamburger drawer + 5-item bottom nav.

Core Pages

MQ Website Homepage

Public marketing site · Log In button

Login / Create Account

Sign In tab · Create Account → Welcome flow

Explore MQ grid · Accordion nav

Sports Programs

6-chip filter bar · Featured · Type · Sport · Age · Gender · Skill · Date

Events & Entertainment

UofA · Movies · Concerts · Bumper Cars · Public Skate

Hub: Gather. Play. Celebrate.

Brasserie 76 · Pollo & Vibe · The Oasis

Ice Time · Turf · Event Rooms · Pickleball

Gear · Apparel · Equipment · Member discount

6 articles · Newsletter signup

Iceplex · Field House · Crossing

3 lots · Free parking · Pass info

Maps & Directions

3 venue cards · Campus map

Schedules · Tickets · Rentals · Favorites

Team cards · Chat handoff

Household · Passes · Memberships

MQ Blades 3 · Sports submenu active

Saved programs & events · localStorage

Registration Flow

Bond Sports — Registration Form

Step 3 · Pre-filled participant info · Emergency contact

Bond Sports — Waiver

Step 4 · Pre-filled name & date · Tap to sign

Bond Sports — Payment

Step 5 · Saved payment · Place Order

Registration Confirmed

Confetti animation · Receipt · Calendar · F&B offer

Welcome Flow — New Member Onboarding

Welcome — Basic Info

Step 1/5 · Name · Phone · DOB

Welcome — Favorite Sports

Step 2/5 · Multi-select sport grid

Welcome — Household

Step 3/5 · Add family members

Welcome — Waivers

Step 4/5 · Liability + Privacy Policy

Welcome — Video

Step 5/5 · Welcome video · Feature highlights

Previous Design — Archived

Archived — no further edits. Original 5-section nav: Home · Programs & Events · My Activities · My Teams · My Account.

Core Screens — Nav: Home · Programs & Events · My Activities · My Teams · My Account

Login / Sign In

Email + Google SSO

Home — Dashboard

QR · Schedule · Active Passes · Offers

Programs & Events

Leagues · Classes · Rentals · Events

Schedules · Tickets · Rentals

Schedule · Standings · Chat

Team Chat Handoff

Opening MQ Teams app

League Standings

Division table · Playoff picture

Full season game log · Results

Household · Passes · Memberships

Sub-page · Menus + Offers

Registration Flow — MQ Blades 3

1 · Family Members

Bond Sports · Who's registering?

2 · Application

Bond Sports · Waiver & questionnaire

Bond Sports · Checkout

MQ Portal · Receipt + next steps

✨ Exploration: Live + Brand Colors + Photography

Starts from the live functional design and layers in brand color enhancements + Unsplash sports photography with sport icon badges overlaid. All filtering remains fully functional.

Live + Brand Colors — Home

Live design · Teal/orange accents · Photo hero · Sport icon tiles

Live + Brand Colors — Programs

Live design · Photo cards · Sport badge overlay · Orange CTAs

⭐ Exploration: Combined Design (Recommended)

Combined — Home

Photo hero · Brand colors · Sport icons · Left accent bars

Combined — Programs

Photo cards · Sport icon badges · Brand color tabs

UI Design Variants — Home & Programs (Visual Exploration)

Three visual directions for the Home and Programs & Events pages. Open on mobile or use DevTools 375px emulation. Click a variant pair to see both screens.

Dark Arena — Home

Premium dark · Glassy QR · Orange CTAs

Dark Arena — Programs

Dark cards · Gradient accent bars

Photography — Home

Real photos · Light mode · Sport icons

Photography — Programs

Photo cards · Sport icon overlay

Bold Palette — Home

Blue top bar · Teal hero · Color tiles

Bold Palette — Programs

Color-coded headers · Full palette

Mockup notes: All screens are mobile-first (375px). Open on a phone or use DevTools mobile emulation for the intended experience. Navigation links are connected — you can click through screens as a flow. Sidebar nav appears at tablet (768px+) and desktop (1024px+). Data shown is sample/illustrative.

IA (5-section nav): Home · Programs & Events · My Activities · My Teams · My Account. F&B is a sub-page accessible from Home offers; no longer a nav item. My Activities has 3 sub-tabs: Schedules / Tickets / Rentals. Passes & Memberships live in My Account.

Registration flow: From the program detail page, "Register →" hands off directly to Bond Sports (no intermediate MQ portal steps). Bond Sports handles family member selection, waiver/application, and payment natively. MQ Portal shows the final confirmation screen.

Team Chat: Tapping "Team Chat" on any team card navigates to the SportNinja handoff screen — an MQ-branded interstitial before launching the MQ Teams app (powered by SportNinja).