diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 3faa3cca6..83fcfe7a7 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -329,6 +329,40 @@ components:
     timeWalking: "{time} walking"
   MobileOptions:
     header: Set Search Options
+  MobilityProfile:
+    DevicesPane:
+      devices:
+        cane: Cane
+        crutches: Crutches
+        electric wheelchair: Electric wheelchair
+        manual walker: Manual walker
+        manual wheelchair: Manual/traditional wheelchair
+        mobility scooter: Mobility scooter
+        none: No assistive device
+        service animal: Service animal
+        stroller: Stroller
+        wheeled walker: Wheeled walker
+        white cane: White cane
+      prompt: Do you regularly use a mobility assistive device? (Check all that apply)
+    LimitationsPane:
+      mobilityPrompt: >-
+        Do you have any mobility limitations that cause you to walk more slowly
+        or more carefully than other people?
+      visionLimitations:
+        legally-blind: Legally blind
+        low-vision: Low-vision
+        none: None
+      visionPrompt: Do you have any vision limitations?
+    MobilityPane:
+      button: Edit your mobility profile
+      header: Mobility Profile
+      mobilityDevices: "Mobility devices: "
+      mobilityLimitations: "Mobility limitations: "
+      visionLimitations: "Vision limitations: "
+    intro: >-
+      Please answer a few questions to customize the trip planning experience to
+      your needs and preferences.
+    title: Define Your Mobility Profile
   NarrativeItinerariesHeader:
     changeSortDir: Change sort direction
     howToFindResults: To view results, see the Itineraries Found heading below.
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 7b94eac4e..a6fbbc818 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -346,6 +346,42 @@ components:
     timeWalking: "{time} de marche"
   MobileOptions:
     header: Options de recherche
+  MobilityProfile:
+    DevicesPane:
+      devices:
+        cane: Canne
+        crutches: Béquilles
+        electric wheelchair: Fauteuil roulant électrique
+        manual walker: Déambulateur manuel
+        manual wheelchair: Fauteuil roulant manuel
+        mobility scooter: Scooter électrique
+        none: Aucun
+        service animal: Animal de service
+        stroller: Poussette
+        wheeled walker: Déambulateur à roues
+        white cane: Canne blanche
+      prompt: >-
+        Utilisez-vous habituellement l'aide d'un appareil pour vous déplacer ?
+        (Cochez tous les cas qui vous concernent)
+    LimitationsPane:
+      mobilityPrompt: >-
+        Avez-vous des handicaps moteurs qui vous font marcher plus lentement ou
+        plus prudemment que d'autres personnes ?
+      visionLimitations:
+        legally-blind: Non-voyant
+        low-vision: Vision basse
+        none: Aucune
+      visionPrompt: Avez-vous des handicaps visuels ?
+    MobilityPane:
+      button: Modifier votre profil mobilité
+      header: Profil mobilité
+      mobilityDevices: "Appareils d'aide : "
+      mobilityLimitations: "Handicaps moteurs : "
+      visionLimitations: "Handicaps visuels : "
+    intro: >-
+      Veuillez répondre a quelques questions pour personaliser vos recherches de
+      trajets selon vos besoins et préférences.
+    title: Spécifiez votre profil de mobilité
   NarrativeItinerariesHeader:
     changeSortDir: Changer l'ordre de tri
     howToFindResults: Pour afficher les résultats, utilisez l'en-tête Trajets trouvés plus bas.
diff --git a/i18n/i18n-exceptions.json b/i18n/i18n-exceptions.json
index 0f3bd1185..9cb9f516a 100644
--- a/i18n/i18n-exceptions.json
+++ b/i18n/i18n-exceptions.json
@@ -33,6 +33,24 @@
     "components.OTP2ErrorRenderer.inputFields.*": [
       "FROM",
       "TO"
+    ],
+    "components.MobilityProfile.DevicesPane.devices.*": [
+      "cane",
+      "crutches",
+      "electric wheelchair",
+      "manual walker",
+      "manual wheelchair",
+      "mobility scooter",
+      "none",
+      "service animal",
+      "stroller",
+      "wheeled walker",
+      "white cane"
+    ],
+    "components.MobilityProfile.LimitationsPane.visionLimitations.*": [
+      "none",
+      "low-vision",
+      "legally-blind"
     ]
   }
 }
\ No newline at end of file
diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
new file mode 100644
index 000000000..42ef7524f
--- /dev/null
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -0,0 +1,140 @@
+import { Field } from 'formik'
+import { FormControl } from 'react-bootstrap'
+import { IntlShape, useIntl } from 'react-intl'
+import React, { ChangeEventHandler, ComponentType, ReactNode } from 'react'
+
+interface SelectProps {
+  Control?: ComponentType
+  children: ReactNode
+  defaultValue?: string | number | boolean
+  label?: ReactNode
+  name: string
+  onChange?: ChangeEventHandler
+}
+
+/**
+ * A label followed by a dropdown control.
+ */
+export const Select = ({
+  Control = FormControl,
+  children,
+  defaultValue,
+  label,
+  name,
+  onChange
+}: SelectProps): JSX.Element => (
+  // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
+  <>
+    {label && <label htmlFor={name}>{label}</label>}
+    <Field
+      as={Control}
+      componentClass="select"
+      defaultValue={defaultValue}
+      id={name}
+      name={name}
+      onChange={onChange}
+    >
+      {children}
+    </Field>
+  </>
+)
+
+interface OptionsPropsBase<T> {
+  defaultValue?: T
+  hideDefaultIndication?: boolean
+}
+
+interface OptionsProps<T extends string | number> extends OptionsPropsBase<T> {
+  options: { text: string; value: T }[]
+}
+
+export function Options<T extends string | number>({
+  defaultValue,
+  hideDefaultIndication,
+  options
+}: OptionsProps<T>): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  return (
+    <>
+      {options.map(({ text, value }, i) => (
+        <option key={i} value={value}>
+          {!hideDefaultIndication && value === defaultValue
+            ? intl.formatMessage(
+                { id: 'common.forms.defaultValue' },
+                { value: text }
+              )
+            : text}
+        </option>
+      ))}
+    </>
+  )
+}
+
+const basicYesNoOptions = [
+  {
+    id: 'yes',
+    value: 'true'
+  },
+  {
+    id: 'no',
+    value: 'false'
+  }
+]
+
+/**
+ * Produces a yes/no list of options with the specified
+ * default value (true for yes, false for no).
+ */
+export function YesNoOptions({
+  defaultValue,
+  hideDefaultIndication
+}: OptionsPropsBase<boolean>): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  const options = basicYesNoOptions.map(({ id, value }) => ({
+    text: intl.formatMessage({ id: `common.forms.${id}` }),
+    value
+  }))
+  return (
+    <Options
+      defaultValue={(defaultValue || false).toString()}
+      hideDefaultIndication={hideDefaultIndication}
+      options={options}
+    />
+  )
+}
+
+interface DurationOptionsProps extends OptionsPropsBase<number> {
+  decoratorFunc?: (text: string, intl: IntlShape) => string
+  minuteOptions: number[]
+}
+
+/**
+ * Produces a list of duration options with the specified default value.
+ */
+export function DurationOptions({
+  decoratorFunc,
+  defaultValue,
+  minuteOptions
+}: DurationOptionsProps): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  const localizedMinutes = minuteOptions.map((minutes) => ({
+    text:
+      minutes === 60
+        ? intl.formatMessage({ id: 'components.TripNotificationsPane.oneHour' })
+        : intl.formatMessage(
+            { id: 'common.time.tripDurationFormat' },
+            { hours: 0, minutes, seconds: 0 }
+          ),
+    value: minutes
+  }))
+  const options = decoratorFunc
+    ? localizedMinutes.map(({ text, value }) => ({
+        text: decoratorFunc(text, intl),
+        value
+      }))
+    : localizedMinutes
+  return <Options defaultValue={defaultValue} options={options} />
+}
diff --git a/lib/components/user/existing-account-display.tsx b/lib/components/user/existing-account-display.tsx
index 5e80d1fc3..551a7a943 100644
--- a/lib/components/user/existing-account-display.tsx
+++ b/lib/components/user/existing-account-display.tsx
@@ -1,22 +1,29 @@
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { FormikProps } from 'formik'
-import React from 'react'
+import React, { FormEventHandler } from 'react'
 
 import { AppReduxState } from '../../util/state-types'
 import { TransitModeConfig } from '../../util/config-types'
 import PageTitle from '../util/page-title'
 
 import { EditedUser } from './types'
