Interactive Model

Project overview

This project is an interactive visualization of the Christlike Leader Model, created in collaboration with the Sorensen Center. Using HTML, CSS, and JavaScript, I designed a responsive, user-friendly interface that allows visitors to explore core leadership principles in a dynamic and memorable way. Users can select different principles to reveal concise explanations, hover to discover additional context, and click through layered elements for deeper doctrinal insights. The experience is designed to feel seamless and intuitive, guiding users through visual components that reinforce key attributes of Christlike leadership. The interactivity transforms abstract ideas into something more tangible, helping users better understand and internalize what it means to lead in a Christ-centered way.

Problem

The original Christlike Leader Model was presented as a static visual, which made it difficult for users to explore deeper context behind each leadership principle. Visitors could see the model but could not interact with it to access additional explanations or supporting insights. The Sorensen Center wanted a more engaging way for users to explore the principles and better understand how each attribute contributes to Christ-centered leadership.

Approach / process

I began by designing early interaction concepts in Figma to explore how users could visually navigate the leadership model. These prototypes went through several iterations based on feedback from Sorensen Center staff to ensure the interactions were clear, intuitive, and aligned with the educational goals of the project. I also accounted for CMS constraints, making sure the design could be effectively integrated within the existing platform. Throughout the process, I prioritized WCAG compliance by considering accessibility best practices such as keyboard navigation, semantic structure, and contrast. After refining the layout and interaction flow through design reviews, I translated the approved concept into a responsive web interface that allows users to explore the model dynamically.

Implementation details

I designed an interactive visual experience that allowed users to explore each principle through hover and click interactions. The goal was to turn a static conceptual model into a more intuitive and memorable digital learning tool.

Results / outcomes