← Selected Work

CPI Event Registration Experience

A redesigned event registration flow for the Crisis Prevention Institute, built with React, TypeScript, and Optimizely CMS. Improved user experience with breadcrumbs, filtering, and a real-time summary of user selections. Winner of a 2025 Horizon Interactive Gold award.

CPI event registration interface showing the program selection step, with filters for industry, format, and training type; a 4-step progress indicator at the top; and a Program Summary panel on the right
Client
Crisis Prevention Institute
Role
Lead Developer
Date
November 2025
Skills
React TypeScript C# Optimizely CMS
Visit
crisisprevention.com/event-registration →

This project addressed a path for the Crisis Prevention Institute that needed user experience improvements. The new event registration path features a visually enhanced UI, breadcrumbs to guide navigation, clear and visible pricing, additional filtering options, and a program summary that tracks user selections in real-time.

It was an ambitious goal with a tight timeline. My team rose to the challenge, putting in the extra effort to ensure our successful launch. Our client, CPI, reported initial satisfaction as well.

We built the front end using React and TypeScript. The backend included new pages using Optimizely CMS as well as C# Web API controllers to send data to the new application.

As the lead developer, I had the privilege of working on this project from start to finish. My responsibilities included client meetings and demos, technical planning, feature implementation, and onboarding and collaborating with my teammates to ensure we met our launch date.

Desktop CPI Select Date & Time step with location and month/year filter dropdowns, sort options, and a list of available training programs
Date and time selection with filtering by location and month.
Desktop CPI Share Your Selections modal with a copyable share link, the selected program details, and a Program Summary panel
Users can share their selections with other users.
Desktop CPI Attendees step showing the 4-step progress indicator, a panel for entering attendee names and contact information, and a Program Summary panel on the right
The attendees step allows users to enter registrant details.
Desktop CPI event registration review screen showing the 4-step progress indicator at top (Program, Date & Time, Attendees, Review), an Attendees panel with the registrant's name, the selected Nonviolent Crisis Intervention program, and a Program Summary panel on the right with itemized totals
The last step allows users to review their selections before proceeding to the cart.
Mobile
Mobile view of CPI Select Program step with filters for industry, format, and training type, and a list of available programs
Mobile view of the program selection step.
Mobile view of CPI Select Date & Time step showing the 4-step progress indicator, location and month/year filter dropdowns, and sort options
Mobile view of the date and time selection step.
Mobile view of CPI Attendees step with fields for entering registrant names and contact information
Mobile view of the attendees step.
Mobile view of CPI Review step showing the 4-step progress indicator, attendees panel, selected program, and itemized program summary
Mobile view of the review step.