top of page

Reacch-Upgrade Care 
Pricing Table

Web

Designed under strict client requirements, this page balances accessibility guidelines with clear, user-friendly pricing information while accommodating business constraints around in-app purchases.

deviceframes (16) 1.png

Overview | Objective | Requirements | UX Decisions | Outcome

Anchor 1

Overview

The Upgrade Care page for the REACCH app presents users with a three-tier pricing table to access varying levels of health advocacy and crisis support. Designed under strict client requirements, this page balances accessibility guidelines with clear, user-friendly pricing information while accommodating business constraints around in-app purchases.

Reach SS.png
Anchor 2

Objective

To design a pricing comparison screen that:

  • Is accessible to a broad user base, including elderly and disabled individuals

  • Complies with client limitations regarding in-app purchases

  • Encourages upgrades without pressure

  • Feels trustworthy and clear in a medical support context

Constraints & Client Requirements

  • No in-app purchase flow; user must be notified they're being redirected to a browser

  • “Upgrade Care” must appear on the homepage, but styled to remain distinguishable from “Emergency Care”

  • Upgrade tiers must be shown on the site, not embedded in-app

  • Must be accessible across age groups, especially older and at-risk populations

Anchor 3

Tools I Used to Complete this Sprint

icon128x128.png

Figma 

Used for: 

  • Design Journal

  • Mockups

  • Pitch Decks

  • Prototypes

  • Design Library
     

5968770.png

Wix

Used for: 

  • Style Guide

  • Mockups

  • Pitch Decks

  • Prototypes

  • Design Library

  • Component Kit
     

Reach SS.png
Anchor 5

UX Decisions & Accessibility Features

1. Visual Hierarchy

The page uses high contrast (white text on deep red) for top-level categories and prices, ensuring readability for low-vision users. Tier levels are clearly labeled: Level 1, 2, and 3 – with consistent placement of price, sign-up fee, and features. Monthly pricing is bolded and next to the sign-up fee for quick scanning.

 

2. Click Targets & Navigation

The “Upgrade Care” buttons are large and padded, making them easier for users with motor impairments to tap. Each button clearly aligns with its associated tier to prevent confusion.

 

3. Icons & Semantic

Clarity Use of simple, familiar icons (e.g., phone, Apple Watch, calendar) next to each feature adds non-text cues to improve skimming, especially for users with cognitive fatigue or ADHD. Each icon has clear semantic meaning, supporting screen readers and visual learners alike.

 

4. Redirection Awareness

Users are informed of external navigation before they leave the app—respecting user control and preventing disorientation. The link opens in the native browser, complying with platform rules around in-app commerce.

 

5. Text & Language

Simple, plain-language descriptions like “App Access” and “Quarterly health check-ins” are used to enhance comprehension across literacy levels. Bullet-point structure improves scannability for mobile users.

Anchor 4

Outcome & Next Steps

The result is a concise, accessible pricing experience that: Respects user flow by not embedding the payment within the app Enables informed choice across support tiers Encourages trust in a healthcare context through clarity and consistency

Next steps:

Conduct usability testing with older adults and users on assistive devices

 

A/B test button styling on homepage to maximize Upgrade conversions without compromising

 

Emergency use clarity Add alt text and ARIA labels for all icons and buttons to ensure WCAG 2.1 compliance

bottom of page