Wellstar wayfinding landing page
Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.
Role
UX/UI Designer
Industry
Wayfinding & Healthcare
Duration
May - June 2025
Project Context & Challenges
Stakeholder: The Wayfinding and Web Team PdM’s needed a desktop landing page on the main site to promote the Wellstar mobile app's new navigation features.
Core problem: Patients frequently struggle to find the nearest hospital and locate their specific doctor's office for appointments, but they don't realize the mobile app offers real-time maps to solve this..
Key constraints: The pilot only launched with three locations (West Georgia, Cobb, and North Fulton Medical Centers), and they used two different mapping vendors. We had to find a way to embed two completely distinct iframe setups on a single page without crushing site performance.
Role & Goals
Business goal: Drive mobile app downloads by creating a web page that clearly demonstrates how the app’s mapping and route-planning features work.
My role: Product Designer responsible for the page layout, mapping interaction flows, accessible media controls, and building the promotional phone mockups with my team.
User win: A simple, familiar way to test out hospital routing on the web before downloading the app, with direct links to get it from the app store.
Research & Discovery
User mental model: Modeled the map inputs after the standard Google Maps layout, letting users type a starting address and a destination to see their path mapped out.
Performance limitations: Realized early on that running three live, interactive map iframes at the same time would severely slow down the page and clutter the layout, meaning the interface needed to isolate each map experience.
Prioritization & Alignment
Balancing constraints: Agreed with both PMs to limit the initial launch strictly to the three pilot hospitals so we could test vendor stability before rolling it out to the rest of the system.
Accessibility rules: Configured the large hero video to remain paused on initial load, requiring users to manually click play so it wouldn't disrupt people with motion or visual sensitivities.
Solution & Designs
User Control & Freedom: Built the large hero video to stay paused on initial load, requiring a manual click to play so it doesn't disrupt users with motion or visual sensitivities.
Progressive Disclosure: Used an accordion layout for the three pilot hospitals that automatically closes any open tabs when a new one is clicked, keeping the mixed-vendor map iframes from cluttering the layout or lagging the page.
Contextual Calls to Action: Paired the App Store download links with realistic phone mockups and brand illustrations at the bottom of the page, showing users exactly what the app interface looks like right before they choose to download it.
Outcomes
Cross-Vendor Launch: Successfully launched a stable, single-page experience that smoothly handled two different mapping platforms without performance drops.
Reusable Interaction Patterns: Established accessible video rules and accordion iframe layouts that the web team can now apply to future multi-location feature pages.
Wellstar wayfinding landing page
Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.
Role
UX/UI Designer
Industry
Wayfinding & Healthcare
Duration
May - June 2025
Project Context & Challenges
Stakeholder: The Wayfinding and Web Team PdM’s needed a desktop landing page on the main site to promote the Wellstar mobile app's new navigation features.
Core problem: Patients frequently struggle to find the nearest hospital and locate their specific doctor's office for appointments, but they don't realize the mobile app offers real-time maps to solve this..
Key constraints: The pilot only launched with three locations (West Georgia, Cobb, and North Fulton Medical Centers), and they used two different mapping vendors. We had to find a way to embed two completely distinct iframe setups on a single page without crushing site performance.
Role & Goals
Business goal: Drive mobile app downloads by creating a web page that clearly demonstrates how the app’s mapping and route-planning features work.
My role: Product Designer responsible for the page layout, mapping interaction flows, accessible media controls, and building the promotional phone mockups with my team.
User win: A simple, familiar way to test out hospital routing on the web before downloading the app, with direct links to get it from the app store.
Research & Discovery
User mental model: Modeled the map inputs after the standard Google Maps layout, letting users type a starting address and a destination to see their path mapped out.
Performance limitations: Realized early on that running three live, interactive map iframes at the same time would severely slow down the page and clutter the layout, meaning the interface needed to isolate each map experience.
Prioritization & Alignment
Balancing constraints: Agreed with both PMs to limit the initial launch strictly to the three pilot hospitals so we could test vendor stability before rolling it out to the rest of the system.
Accessibility rules: Configured the large hero video to remain paused on initial load, requiring users to manually click play so it wouldn't disrupt people with motion or visual sensitivities.
Solution & Designs
User Control & Freedom: Built the large hero video to stay paused on initial load, requiring a manual click to play so it doesn't disrupt users with motion or visual sensitivities.
Progressive Disclosure: Used an accordion layout for the three pilot hospitals that automatically closes any open tabs when a new one is clicked, keeping the mixed-vendor map iframes from cluttering the layout or lagging the page.
Contextual Calls to Action: Paired the App Store download links with realistic phone mockups and brand illustrations at the bottom of the page, showing users exactly what the app interface looks like right before they choose to download it.
Outcomes
Cross-Vendor Launch: Successfully launched a stable, single-page experience that smoothly handled two different mapping platforms without performance drops.
Reusable Interaction Patterns: Established accessible video rules and accordion iframe layouts that the web team can now apply to future multi-location feature pages.
Wellstar wayfinding landing page
Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.
Role
UX/UI Designer
Industry
Wayfinding & Healthcare
Duration
May - June 2025
Project Context & Challenges
Stakeholder: The Wayfinding and Web Team PdM’s needed a desktop landing page on the main site to promote the Wellstar mobile app's new navigation features.
Core problem: Patients frequently struggle to find the nearest hospital and locate their specific doctor's office for appointments, but they don't realize the mobile app offers real-time maps to solve this..
Key constraints: The pilot only launched with three locations (West Georgia, Cobb, and North Fulton Medical Centers), and they used two different mapping vendors. We had to find a way to embed two completely distinct iframe setups on a single page without crushing site performance.
Role & Goals
Business goal: Drive mobile app downloads by creating a web page that clearly demonstrates how the app’s mapping and route-planning features work.
My role: Product Designer responsible for the page layout, mapping interaction flows, accessible media controls, and building the promotional phone mockups with my team.
User win: A simple, familiar way to test out hospital routing on the web before downloading the app, with direct links to get it from the app store.
Research & Discovery
User mental model: Modeled the map inputs after the standard Google Maps layout, letting users type a starting address and a destination to see their path mapped out.
Performance limitations: Realized early on that running three live, interactive map iframes at the same time would severely slow down the page and clutter the layout, meaning the interface needed to isolate each map experience.
Prioritization & Alignment
Balancing constraints: Agreed with both PMs to limit the initial launch strictly to the three pilot hospitals so we could test vendor stability before rolling it out to the rest of the system.
Accessibility rules: Configured the large hero video to remain paused on initial load, requiring users to manually click play so it wouldn't disrupt people with motion or visual sensitivities.
Solution & Designs
User Control & Freedom: Built the large hero video to stay paused on initial load, requiring a manual click to play so it doesn't disrupt users with motion or visual sensitivities.
Progressive Disclosure: Used an accordion layout for the three pilot hospitals that automatically closes any open tabs when a new one is clicked, keeping the mixed-vendor map iframes from cluttering the layout or lagging the page.
Contextual Calls to Action: Paired the App Store download links with realistic phone mockups and brand illustrations at the bottom of the page, showing users exactly what the app interface looks like right before they choose to download it.
Outcomes
Cross-Vendor Launch: Successfully launched a stable, single-page experience that smoothly handled two different mapping platforms without performance drops.
Reusable Interaction Patterns: Established accessible video rules and accordion iframe layouts that the web team can now apply to future multi-location feature pages.
Interested in connecting?
Nothing beats a real, human connection. Reach out and get to know me better!
Interested in connecting?
Nothing beats a real, human connection. Reach out and get to know me better!
Interested in connecting?
Nothing beats a real, human connection. Reach out and get to know me better!
Copyright 2026 by John Mark Carter
Copyright 2026 by John Mark Carter
Copyright 2026 by John Mark Carter