A MacBook with lines of code on its screen on a busy desk

Event checkout experience

Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.

Role

UX/UI Designer

Industry

Events & Healthcare

Duration

Jul - Aug 2025

Project Context & Challenges

Stakeholder: The Wellstar Community Outreach and Foundation teams requested a more robust and familiar online registration experience for community health events.
Core problem: Forced phone-based payment. Users unable to complete event conversion online. High friction caused by the lack of a digital billing integration during the sign-up flow.
Key constraints: Engineering requirement for secure, PCI-compliant data capture within the modal, integrated with automated triggers for immediate email receipts and persistent click-to-call support.

Role & Goals

Business goal: Eliminate manual registration overhead by enabling a direct-to-digital payment path. Target 100% online conversion for standard events.
My role: Product Designer responsible for the interaction flow and visual treatment of a secure, in-app modal transaction experience.
User win: A frictionless complete registration workflow without the need for phone calls. Immediate confirmation and digital receipts delivered in a single session.

Research & Discovery

Data & sources used: Audited drop-off metrics and session recordings in Fullstory showing users stalling at the "Call to Pay" prompt. Conducted a comparative audit of industry-standard checkout flows.
Key themes: Discovered a mismatch between user-familiar workflows and available functionality. High friction occurred specifically when the interface failed to provide an on-page mechanism to finalize their registration through payment.

Prioritization & Alignment

Iterative Alignment: Partnered with the PdM to map out the registration flow, making sure the user data collected on the Sitecore page passed cleanly into the modal trigger without interrupting the signup process.
Balancing Constraints: Worked with engineering to sync the frontend modal triggers with our internal Sitecore setup and backend event handler, ensuring the UI updated accurately as soon as a payment cleared.
Strategic De-scoping: Aligned with the PdM to focus on standard online card payments for the digital launch, keeping the existing phone-in payment option as the primary fallback to avoid building complex offline billing paths.

Solution & Designs

Recognition Rather Than Recall: Placed the attendee registration fields directly underneath the main event details on the Sitecore page. Once filled out, clicking complete opens up the payment modal. To save users from typing the exact same info twice, we added an option to automatically copy their registration details straight into the billing fields.
Smart Fields & System Errors: Added real-time validation to the credit card inputs, making the field turn red with a warning if the number is too short or too long for a standard card layout. We also accounted for backend failures by designing a specific error state that gives users a direct support number to call if the payment system or event handler goes down.
Match Between System & Real World: Designed the final state of the modal to change completely once a transaction goes through. Instead of just a generic success message, it immediately surfaces critical event details like the confirmation number, date, time, address, and a customer service line for follow-up help.

a pair of cell phones on a concrete block

a cell phone with a yellow rectangular screen

Outcomes

On-Time System Integration: Successfully launched the new online payment option within the target timeline, safely linking Sitecore, Cybersource, and the internal event handler without disrupting existing site workflows.
Proactive Error Handling: Mitigated failed submissions by catching invalid card formats before checkout, while ensuring users always had a clear path to finish registering via the phone fallback if backend systems went down.
Reusable Checkout Layout: Established a standardized form-to-modal pattern that the team can now reuse across the platform for other department events and ticketed registrations, reducing future design and development time.

Event checkout experience

Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.

Role

UX/UI Designer

Industry

Events & Healthcare

Duration

Jul - Aug 2025

Project Context & Challenges

Stakeholder: The Wellstar Community Outreach and Foundation teams requested a more robust and familiar online registration experience for community health events.
Core problem: Forced phone-based payment. Users unable to complete event conversion online. High friction caused by the lack of a digital billing integration during the sign-up flow.
Key constraints: Engineering requirement for secure, PCI-compliant data capture within the modal, integrated with automated triggers for immediate email receipts and persistent click-to-call support.

Role & Goals

Business goal: Eliminate manual registration overhead by enabling a direct-to-digital payment path. Target 100% online conversion for standard events.
My role: Product Designer responsible for the interaction flow and visual treatment of a secure, in-app modal transaction experience.
User win: A frictionless complete registration workflow without the need for phone calls. Immediate confirmation and digital receipts delivered in a single session.

Research & Discovery

Data & sources used: Audited drop-off metrics and session recordings in Fullstory showing users stalling at the "Call to Pay" prompt. Conducted a comparative audit of industry-standard checkout flows.
Key themes: Discovered a mismatch between user-familiar workflows and available functionality. High friction occurred specifically when the interface failed to provide an on-page mechanism to finalize their registration through payment.

Prioritization & Alignment

