👋

Maps Clinic App – UI/UX

Project Overview:

MAPS Mobile Anesthesia are pioneers in mobile anesthesiology, transforming how clinics across the US deliver care through digital-first operations. CMA was brought in to overhaul the user experience of their mobile and clinic platforms, refining journeys, resolving friction points and aligning the interface with their bold, future-facing vision.

Our work focused on onboarding, account setup and everyday usability – each critical to clinician engagement and platform scalability. Alongside UX improvements, we introduced a more cohesive design system that enhances accessibility and ensures visual consistency across every touchpoint.

Because when it comes to digital transformation, it shouldn’t feel like pulling teeth.

UX Audit

Early-stage research highlighted key user pain points:

  • Users dropped off before reaching the app’s core value
  • Navigation was unclear, with inconsistent component behaviour
  • Visual hierarchy was weak, especially in forms and status indicators
  • Accessibility was inconsistent (e.g. no screen-reader cues, unlabelled elements)

We applied atomic design principles to fix foundational issues:

    • Atoms: Fonts, colours, icons
    • Molecules: input rows, OTP blocks, status tags
    • Organisms: Appointments cards, profile forms
    • Templates & Pages: Full screen flows

Sprint Breakdown

Sprint One: Sign-Up & Login

Goal: Minimise friction at entry points to improve onboarding conversion



Key Improvements:

    • Redesigned login, password recovery and OTP flows
    • Condensed forms with inline error handling (no modals)
    • OTP resend logic, expiry timer and branded security emails
    • Dynamic font scaling and input accessibility for iOS

Sprint Two: Settings

Goal: Reorganise and enhance the settings menu to reduce cognitive load

Key improvements: 

    • Grouped settings logically (profile, billing, support)
    • Added help entry points and notification controls
    • introduced future-ready slots for automation and billing options

Sprint Three: Clinic Web App

Goal: Bring the clinic dashboard up to visual and UX parity with the mobile app



Key Improvements:

  • Unified styling, layouts and hierarchy
  • Streamlined appointment views and filters
  • Added support for direct actions from calendar views
  • Integrated cross-device functionality from the mobile experience

Component Library

A reusable library was created to speed up future development and maintain design consistency. This includes:

 

    • Button states (primary/secondary, disabled, hover, focus)
    • Status badges (pending, needs review, cleared)
    • Toast alerts & modals (actionable, dismissible, with icons)
    • Progress bars for profile completion
    • Form validation patterns and tooltips

    Colours & Typography

    Button Specification

    Banners & Messaging

    MAPS Mobile – Feature Screens

    Onboarding & Login

     

      • First-time intro tour with skip and progress indicator
      • Login and OTP flows now error-resilient and readable
      • Password rules and field guidance built in

    Profile Completion

     

      • Percentage progress bar + colour-coded priority
      • Tabs split personal and medical info
      • Profile pictures, editable usernames, validation hints

    Dashboard & Navigation

    • “Pending” alerts redesigned to be tappable
    • Appointment cards show status, time and actions
    • Settings, Help, and Profile Editing unified in top bar.

    MAPS Clinic – Feature Screens

    Calendar View

     

      • Clear day/week toggle, appointment filtering, action buttons

    Appointment Card

     

      • Appointment Cards: New hierarchy for date, patient, reschedules, status

    Patient Record

    • Split layout with contact, notes and pre-op documents

    Notifications & User Dropdown

    • Clean layout with priority alerts and quick access

    More like this …

    FCAS Website

    FCAS Website

    Following the success of the Timeout campaign, we unified FCAS’s two websites into a single platform built for clarity, campaign delivery, and long-term growth.

    read more
    FCAS Timeout Campaign

    FCAS Timeout Campaign

    CMA delivered a bold digital platform for FCAS – uniting global campaigns like #TimeoutAgainstHate to drive engagement, accessibility and real-world impact.

    read more