Staff Directory Page

The Project

Leadership noted our website did not have a staff bio page, and the idea stuck with me. I started shaping it into a real project in between larger production cycles. A single, cohesive directory felt like something our readers should already have, so I built it myself using the time and tools I had.

The Design Concept

An intern captured the staff headshots. Using Photoshop, I created circular backgrounds in our champagne brand color and positioned each subject so their head peeked slightly outside the circle,  a subtle, intentional touch that added personality while keeping the look clean and professional.

The Build

I designed the layout and interaction structure, then built the page directly within BLOX CMS using HTML, CSS, and JavaScript. I used AI as a technical assistant to accelerate code generation and refinement, integrating and customizing each component to work within the CMS. This approach allowed me to maintain full creative control while moving efficiently through the technical work.

Timeline

The page came together over about a month. The photo editing was the most time-consuming phase and was completed alongside higher-priority production and project work.

The Outcome

The result is a sleek, modern staff directory that reflects the professionalism and personality of our team. Staff loved how it turned out, leadership has since asked me to apply the same design approach to board member bios as a future project.

See It Live

To view the interactive staff bios page (as of Q1 2026):