Iterative Alignment: Partnered with the PdM to map out the registration flow, making sure the user data collected on the Sitecore page passed cleanly into the modal trigger without interrupting the signup process.
Balancing Constraints: Worked with engineering to sync the frontend modal triggers with our internal Sitecore setup and backend event handler, ensuring the UI updated accurately as soon as a payment cleared.
Strategic De-scoping: Aligned with the PdM to focus on standard online card payments for the digital launch, keeping the existing phone-in payment option as the primary fallback to avoid building complex offline billing paths.

Solution & Designs

Recognition Rather Than Recall: Placed the attendee registration fields directly underneath the main event details on the Sitecore page. Once filled out, clicking complete opens up the payment modal. To save users from typing the exact same info twice, we added an option to automatically copy their registration details straight into the billing fields.
Smart Fields & System Errors: Added real-time validation to the credit card inputs, making the field turn red with a warning if the number is too short or too long for a standard card layout. We also accounted for backend failures by designing a specific error state that gives users a direct support number to call if the payment system or event handler goes down.
Match Between System & Real World: Designed the final state of the modal to change completely once a transaction goes through. Instead of just a generic success message, it immediately surfaces critical event details like the confirmation number, date, time, address, and a customer service line for follow-up help.

Outcomes

On-Time System Integration: Successfully launched the new online payment option within the target timeline, safely linking Sitecore, Cybersource, and the internal event handler without disrupting existing site workflows.
Proactive Error Handling: Mitigated failed submissions by catching invalid card formats before checkout, while ensuring users always had a clear path to finish registering via the phone fallback if backend systems went down.
Reusable Checkout Layout: Established a standardized form-to-modal pattern that the team can now reuse across the platform for other department events and ticketed registrations, reducing future design and development time.

Event checkout experience

Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.

Role

UX/UI Designer

Industry

Events & Healthcare

Duration

Jul - Aug 2025

Project Context & Challenges

Stakeholder: The Wellstar Community Outreach and Foundation teams requested a more robust and familiar online registration experience for community health events.
Core problem: Forced phone-based payment. Users unable to complete event conversion online. High friction caused by the lack of a digital billing integration during the sign-up flow.
Key constraints: Engineering requirement for secure, PCI-compliant data capture within the modal, integrated with automated triggers for immediate email receipts and persistent click-to-call support.

Role & Goals

Business goal: Eliminate manual registration overhead by enabling a direct-to-digital payment path. Target 100% online conversion for standard events.
My role: Product Designer responsible for the interaction flow and visual treatment of a secure, in-app modal transaction experience.
User win: A frictionless complete registration workflow without the need for phone calls. Immediate confirmation and digital receipts delivered in a single session.

Research & Discovery

Data & sources used: Audited drop-off metrics and session recordings in Fullstory showing users stalling at the "Call to Pay" prompt. Conducted a comparative audit of industry-standard checkout flows.
Key themes: Discovered a mismatch between user-familiar workflows and available functionality. High friction occurred specifically when the interface failed to provide an on-page mechanism to finalize their registration through payment.

Prioritization & Alignment

Iterative Alignment: Partnered with the PdM to map out the registration flow, making sure the user data collected on the Sitecore page passed cleanly into the modal trigger without interrupting the signup process.
Balancing Constraints: Worked with engineering to sync the frontend modal triggers with our internal Sitecore setup and backend event handler, ensuring the UI updated accurately as soon as a payment cleared.
Strategic De-scoping: Aligned with the PdM to focus on standard online card payments for the digital launch, keeping the existing phone-in payment option as the primary fallback to avoid building complex offline billing paths.

Solution & Designs

Recognition Rather Than Recall: Placed the attendee registration fields directly underneath the main event details on the Sitecore page. Once filled out, clicking complete opens up the payment modal. To save users from typing the exact same info twice, we added an option to automatically copy their registration details straight into the billing fields.
Smart Fields & System Errors: Added real-time validation to the credit card inputs, making the field turn red with a warning if the number is too short or too long for a standard card layout. We also accounted for backend failures by designing a specific error state that gives users a direct support number to call if the payment system or event handler goes down.
Match Between System & Real World: Designed the final state of the modal to change completely once a transaction goes through. Instead of just a generic success message, it immediately surfaces critical event details like the confirmation number, date, time, address, and a customer service line for follow-up help.

Outcomes

On-Time System Integration: Successfully launched the new online payment option within the target timeline, safely linking Sitecore, Cybersource, and the internal event handler without disrupting existing site workflows.
Proactive Error Handling: Mitigated failed submissions by catching invalid card formats before checkout, while ensuring users always had a clear path to finish registering via the phone fallback if backend systems went down.
Reusable Checkout Layout: Established a standardized form-to-modal pattern that the team can now reuse across the platform for other department events and ticketed registrations, reducing future design and development time.