Applied AI Work: From Concept to Comms-Ready — Designing the Design for Impact Program Pages
The Thinking Was Mine. The Speed Was AI’s.
Taking two Keller Center program pages from low-fidelity wireframes to high-fidelity comps — with AI accelerating production, not replacing the design decisions
Skills: Seeing the Real Problem · Audience Research · Low-Fidelity Prototyping · Usability Testing · Applying AI to a Real Constraint
Princeton’s Keller Center Design for Impact (DFI) program helps faculty and researchers translate academic research into real-world impact — a venture, a collaboration, funding, the right connections — with participants eligible for up to $50K to explore those pathways. When I was asked to design the program’s web pages, I followed the same process I use for any new digital property, with one new addition: using AI to accelerate the final step, not replace the thinking that led there.
Understanding who’s actually coming to this page
Before I sketch anything, I ask stakeholders to brainstorm audiences and scenarios in a simple format: a [type of person] is coming to [do what?]. For DFI, that produced things like:
- An engineering professor coming to find out if his project is eligible
- A psychology researcher coming to learn the Fall 2026 deadline
- A humanities faculty member coming to apply for the program
I supplement whatever stakeholders provide with AI-generated examples to round out the set, then use AI to help analyze the fuller list for patterns and commonalities. That analysis is what actually drives the design — it surfaces which features and content the page needs, not just which topics to cover. From there, I mentally architect how the page or site should work before ever opening a design tool.
Low-fidelity first, and sometimes testable
I built the initial concept as a low-fidelity wireframe in Balsamiq. Balsamiq’s simplicity is the point at this stage — it keeps stakeholder conversations focused on structure and flow rather than color and polish, and it’s also let me build working links between wireframe pages for early usability testing, before a single pixel of real visual design exists.
High-fidelity, AI-accelerated
Once the structure was validated, I used AI tools to move from the low-fidelity wireframe to a higher-fidelity visual representation — something I could put in front of stakeholders that actually looks and feels like the finished page, not just its skeleton. It’s worth being precise about what AI did and didn’t do here: the audience research, the pattern analysis, the information architecture, and every structural decision in the low-fidelity wireframe were mine. AI accelerated the production of the polished visual comp — turning a design decision I’d already made into something stakeholders could react to faster than a from-scratch high-fidelity mockup would have taken.
Why this is on an AI portfolio at all
This is a good example of what applying AI actually looks like for someone whose core skill is design thinking, not front-end production: AI didn’t design the page. It compressed the distance between “I know what this should look like” and “here’s something you can react to” — which meant more stakeholder cycles, faster, without cutting any of the research or reasoning that got me there.
Before / after — what actually changed between wireframe and mid-fidelity
Landing page
Structure carried through essentially untouched: the nav tabs, the black hero, the intro paragraph, the eligibility section, the how-to-apply flow, the stories grid, the pull-quote block, and the contacts section all landed in the wireframe and stayed put. What changed:
- The “What makes DFI unique?” teaser and “Participants get:” list went from lorem ipsum to fully real, specific content (the five-point program approach; details on Design Salons, the Masterclass workshop, and funding).
- My own open questions to myself and the stakeholders — handwritten in red directly on the wireframe (“Are you still doing the fall and spring cycles?”, “Need to clarify the process,” “Need a place to reference the Faculty Fellowship and Student Fellowship”) — were resolved and converted into clean, structured placeholders (a labeled timeline-table placeholder, a labeled photo placeholder) rather than just disappearing.
- Generic placeholder boxes became specifically labeled ones — “[Photo/illustration — program participants]” instead of an unlabeled X-box — so anyone picking up the file later knows exactly what content is still needed.
- Hand-drawn placeholder avatars in the contacts section became properly styled circular photo placeholders, matching how the real headshots will eventually sit.
“What makes DFI unique?” page
Same pattern: structure, section order, and even the core three-part excellence framework (instrumental / critical / moral) were already fully written at the wireframe stage — that argument didn’t change at all between fidelity levels. What changed:
- “What’s missing in campus entrepreneurship” went from lorem ipsum to three real, substantive paragraphs.
- “DFI’s approach” and “DFI’s process” bullet lists went from lorem ipsum to real, specific content.
- Video callouts got more specific captions (e.g., “describes this thing” → “describes DFI’s Sciences & Engineering approach”).
- The red working note “Take the language from Appendix III…” became a clean “[pending final copy]” placeholder — an open item tracked and resolved into something presentable, not silently dropped.
The through-line worth stating explicitly
In both cases, the structural and argumentative thinking — what sections exist, in what order, and what the core message actually is — was already correct in the low-fidelity wireframe. What AI accelerated between wireframe and mid-fi was content development and visual production, not the design decisions themselves.