+import { PhoneCodeRequestHandler } from './phone-number-editor'
+import { PhoneVerificationSubmitHandler } from './phone-verification-form'
 import A11yPrefs from './a11y-prefs'
 import BackToTripPlanner from './back-to-trip-planner'
 import DeleteUser from './delete-user'
 import FavoritePlaceList from './places/favorite-place-list'
+import MobilityPane from './mobility-profile/mobility-pane'
 import NotificationPrefsPane from './notification-prefs-pane'
 import StackedPanes from './stacked-panes'
 import TermsOfUsePane from './terms-of-use-pane'
 
 interface Props extends FormikProps<EditedUser> {
+  mobilityProfileEnabled: boolean
+  onDelete: FormEventHandler
+  onRequestPhoneVerificationCode: PhoneCodeRequestHandler
+  onSendPhoneVerificationCode: PhoneVerificationSubmitHandler
   wheelchairEnabled: boolean
 }
 
@@ -29,7 +36,7 @@ const ExistingAccountDisplay = (props: Props) => {
   // We forward the props to each pane so that their individual controls
   // can be wired to be managed by Formik.
 
-  const { wheelchairEnabled } = props
+  const { mobilityProfileEnabled, wheelchairEnabled } = props
   const intl = useIntl()
 
   const panes = [
@@ -38,6 +45,14 @@ const ExistingAccountDisplay = (props: Props) => {
       props,
       title: <FormattedMessage id="components.ExistingAccountDisplay.places" />
     },
+    {
+      hidden: !mobilityProfileEnabled,
+      pane: MobilityPane,
+      props,
+      title: (
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.header" />
+      )
+    },
     {
       pane: NotificationPrefsPane,
       props,
@@ -85,11 +100,13 @@ const ExistingAccountDisplay = (props: Props) => {
 }
 
 const mapStateToProps = (state: AppReduxState) => {
-  const { accessModes } = state.otp.config.modes
-  const wheelchairEnabled = accessModes?.some(
+  const { mobilityProfile: mobilityProfileEnabled = false, modes } =
+    state.otp.config
+  const wheelchairEnabled = modes.accessModes?.some(
     (mode: TransitModeConfig) => mode.showWheelchairSetting
   )
   return {
+    mobilityProfileEnabled,
     wheelchairEnabled
   }
 }
diff --git a/lib/components/user/mobility-profile/assistive-devices-pane.tsx b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
new file mode 100644
index 000000000..2547b6eb4
--- /dev/null
+++ b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
@@ -0,0 +1,78 @@
+import { Field, FormikProps } from 'formik'
+import { FormattedMessage } from 'react-intl'
+import React from 'react'
+import styled from 'styled-components'
+
+import { FieldSet } from '../styled'
+import { User } from '../types'
+
+const knownDeviceCodes = [
+  'none',
+  'white cane',
+  'manual walker',
+  'wheeled walker',
+  'cane',
+  'crutches',
+  'stroller',
+  'service animal',
+  'mobility scooter',
+  'electric wheelchair',
+  'manual wheelchair'
+]
+
+const DeviceOption = styled.span`
+  align-items: center;
+  display: inline-flex;
+  gap: 0.5em;
+  margin-bottom: 5px;
+  min-width: 300px;
+  width: 50%;
+
+  label {
+    font-weight: normal;
+    margin: 4px 0 0; /* match bootstrap's checkbox for better vert. align */
+  }
+`
+
+/**
+ * Assistive devices pane, part of mobility profile.
+ */
+const AssistiveDevicesPane = ({
+  handleChange
+}: FormikProps<User>): JSX.Element => (
+  <div>
+    <p>
+      <FormattedMessage id="components.MobilityProfile.intro" />
+    </p>
+    <FieldSet>
+      <legend>
+        <FormattedMessage id="components.MobilityProfile.DevicesPane.prompt" />
+      </legend>
+      <div>
+        {knownDeviceCodes.map((dv) => {
+          const inputId = `device-option-${dv}`
+          return (
+            <DeviceOption key={dv}>
+              <Field
+                id={inputId}
+                name="mobilityProfile.mobilityDevices"
+                // Override onChange explicitly to use the custom one for existing accounts.
+                // (The Formik's one will still be used for new accounts.)
+                onChange={handleChange}
+                type="checkbox"
+                value={dv}
+              />
+              <label htmlFor={inputId}>
+                <FormattedMessage
+                  id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
+                />
+              </label>
+            </DeviceOption>
+          )
+        })}
+      </div>
+    </FieldSet>
+  </div>
+)
+
+export default AssistiveDevicesPane
diff --git a/lib/components/user/mobility-profile/limitations-pane.tsx b/lib/components/user/mobility-profile/limitations-pane.tsx
new file mode 100644
index 000000000..8e41ca5ba
--- /dev/null
+++ b/lib/components/user/mobility-profile/limitations-pane.tsx
@@ -0,0 +1,74 @@
+import { FormattedMessage, useIntl } from 'react-intl'
+import { FormGroup } from 'react-bootstrap'
+import { FormikProps } from 'formik'
+import React from 'react'
+import styled from 'styled-components'
+
+import { Options, Select, YesNoOptions } from '../common/dropdown-options'
+import { User, VisionLimitation, visionLimitations } from '../types'
+
+const Container = styled.div`
+  select {
+    width: unset; /* Otherwise, it is 100% per bootstrap. */
+  }
+`
+
+/**
+ * Produces a list of options for vision limitations.
+ */
+function VisionOptions(): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  const options = visionLimitations.map((value: VisionLimitation) => ({
+    text: intl.formatMessage({
+      id: `components.MobilityProfile.LimitationsPane.visionLimitations.${value}`
+    }),
+    value
+  }))
+  return <Options options={options} />
+}
+
+/**
+ * Ability limitations pane, part of mobility profile.
+ */
+const LimitationsPane = ({
+  handleChange,
+  values: userData
+}: FormikProps<User>): JSX.Element => {
+  return (
+    <Container>
+      <p>
+        <FormattedMessage id="components.MobilityProfile.intro" />
+      </p>
+      <FormGroup>
+        <Select
+          defaultValue={false}
+          label={
+            <FormattedMessage id="components.MobilityProfile.LimitationsPane.mobilityPrompt" />
+          }
+          name="mobilityProfile.isMobilityLimited"
+          // Override onChange explicitly to use the custom one for existing accounts.
+          // (The Formik's one will still be used for new accounts.)
+          onChange={handleChange}
+        >
+          <YesNoOptions hideDefaultIndication />
+        </Select>
+      </FormGroup>
+      <FormGroup>
+        <Select
+          label={
+            <FormattedMessage id="components.MobilityProfile.LimitationsPane.visionPrompt" />
+          }
+          name="mobilityProfile.visionLimitation"
+          // Override onChange explicitly to use the custom one for existing accounts.
+          // (The Formik's one will still be used for new accounts.)
+          onChange={handleChange}
+        >
+          <VisionOptions />
+        </Select>
+      </FormGroup>
+    </Container>
+  )
+}
+
+export default LimitationsPane
diff --git a/lib/components/user/mobility-profile/mobility-pane.tsx b/lib/components/user/mobility-profile/mobility-pane.tsx
new file mode 100644
index 000000000..71ff00305
--- /dev/null
+++ b/lib/components/user/mobility-profile/mobility-pane.tsx
@@ -0,0 +1,67 @@
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedList, FormattedMessage } from 'react-intl'
+import { FormikProps } from 'formik'
+import React, { useCallback } from 'react'
+
+import * as uiActions from '../../../actions/ui'
+import { EditedUser } from '../types'
+
+interface Props extends FormikProps<EditedUser> {
+  routeTo: (url: string) => void
+}
+
+/**
+ * Renders a button to show the mobility profile settings.
+ */
+const MobilityPane = ({ routeTo, values: userData }: Props): JSX.Element => {
+  const handleClick = useCallback(() => {
+    routeTo('/account/mobilityProfile/')
+  }, [routeTo])
+  const {
+    isMobilityLimited,
+    mobilityDevices = [],
+    visionLimitation
+  } = userData.mobilityProfile || {}
+  const devices = mobilityDevices.length ? mobilityDevices : ['none']
+  return (
+    <div>
+      <p>
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.mobilityDevices" />
+        <FormattedList
+          // `style` below is a react-intl -specific prop.
+          // eslint-disable-next-line react/style-prop-object
+          style="narrow" // Should suppress the ending "and" in "a, b, and c".
+          type="conjunction"
+          value={devices.map((dv) => (
+            <FormattedMessage
+              id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
+              key={dv}
+            />
+          ))}
+        />
+        <br />
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.mobilityLimitations" />
+        {isMobilityLimited ? (
+          <FormattedMessage id="common.forms.yes" />
+        ) : (
+          <FormattedMessage id="common.forms.no" />
+        )}
+        <br />
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.visionLimitations" />
+        <FormattedMessage
+          id={`components.MobilityProfile.LimitationsPane.visionLimitations.${visionLimitation}`}
+        />
+      </p>
+      <Button bsStyle="primary" onClick={handleClick}>
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.button" />
+      </Button>
+    </div>
+  )
+}
+
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(null, mapDispatchToProps)(MobilityPane)
diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
new file mode 100644
index 000000000..c5036bd0b
--- /dev/null
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -0,0 +1,30 @@
+import { useIntl } from 'react-intl'
+import React from 'react'
+
+import Wizard, { WizardProps } from '../wizard'
+
+/**
+ * This component is the mobility profile wizard.
+ */
+const MobilityWizard = ({
+  activePaneId,
+  formikProps
+}: WizardProps): JSX.Element => {
+  const intl = useIntl()
+
+  const title = intl.formatMessage({
+    id: 'components.MobilityProfile.title'
+  })
+
+  return (
+    <Wizard
+      activePaneId={activePaneId}
+      formikProps={formikProps}
+      pages={['mobilityDevices', 'mobilityLimitations']}
+      returnTo="/account/settings"
+      title={title}
+    />
+  )
+}
+
+export default MobilityWizard
diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index dd8077a83..4d6d05d81 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -1,10 +1,15 @@
 import { Alert, FormControl } from 'react-bootstrap'
 import { ExclamationTriangle } from '@styled-icons/fa-solid/ExclamationTriangle'
-import { Field, FormikProps } from 'formik'
-import { FormattedList, FormattedMessage, IntlShape, useIntl } from 'react-intl'
-import React, { Component, ComponentType, FormEvent, ReactNode } from 'react'
+import { FormattedList, FormattedMessage } from 'react-intl'
+import { FormikProps } from 'formik'
+import React, { Component, FormEvent } from 'react'
 import styled from 'styled-components'
 
+import {
+  DurationOptions,
+  Select,
+  YesNoOptions
+} from '../common/dropdown-options'
 import { FieldSet } from '../styled'
 import { IconWithText } from '../../util/styledIcon'
 import { MonitoredTrip } from '../types'
@@ -38,121 +43,6 @@ const Summary = styled.summary`
   margin-bottom: 5px;
 `
 
-/**
- * A label followed by a dropdown control.
- */
-const Select = ({
-  Control = FormControl,
-  children,
-  label,
-  name
-}: {
-  // Note the prop order required by typescript-sort-keys, also applied above.
-  Control?: ComponentType
-  children: ReactNode
-  label?: ReactNode
-  name: string
-}) => (
-  // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
-  <>
-    {label && <label htmlFor={name}>{label}</label>}
-    <Field as={Control} componentClass="select" id={name} name={name}>
-      {children}
-    </Field>
-  </>
-)
-
-function Options({
-  defaultValue,
-  options
-}: {
-  defaultValue: number | string
-  options: { text: string; value: number | string }[]
-}) {
-  // <FormattedMessage> can't be used inside <option>.
-  const intl = useIntl()
-  return (
-    <>
-      {options.map(({ text, value }, i) => (
-        <option key={i} value={value}>
-          {value === defaultValue
-            ? intl.formatMessage(
-                { id: 'common.forms.defaultValue' },
-                { value: text }
-              )
-            : text}
-        </option>
-      ))}
-    </>
-  )
-}
-
-const basicYesNoOptions = [
-  {
-    id: 'yes',
-    value: 'true'
-  },
-  {
-    id: 'no',
-    value: 'false'
-  }
-]
-
-/**
- * Produces a yes/no list of options with the specified
- * default value (true for yes, false for no).
- */
-function YesNoOptions({ defaultValue }: { defaultValue: boolean }) {
-  // <FormattedMessage> can't be used inside <option>.
-  const intl = useIntl()
-  const options = basicYesNoOptions.map(({ id, value }) => ({
-    text:
-      id === 'yes'
-        ? intl.formatMessage({ id: 'common.forms.yes' })
-        : intl.formatMessage({ id: 'common.forms.no' }),
-    value
-  }))
-  return (
-    <Options
-      defaultValue={(defaultValue || false).toString()}
-      options={options}
-    />
-  )
-}
-
-/**
- * Produces a list of duration options with the specified default value.
- */
-function DurationOptions({
-  decoratorFunc,
-  defaultValue,
-  minuteOptions
-}: {
-  decoratorFunc?: (text: string, intl: IntlShape) => string
-  defaultValue: string | number
-  minuteOptions: number[]
-}) {
-  // <FormattedMessage> can't be used inside <option>.
-  const intl = useIntl()
-  const localizedMinutes = minuteOptions.map((minutes) => ({
-    text:
-      minutes === 60
-        ? intl.formatMessage({ id: 'components.TripNotificationsPane.oneHour' })
-        : intl.formatMessage(
-            { id: 'common.time.tripDurationFormat' },
-            { hours: 0, minutes, seconds: 0 }
-          ),
-    value: minutes
-  }))
-  const options = decoratorFunc
-    ? localizedMinutes.map(({ text, value }) => ({
-        text: decoratorFunc(text, intl),
-        value
-      }))
-    : localizedMinutes
-  return <Options defaultValue={defaultValue} options={options} />
-}
-
 interface Props extends FormikProps<MonitoredTrip> {
   notificationChannel: string
 }
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index b0728af10..bded4baa0 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -1,28 +1,15 @@
-import { Form, FormikProps } from 'formik'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { connect } from 'react-redux'
+import { useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
-import toast from 'react-hot-toast'
 
-import PageTitle from '../util/page-title'
+import { AppReduxState } from '../../util/state-types'
 
 import { EditedUser } from './types'
-import AccountSetupFinishPane from './account-setup-finish-pane'
-import FavoritePlaceList from './places/favorite-place-list'
-import NotificationPrefsPane from './notification-prefs-pane'
-import SequentialPaneDisplay from './sequential-pane-display'
-import TermsOfUsePane from './terms-of-use-pane'
-import VerifyEmailPane from './verify-email-pane'
+import Wizard, { WizardProps } from './wizard'
 
-// The props include Formik props that provide access to the current user data (stored in props.values)
-// and to its own blur/change/submit event handlers that automate the state.
-// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
-// can be wired to be managed by Formik.
-type FormikUserProps = FormikProps<EditedUser>
-
-interface Props extends FormikUserProps {
-  activePaneId: string
-  onCancel: () => void
+interface Props extends WizardProps {
   onCreate: (value: EditedUser) => void
+  pages: string[]
 }
 
 /**
@@ -30,90 +17,51 @@ interface Props extends FormikUserProps {
  */
 const NewAccountWizard = ({
   activePaneId,
-  onCancel, // provided by UserAccountScreen
-  onCreate, // provided by UserAccountScreen
-  ...formikProps // provided by Formik
+  formikProps,
+  onCreate,
+  pages
 }: Props): JSX.Element => {
   const { values: userData } = formikProps
   const intl = useIntl()
 
-  const handleCreateNewUser = useCallback(() => {
-    // Create a user record only if an id is not assigned.
-    if (!userData.id) {
-      onCreate(userData)
+  const handleNext = useCallback(() => {
+    if (activePaneId === 'terms') {
+      // Create a user record only if an id is not assigned.
+      if (!userData.id) {
+        onCreate(userData)
+      }
     }
-  }, [onCreate, userData])
-
-  const handleFinish = useCallback(() => {
-    // Display a toast to acknowledge saved changes
-    // (although in reality, changes quietly took effect in previous screens).
-    toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
-
-    onCancel && onCancel()
-  }, [intl, onCancel])
-
-  if (activePaneId === 'verify') {
-    const verifyEmail = intl.formatMessage({
-      id: 'components.NewAccountWizard.verify'
-    })
-    return (
-      <Form id="user-settings-form" noValidate>
-        <PageTitle title={verifyEmail} />
-        <h1>{verifyEmail}</h1>
-        <VerifyEmailPane {...formikProps} />
-      </Form>
-    )
-  }
+  }, [activePaneId, onCreate, userData])
 
-  const { hasConsentedToTerms, notificationChannel = ['email'] } = userData
-  const createNewAccount = intl.formatMessage({
+  const title = intl.formatMessage({
     id: 'components.NewAccountWizard.createNewAccount'
   })
-  const paneSequence = [
-    {
-      id: 'terms',
-      invalid: !hasConsentedToTerms,
-      invalidMessage: intl.formatMessage({
-        id: 'components.TermsOfUsePane.mustAgreeToTerms'
-      }),
-      onNext: handleCreateNewUser,
-      pane: TermsOfUsePane,
-      title: createNewAccount
-    },
-    {
-      id: 'notifications',
-      invalid:
-        notificationChannel.includes('sms') &&
-        (!userData.phoneNumber || !userData.isPhoneNumberVerified),
-      invalidMessage: intl.formatMessage({
-        id: 'components.PhoneNumberEditor.invalidPhone'
-      }),
-      pane: NotificationPrefsPane,
-      title: <FormattedMessage id="components.NewAccountWizard.notifications" />
-    },
-    {
-      id: 'places',
-      pane: FavoritePlaceList,
-      title: <FormattedMessage id="components.NewAccountWizard.places" />
-    },
-    {
-      id: 'finish',
-      pane: AccountSetupFinishPane,
-      title: <FormattedMessage id="components.NewAccountWizard.finish" />
-    }
-  ]
 
   return (
-    <Form id="user-settings-form" noValidate>
-      <PageTitle title={createNewAccount} />
-      <SequentialPaneDisplay
-        activePaneId={activePaneId}
-        onFinish={handleFinish}
-        paneProps={formikProps}
-        panes={paneSequence}
-      />
-    </Form>
+    <Wizard
+      activePaneId={activePaneId}
+      formikProps={formikProps}
+      onNext={handleNext}
+      pages={pages}
+      title={title}
+    />
   )
 }
 
-export default NewAccountWizard
+// Get the new account pages based on the configuration's mobilityProfile flag.
+const mapStateToProps = (state: AppReduxState) => {
+  return {
+    pages: state.otp.config.mobilityProfile
+      ? [
+          'terms',
+          'mobilityDevices',
+          'mobilityLimitations',
+          'notifications',
+          'places',
+          'finish'
+        ]
+      : ['terms', 'notifications', 'places', 'finish']
+  }
+}
+
+export default connect(mapStateToProps)(NewAccountWizard)
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
deleted file mode 100644
index 9f2df97bf..000000000
--- a/lib/components/user/sequential-pane-display.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Button } from 'react-bootstrap'
-import { connect } from 'react-redux'
-import { FormattedMessage } from 'react-intl'
-import React, { Component, MouseEvent, ReactNode } from 'react'
-import styled from 'styled-components'
-
-import * as uiActions from '../../actions/ui'
-import { GRAY_ON_WHITE } from '../util/colors'
-
-import { SequentialPaneContainer } from './styled'
-import FormNavigationButtons from './form-navigation-buttons'
-
-export interface PaneProps {
-  id: string
-  invalid?: boolean
-  invalidMessage?: string
-  onNext?: () => void
-  pane: any
-  title: ReactNode
-}
-
-interface OwnProps {
-  activePaneId: string
-  onFinish?: () => void
-  panes: PaneProps[]
-}
-
-interface Props<T> extends OwnProps {
-  activePane: PaneProps
-  activePaneIndex: number
-  paneProps: T
-  parentPath: string
-  routeTo: (url: any) => void
-}
-
-const StepNumber = styled.p`
-  color: ${GRAY_ON_WHITE};
-  font-size: 40%;
-  margin: -1em 0 0 0;
-`
-
-/**
- * This component handles the flow between screens for new OTP user accounts.
- */
-class SequentialPaneDisplay<T> extends Component<Props<T>> {
-  /**
-   * Routes to the next pane URL.
-   */
-  _routeTo = (nextId: string) => {
-    const { parentPath, routeTo } = this.props
-    routeTo(`${parentPath}/${nextId}`)
-  }
-
-  h1Ref = React.createRef<HTMLHeadingElement>()
-
-  _focusHeader = () => {
-    this.h1Ref?.current?.focus()
-  }
-
-  _handleToNextPane = async (e: MouseEvent<Button>) => {
-    const { activePane, activePaneIndex, onFinish, panes } = this.props
-    const { invalid, invalidMessage } = activePane
-
-    if (activePaneIndex < panes.length - 1) {
-      // Don't submit the form if there are more steps to complete.
-      e.preventDefault()
-
-      if (invalid) {
-        alert(invalidMessage)
-      } else {
-        const nextId = panes[activePaneIndex + 1].id
-        // Execute pane-specific action, if any (e.g. save a user account)
-        // when clicking next.
-        if (typeof activePane.onNext === 'function') {
-          await activePane.onNext()
-        }
-        this._routeTo(nextId)
-      }
-      this._focusHeader()
-    } else if (onFinish) {
-      onFinish()
-    }
-  }
-
-  _handleToPrevPane = () => {
-    const { activePaneIndex, panes } = this.props
-    if (activePaneIndex > 0) {
-      const prevId = panes[activePaneIndex - 1].id
-      prevId && this._routeTo(prevId)
-    }
-    this._focusHeader()
-  }
-
-  componentDidMount(): void {
-    this._focusHeader()
-  }
-
-  render() {
-    const { activePane, activePaneIndex, paneProps, panes } = this.props
-    const { pane: Pane, title } = activePane || {}
-
-    return (
-      <>
-        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
-          <StepNumber>
-            <FormattedMessage
-              id="components.SequentialPaneDisplay.stepNumber"
-              values={{
-                step: activePaneIndex + 1,
-                total: panes.length
-              }}
-            />
-          </StepNumber>
-          {title}
-        </h1>
-        <SequentialPaneContainer>
-          {Pane && <Pane {...paneProps} />}
-        </SequentialPaneContainer>
-        <FormNavigationButtons
-          backButton={
-            activePaneIndex > 0 && {
-              onClick: this._handleToPrevPane,
-              text: <FormattedMessage id="common.forms.back" />
-            }
-          }
-          okayButton={{
-            onClick: this._handleToNextPane,
-            text:
-              activePaneIndex < panes.length - 1 ? (
-                <FormattedMessage id="common.forms.next" />
-              ) : (
-                <FormattedMessage id="common.forms.finish" />
-              ),
-            type: 'submit'
-          }}
-        />
-      </>
-    )
-  }
-}
-
-// connect to the redux store
-
-const mapStateToProps = (state: any, ownProps: OwnProps) => {
-  const { activePaneId, panes } = ownProps
-  const { pathname } = state.router.location
-  const activePaneIndex = panes.findIndex(
-    (pane: PaneProps) => pane.id === activePaneId
-  )
-  return {
-    activePane: panes[activePaneIndex],
-    activePaneIndex,
-    parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
-  }
-}
-
-const mapDispatchToProps = {
-  routeTo: uiActions.routeTo
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SequentialPaneDisplay)
diff --git a/lib/components/user/standard-panes.tsx b/lib/components/user/standard-panes.tsx
new file mode 100644
index 000000000..b18d60524
--- /dev/null
+++ b/lib/components/user/standard-panes.tsx
@@ -0,0 +1,74 @@
+import { FormattedMessage, IntlShape } from 'react-intl'
+import React, { ReactNode } from 'react'
+
+import { EditedUser } from './types'
+import AccountSetupFinishPane from './account-setup-finish-pane'
+import AssistiveDevicesPane from './mobility-profile/assistive-devices-pane'
+import FavoritePlaceList from './places/favorite-place-list'
+import LimitationsPane from './mobility-profile/limitations-pane'
+import NotificationPrefsPane from './notification-prefs-pane'
+import TermsOfUsePane from './terms-of-use-pane'
+
+export interface PaneProps {
+  getInvalidMessage?: (intl: IntlShape) => string
+  id: string
+  isInvalid?: (arg: any) => boolean
+  pane: any
+  title: ReactNode
+}
+
+const standardPanes: Record<string, PaneProps> = {
+  finish: {
+    id: 'finish',
+    pane: AccountSetupFinishPane,
+    title: <FormattedMessage id="components.NewAccountWizard.finish" />
+  },
+  mobilityDevices: {
+    id: 'mobilityDevices',
+    pane: AssistiveDevicesPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  mobilityLimitations: {
+    id: 'mobilityLimitations',
+    pane: LimitationsPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  notifications: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.PhoneNumberEditor.invalidPhone'
+      }),
+    id: 'notifications',
+    isInvalid: ({
+      isPhoneNumberVerified,
+      notificationChannel,
+      phoneNumber
+    }: EditedUser) => {
+      return (
+        notificationChannel?.includes('sms') &&
+        (!phoneNumber || !isPhoneNumberVerified)
+      )
+    },
+    pane: NotificationPrefsPane,
+    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
+  },
+  places: {
+    id: 'places',
+    pane: FavoritePlaceList,
+    title: <FormattedMessage id="components.NewAccountWizard.places" />
+  },
+  terms: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.TermsOfUsePane.mustAgreeToTerms'
+      }),
+    id: 'terms',
+    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
+    pane: TermsOfUsePane,
+    title: (
+      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
+    )
+  }
+}
+
+export default standardPanes
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 187e3c586..5fc7e7040 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -14,6 +14,20 @@ export interface UserSavedLocation {
   type?: string
 }
 
+export const visionLimitations = [
+  'none',
+  'low-vision',
+  'legally-blind'
+] as const
+
+export type VisionLimitation = typeof visionLimitations[number]
+
+export interface MobilityProfile {
+  isMobilityLimited: boolean
+  mobilityDevices: string[]
+  visionLimitation: VisionLimitation
+}
+
 /**
  * Type definition for an OTP-middleware (OTP-personas) user.
  */
@@ -24,6 +38,7 @@ export interface User {
   hasConsentedToTerms?: boolean
   id?: string
   isPhoneNumberVerified?: boolean
+  mobilityProfile?: MobilityProfile
   notificationChannel?: string
   phoneNumber?: string
   pushDevices?: number
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index f5af2d47c..cfaf9554e 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -3,7 +3,7 @@ import {
   withAuthenticationRequired
 } from '@auth0/auth0-react'
 import { connect } from 'react-redux'
-import { Formik, FormikProps } from 'formik'
+import { Form, Formik, FormikProps } from 'formik'
 import { injectIntl, IntlShape } from 'react-intl'
 import { RouteComponentProps } from 'react-router'
 import clone from 'clone'
@@ -11,21 +11,24 @@ import React, { ChangeEvent, Component, FormEvent } from 'react'
 import styled, { css } from 'styled-components'
 import toast from 'react-hot-toast'
 
-import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { AppReduxState } from '../../util/state-types'
-import { CREATE_ACCOUNT_PATH } from '../../util/constants'
+import { CREATE_ACCOUNT_PATH, MOBILITY_PATH } from '../../util/constants'
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
 import { toastSuccess } from '../util/toasts'
+import PageTitle from '../util/page-title'
 
 import { EditedUser, User } from './types'
 import AccountPage from './account-page'
 import ExistingAccountDisplay from './existing-account-display'
+import MobilityWizard from './mobility-profile/mobility-wizard'
 import NewAccountWizard from './new-account-wizard'
+import VerifyEmailPane from './verify-email-pane'
 import withLoggedInUserSupport from './with-logged-in-user-support'
 
 interface Props {
   auth0: Auth0ContextInterface
+  basePath?: string
   createOrUpdateUser: (user: User, intl: IntlShape) => Promise<number>
   deleteUser: (
     user: User,
@@ -33,11 +36,10 @@ interface Props {
     intl: IntlShape
   ) => void
   intl: IntlShape
-  isCreating: boolean
+  isWizard: boolean
   itemId: string
   loggedInUser: User
   requestPhoneVerificationSms: (phoneNum: string, intl: IntlShape) => void
-  routeTo: (to: string) => void
   verifyPhoneNumber: (code: string, intl: IntlShape) => void
 }
 
@@ -110,11 +112,6 @@ class UserAccountScreen extends Component<Props> {
     }
   }
 
-  _handleExit = () => {
-    // On exit, route to default search route.
-    this.props.routeTo('/')
-  }
-
   _handleRequestPhoneVerificationCode = (newPhoneNumber: string) => {
     const { intl, requestPhoneVerificationSms } = this.props
     requestPhoneVerificationSms(newPhoneNumber, intl)
@@ -124,7 +121,7 @@ class UserAccountScreen extends Component<Props> {
     t: HTMLInputElement,
     submitForm: () => Promise<void>
   ) => {
-    const { intl, isCreating } = this.props
+    const { intl, isWizard } = this.props
     const firstLabel = t.labels?.[0]
 
     // Disable input (adds a visual effect) during submission
@@ -133,7 +130,7 @@ class UserAccountScreen extends Component<Props> {
     t.style.animation = 'dive-in 1s linear infinite'
     const initialCursor = firstLabel ? firstLabel.style.cursor : ''
     if (firstLabel) firstLabel.style.cursor = 'wait'
-    const loadingToast = !isCreating
+    const loadingToast = !isWizard
       ? toast.loading(
           intl.formatMessage({ id: 'components.UserAccountScreen.updating' })
         )
@@ -141,7 +138,7 @@ class UserAccountScreen extends Component<Props> {
     try {
       await submitForm()
       // On success, display a toast notification for existing accounts.
-      if (!isCreating) {
+      if (!isWizard) {
         toastSuccess(
           intl.formatMessage({
             // Use a summary text for the field, if defined (e.g. to replace long labels),
@@ -209,52 +206,83 @@ class UserAccountScreen extends Component<Props> {
   }
 
   render() {
-    const { auth0, isCreating, itemId, loggedInUser } = this.props
-    const DisplayComponent = isCreating
-      ? NewAccountWizard
-      : ExistingAccountDisplay
+    const { auth0, basePath, intl, isWizard, itemId, loggedInUser } = this.props
     const loggedInUserWithNotificationArray = {
       ...loggedInUser,
       notificationChannel: loggedInUser.notificationChannel?.split(',') || []
     }
     return (
-      <AccountPage subnav={!isCreating}>
-        <Formik
-          // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
-          enableReinitialize
-          initialValues={loggedInUserWithNotificationArray}
-          onSubmit={this._handleFieldChange}
-        >
-          {
-            // Formik props provide access to the current user data state and errors,
-            // (in props.values, props.touched, props.errors)
-            // and to its own blur/change/submit event handlers that automate the state.
-            // We pass the Formik props below to the components rendered so that individual controls
-            // can be wired to be managed by Formik.
-            (formikProps) => (
-              <Wrapper>
-                <DisplayComponent
-                  {...formikProps}
-                  activePaneId={itemId}
-                  // @ts-expect-error emailVerified prop used by only one of the DisplayComponent.
-                  emailVerified={auth0.user?.email_verified}
+      <AccountPage subnav={!isWizard}>
+        <Wrapper>
+          <Formik
+            // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
+            enableReinitialize
+            initialValues={loggedInUserWithNotificationArray}
+            onSubmit={this._handleFieldChange}
+          >
+            {
+              // Formik props provide access to the current user data state and errors,
+              // (in props.values, props.touched, props.errors)
+              // and to its own blur/change/submit event handlers that automate the state.
+              // We pass the Formik props below to the components rendered so that individual controls
+              // can be wired to be managed by Formik.
+              (formikProps) => {
+                if (itemId === 'verify') {
+                  const verifyEmail = intl.formatMessage({
+                    id: 'components.NewAccountWizard.verify'
+                  })
+                  return (
+                    <Form id="user-settings-form" noValidate>
+                      <PageTitle title={verifyEmail} />
+                      <h1>{verifyEmail}</h1>
+                      <VerifyEmailPane
+                        emailVerified={auth0.user?.email_verified}
+                      />
+                    </Form>
+                  )
+                }
+
+                const newFormikProps = {
+                  ...formikProps,
                   // Use our own handleChange handler that wraps around Formik's.
-                  handleChange={this._handleInputChange(formikProps)}
-                  loggedInUser={loggedInUser}
-                  onCancel={this._handleExit}
-                  onCreate={this._handleCreateNewUser}
-                  onDelete={this._handleDeleteUser}
-                  onRequestPhoneVerificationCode={
-                    this._handleRequestPhoneVerificationCode
-                  }
-                  onSendPhoneVerificationCode={
-                    this._handleSendPhoneVerificationCode
-                  }
-                />
-              </Wrapper>
-            )
-          }
-        </Formik>
+                  handleChange: this._handleInputChange(formikProps)
+                }
+
+                if (basePath === CREATE_ACCOUNT_PATH) {
+                  return (
+                    <NewAccountWizard
+                      activePaneId={itemId}
+                      formikProps={newFormikProps}
+                      onCreate={this._handleCreateNewUser}
+                    />
+                  )
+                }
+
+                if (basePath === MOBILITY_PATH) {
+                  return (
+                    <MobilityWizard
+                      activePaneId={itemId}
+                      formikProps={newFormikProps}
+                    />
+                  )
+                }
+
+                return (
+                  <ExistingAccountDisplay
+                    {...newFormikProps}
+                    onDelete={this._handleDeleteUser}
+                    onRequestPhoneVerificationCode={
+                      this._handleRequestPhoneVerificationCode
+                    }
+                    onSendPhoneVerificationCode={
+                      this._handleSendPhoneVerificationCode
+                    }
+                  />
+                )
+              }
+            }
+          </Formik>
+        </Wrapper>
       </AccountPage>
     )
   }
@@ -267,10 +295,14 @@ const mapStateToProps = (
   ownProps: RouteComponentProps<{ step: string }>
 ) => {
   const { params, url } = ownProps.match
-  const isCreating = url.startsWith(CREATE_ACCOUNT_PATH)
+  const basePath = [CREATE_ACCOUNT_PATH, MOBILITY_PATH].find((path) =>
+    url.startsWith(path)
+  )
+
   const { step } = params
   return {
-    isCreating,
+    basePath,
+    isWizard: !!basePath,
     itemId: step,
     loggedInUser: state.user.loggedInUser
   }
@@ -280,7 +312,6 @@ const mapDispatchToProps = {
   createOrUpdateUser: userActions.createOrUpdateUser,
   deleteUser: userActions.deleteUser,
   requestPhoneVerificationSms: userActions.requestPhoneVerificationSms,
-  routeTo: uiActions.routeTo,
   verifyPhoneNumber: userActions.verifyPhoneNumber
 }
 
diff --git a/lib/components/user/wizard.tsx b/lib/components/user/wizard.tsx
new file mode 100644
index 000000000..4fde1db90
--- /dev/null
+++ b/lib/components/user/wizard.tsx
@@ -0,0 +1,188 @@
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { Form, FormikProps } from 'formik'
+import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
+import { push, replace } from 'connected-react-router'
+import React, { Component, MouseEvent } from 'react'
+import styled from 'styled-components'
+import toast from 'react-hot-toast'
+
+import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
+import { GRAY_ON_WHITE } from '../util/colors'
+import PageTitle from '../util/page-title'
+
+import { EditedUser } from './types'
+import { SequentialPaneContainer } from './styled'
+import FormNavigationButtons from './form-navigation-buttons'
+import standardPanes, { PaneProps } from './standard-panes'
+
+export interface WizardProps {
+  activePaneId: string
+  formikProps: FormikProps<EditedUser>
+}
+
+export interface OwnProps {
+  activePaneId: string
+  pages: string[]
+}
+
+interface Props extends OwnProps {
+  activePane: PaneProps
+  activePaneIndex: number
+  formikProps: FormikProps<EditedUser>
+  intl: IntlShape
+  onNext?: () => void
+  pages: string[]
+  parentPath: string
+  returnTo?: string
+  routeTo: (url: string, replace?: string, method?: any) => void
+  title: string
+}
+
+const StepNumber = styled.p`
+  color: ${GRAY_ON_WHITE};
+  font-size: 40%;
+  margin: -1em 0 0 0;
+`
+
+/**
+ * Basic component to build wizards (step-by-step forms).
+ */
+class Wizard extends Component<Props> {
+  /**
+   * Routes to the next pane URL.
+   */
+  _routeTo = (nextId: string, method = push) => {
+    const { parentPath, routeTo } = this.props
+    routeTo(`${parentPath}/${nextId}`, undefined, method)
+  }
+
+  h1Ref = React.createRef<HTMLHeadingElement>()
+
+  _focusHeader = () => {
+    this.h1Ref?.current?.focus()
+  }
+
+  _handleToNextPane = async (e: MouseEvent<Button>) => {
+    const {
+      activePane,
+      activePaneIndex,
+      formikProps,
+      intl,
+      onNext,
+      pages,
+      returnTo = '/',
+      routeTo
+    } = this.props
+
+    if (activePaneIndex < pages.length - 1) {
+      // Don't submit the form if there are more steps to complete.
+      e.preventDefault()
+
+      const {
+        getInvalidMessage = (intl: IntlShape) => '',
+        isInvalid = () => false
+      } = activePane
+      if (isInvalid(formikProps.values)) {
+        alert(getInvalidMessage(intl))
+      } else {
+        const nextId = pages[activePaneIndex + 1]
+        // Execute any action that need to happen before going to the next pane
+        // (e.g. save a user account).
+        if (onNext) {
+          await onNext()
+        }
+        this._routeTo(nextId)
+      }
+      this._focusHeader()
+    } else {
+      // Display a toast to acknowledge saved changes
+      // (although in reality, changes quietly took effect in previous screens).
+      toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
+      routeTo(returnTo)
+    }
+  }
+
+  _handleToPrevPane = () => {
+    const { activePaneIndex, pages } = this.props
+    if (activePaneIndex > 0) {
+      const prevId = pages[activePaneIndex - 1]
+      prevId && this._routeTo(prevId)
+    }
+    this._focusHeader()
+  }
+
+  componentDidMount(): void {
+    this._focusHeader()
+
+    if (!this.props.activePaneId) {
+      this._routeTo(this.props.pages[0], replace)
+    }
+  }
+
+  render() {
+    const { activePane, activePaneIndex, formikProps, pages, title } =
+      this.props
+    const { pane: Pane, title: paneTitle } = activePane || {}
+
+    return (
+      <Form id="user-settings-form" noValidate>
+        <PageTitle title={title} />
+        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
+          <StepNumber>
+            <FormattedMessage
+              id="components.SequentialPaneDisplay.stepNumber"
+              values={{
+                step: activePaneIndex + 1,
+                total: pages.length
+              }}
+            />
+          </StepNumber>
+          {paneTitle}
+        </h1>
+        <SequentialPaneContainer>
+          {Pane && <Pane {...formikProps} />}
+        </SequentialPaneContainer>
+        <FormNavigationButtons
+          backButton={
+            activePaneIndex > 0 && {
+              onClick: this._handleToPrevPane,
+              text: <FormattedMessage id="common.forms.back" />
+            }
+          }
+          okayButton={{
+            onClick: this._handleToNextPane,
+            text:
+              activePaneIndex < pages.length - 1 ? (
+                <FormattedMessage id="common.forms.next" />
+              ) : (
+                <FormattedMessage id="common.forms.finish" />
+              ),
+            type: 'submit'
+          }}
+        />
+      </Form>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
+  const { activePaneId, pages } = ownProps
+  const { pathname } = state.router.location
+  const activePaneIndex = pages.indexOf(activePaneId)
+  return {
+    // This, instead of just standardPages[activePaneId], ensures no "foreign" page is accidentally shown.
+    activePane: standardPanes[pages[activePaneIndex]],
+    activePaneIndex,
+    parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
+  }
+}
+
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Wizard))
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index e8de58f1f..698d2d6fb 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -357,6 +357,7 @@ export interface AppConfig {
   localization?: LocalizationConfig
   map: MapConfig
   mapillary?: MapillaryConfig
+  mobilityProfile?: boolean
   modes: ModesConfig
   /** Interval in seconds past which a trip is no longer considered "on-time". */
   onTimeThresholdSeconds?: number
@@ -378,5 +379,5 @@ export interface AppConfig {
   title?: string
   transitOperators?: TransitOperatorConfig[]
 
-  // TODO: add other config items.
+  // Add other config items as needed.
 }
diff --git a/lib/util/constants.js b/lib/util/constants.js
index 7856c269e..07f0abf3e 100644
--- a/lib/util/constants.js
+++ b/lib/util/constants.js
@@ -15,6 +15,7 @@ export const ACCOUNT_PATH = '/account'
 export const ACCOUNT_SETTINGS_PATH = `${ACCOUNT_PATH}/settings`
 export const TRIPS_PATH = `${ACCOUNT_PATH}/trips`
 export const PLACES_PATH = `${ACCOUNT_PATH}/places`
+export const MOBILITY_PATH = `${ACCOUNT_PATH}/mobilityProfile`
 export const CREATE_ACCOUNT_PATH = `${ACCOUNT_PATH}/create`
 export const CREATE_ACCOUNT_TERMS_PATH = `${CREATE_ACCOUNT_PATH}/terms`
 export const CREATE_ACCOUNT_VERIFY_PATH = `${CREATE_ACCOUNT_PATH}/verify`
diff --git a/lib/util/state-types.ts b/lib/util/state-types.ts
index ac6107a01..7a944d764 100644
--- a/lib/util/state-types.ts
+++ b/lib/util/state-types.ts
@@ -1,3 +1,5 @@
+import { RouterState } from 'connected-react-router'
+
 import {
   ItineraryExistence,
   MonitoredTrip,
@@ -27,5 +29,6 @@ export interface UserState {
 export interface AppReduxState {
   calltaker?: any // TODO
   otp: OtpState
+  router: RouterState
   user: UserState
 }
diff --git a/lib/util/webapp-routes.js b/lib/util/webapp-routes.js
index af39a2ecf..34bcf2dc8 100644
--- a/lib/util/webapp-routes.js
+++ b/lib/util/webapp-routes.js
@@ -11,6 +11,7 @@ import {
   CREATE_ACCOUNT_PATH,
   CREATE_ACCOUNT_PLACES_PATH,
   CREATE_ACCOUNT_VERIFY_PATH,
+  MOBILITY_PATH,
   PLACES_PATH,
   TERMS_OF_SERVICE_PATH,
   TERMS_OF_STORAGE_PATH,
@@ -96,7 +97,12 @@ const routes = [
         <UserAccountScreen {...props} />
       </Suspense>
     ),
-    path: [`${CREATE_ACCOUNT_PATH}/:step`, ACCOUNT_SETTINGS_PATH]
+    path: [
+      `${CREATE_ACCOUNT_PATH}/:step`,
+      `${MOBILITY_PATH}/:step`,
+      `${MOBILITY_PATH}/`,
+      ACCOUNT_SETTINGS_PATH
+    ]
   },
   {
     getContextComponent: (components) => frame(components.TermsOfService),