UI/UX

inSPIRE Online

inSPIRE Online was conceived as an online expression of the material found in The inSPIRE Journey. This entire project was wire-framed, designed, and developed exclusively by myself.

The user interface for inSPIRE Online had 3 primary goals. The first, to offer The inSPIRE Journey Video Sessions at an easy to use online destination, second, to provide the accompanying Leader Guide and Participant Guide materials in downloadable PDF format by donation, and third, it needed to be usable on all kinds of devices.

Scrollable "Netflix" style thumbnail "streams" for both the English and French translations of the material immediately invite the user to begin browsing content, which is only ever a single click away. Once a user arrives on the video viewing page, the content is presented in a clear and concise layout, making it easy to engage with the video material or browse to the last or next session in the learning series. A PDF resource area gives the user all the information they need to act, and a condensed inline donation form processes their payment information and provides the associated PDFs as they engage with the video.

Interactions are denoted by bespoke custom designed icons and animations, lending a professional fit and finish to the user experience. The interface itself was custom built using HTML, CSS, Javascript (Vanilla & jQuery), PHP, the Laravel framework, and Statamic CMS. Stripe and Stripe Elements was used for on-site payment processing.