Content — Process
From stakeholder alignment
to shipped components
I owned every phase — research, wireframing, UX architecture, front-end development, accessibility compliance, animation logic, and brand integration.
Discovery & Stakeholder Alignment
I started by analyzing existing timeline content and interviewing stakeholders to understand what stories mattered most, how they wanted the organization positioned, and what success looked like. This ensured the component served strategy — not just design.
High-Fidelity Wireframing (Before Code)
Before writing a single line of HTML or JavaScript, I built detailed Figma wireframes. This allowed early stakeholder feedback, faster iteration cycles, and reduced development rework. This decision alone saved significant revision time later in the process.
Figure 1 — High-fidelity Figma wireframe establishing the zigzag layout, year markers, and expandable card structure.
Component Variations & Decision Framework
Rather than delivering one solution, I presented four expandable card variations — with and without icons, with and without CTA buttons, and at different content densities. This turned subjective preference into structured decision-making. Instead of "Do you like it?" — it became: "Which feature set best supports your content strategy?" That shift elevated the conversation from visual preference to UX strategy.
Figure 2 — Four component variations presented to stakeholders for structured decision-making.
Development Architecture
I built the system using semantic HTML5, modern CSS (Grid, Flexbox, Custom Properties), vanilla JavaScript, and GPU-accelerated animations via CSS transforms. Everything was structured as reusable building blocks: navigation nodes, expandable cards, progress indicators, and an orientation switch for horizontal/vertical modes. For UM's request, I developed a conditional month-tab system that appears only when multiple events exist in the same year — requiring dynamic state management and careful debugging.
Brand Integration Strategy
Both clients use green-based color systems. To avoid visual sameness, I differentiated through shape language — circles for Baptist Health, diamonds for UM — along with distinct interaction styling, motion timing, CTA hierarchy, and accent colors. This reinforced brand identity well beyond color alone.
