Magpie Bridge — Designing AI Support for the Isolation Generation
ARIN5301 HCI · Spring 2026 · Group 3 Team: Haokun Shi · Yixin Guo · Le Peng (Lauren) · Mingwei Xu
Project goal
Design an interactive, AI-supported system that helps post-pandemic students rebuild real-world social connection — without making the AI replace human judgment.
Our framing: “Bridge, not replace.”
NEEDFINDING
The user
Students who entered university during the height of the pandemic. They lost the accidental encounters and subtle social cues that typically shape how young adults navigate relationships. They are navigating the post-pandemic world with a documented loneliness spike and a significant drop in their sense of belonging.
The need
Mapped to Desmet & Fokkinga’s typology, these students have a profound unfulfilled need for Relatedness — specifically the sub-need for Camaraderie.
But because they are currently navigating relationships with less confidence and uncertainty about social norms, there’s a secondary critical need for Security and Social Stability: they need to feel safe and verified before stepping out of their digital comfort zones.
The insight
The problem isn’t a lack of desire for connection — the rise in singleness and loneliness proves the demand is there.
The problem is friction and atrophy. Students feel a sense of detachment because the logistical jump from a screen to a physical location feels insurmountable. By using an agentic system that handles the how and where — using verified school identities — we provide the scaffolding they need to rebuild their real-world social lives.
BRAINSTORMING
From needfinding to ideation, we mapped four key tensions:
- Initiation pressure — How to lower the barrier of the first move
- Trust & safety — Verification and clearer intentions to reduce uncertainty
- Matching depth — Whether AI could go beyond surface-level profiles to support meaningful connection
- Online → offline transition — How AI could help users move from chat to a real meetup, while keeping users in control
We treated AI not as something that replaces human judgment, but as support: helping students feel safer, reducing friction, and making the process of connection more manageable.
POV
Post-pandemic Isolation Generation students who missed formative face-to-face social development phases and now experience a stunted sense of belonging need a system that facilitates Relatedness (specifically Camaraderie and Social Stability) by providing social scaffolding to move connections from digital interfaces to real-world environments because while the pandemic ended, the social atrophy remains; students crave connection but lack the logistical confidence and institutional trust to navigate the transition from a muted Zoom window to a physical restaurant or theater setting.
DESIGN GOALS
We aimed for three things:
- Trust — school email, same-campus ID, transparent data handling
- Connections — not just we should hang out, but a real time and place
- Control — three concrete refinements from speed dating: ask before using preference, let people browse without AI sorting, let people change the AI date plan
STORYBOARDS
Storyboard 1 — Safer first contact
A student wants to connect with someone but hesitates because existing dating apps feel uncertain and risky. Our concept introduces a school-verified campus platform that offers a lower-pressure way to initiate contact.
User feedback: verification was the single most-mentioned trust signal. Students said “I’d actually use this if it stayed inside my school.”
Storyboard 2 — Better matching
Current swiping culture often feels shallow and low in trust. We explored whether AI could match on shared values, interests, and overall compatibility rather than appearance alone.
User feedback: users wanted AI to be optional, not mandatory. → Led directly to the browse freely toggle in our final design.
Storyboard 3 — From digital to physical
Even after two people are interested, the logistics of planning a first date are surprisingly high-friction. AI could handle venue and time suggestions, while humans focus on the human part.
User feedback: users wanted the AI suggestion to be a starting point, not a decision — overrides had to be visible. → Led to the always-visible change venue / change time buttons.
OUR FINAL IDEA — MagpieBridge
A campus social platform with school-email verification, value-based matching with explicit AI opt-in, and an AI date planner that suggests and lets you override a venue and time.
The flow (8 screens):
- Landing — warm cream paper, deep midnight ink, postcard metaphor (slower than swiping)
- School-email verification — six-digit code
- Profile (your half of the postcard) — name, photo, short description; no hobby lists, no “looking for”
- Preferences with explicit opt-in toggle for AI matching
- Matches — five suggested per day, with a browse freely toggle, AI-suggested badge on every algorithmic element
- Open a match’s full postcard
- AI date plan — venue + time, with always-visible change venue and change time buttons
- Confirmed — quiet confirmation, postcard metaphor closes
Code: open-source on GitHub — YixyG/MagpieBridge_Dating Stack: Next.js 16 · React 19 · Tailwind v4 · Radix primitives · Fraunces / DM Sans / DM Mono
VIDEO PROTOTYPE & USER FEEDBACK
Walkthrough — 8 screens of the prototype (4:13)
Design rationale — how each screen maps to a needfinding insight (4:32)
Three validated refinements from speed dating, all visible in the final prototype:
| Speed-dating concern | Design response |
|---|---|
| ”What happens to my preference data?” | Explicit opt-in toggle on preferences screen, not buried in ToS. If you don’t opt in, matching falls back to manual browse. |
| ”I don’t want the algorithm gatekeeping who I see” | Browse freely toggle on the matches page. AI off → list sorts by walking distance. App still works without the algorithm. |
| ”AI shouldn’t decide for me” | Change venue / change time override buttons always visible on the date plan. The AI suggestion is a starting point, not a decision. |
DESIGN DECISIONS
Visual language
- Warm cream paper + deep midnight ink + subtle constellation overlays
- Serif headings (Fraunces) + sans body (DM Sans) + mono labels (DM Mono)
- Postcard frame metaphor — one clear card per step
Wording
- “Bridge”, “postcards”, “short walks” — small campus story, not a black-box score
- We don’t say like or match — you “choose to take a step”
Layout
- Two columns on most steps: Why you’re here (left) + What to click (right)
- Constellation Progress Indicator at the top — shows the full onboarding path upfront, addressing drop-off from process uncertainty
State
- Single client-side React context, persists to localStorage so a refresh doesn’t reset the demo
MY CONTRIBUTION
This section is being refined — exact attribution per teammate is being verified before final submission.
I worked alongside Haokun, Yixin, and Mingwei across both phases. My contribution focused on the AI-supported parts of the design and the prototype build:
- Co-developed the needfinding synthesis (mapping Desmet & Fokkinga’s typology to the Isolation Generation user)
- Contributed to storyboard ideation and the speed-dating validation rounds
- Shipped portions of the high-fidelity Next.js prototype on GitHub (state management, screen flow)
- Co-wrote the design rationale that links each prototype screen back to a needfinding insight
- Helped produce the two demo videos
USE OF AI
We used Claude as a collaborator throughout the project. Specifically:
- Needfinding synthesis — turning a stack of interview notes and survey data into a tightened POV statement
- Design-rationale drafting — articulating, for each prototype screen, which needfinding insight the screen addressed
- Prototype scaffolding — generating the initial Next.js component structure and Tailwind classes for the matches and date-plan screens, which we then refined by hand
- Copy passes — getting first drafts of user-facing text in the postcard / bridge / short-walk register, then editing for voice
The AI was a collaborator inside the team, not a designer. Every design decision, every refinement, every line of user-facing copy was reviewed, modified, and signed off by a human team member.
REFLECTION
Knowledge gained
- HCI is a method, not a vibe. Mapping a need to Desmet & Fokkinga’s typology forced us to be precise — Camaraderie under Relatedness, with Social Stability as the secondary need. Without that framework, we would have written “students are lonely, let’s make a dating app.” With it, we built an argument for why this specific scaffolding works.
- Speed dating is the cheapest way to kill a bad idea early. Two of our three validated refinements came directly from a 90-minute speed-dating session, not from any subsequent research.
- AI as scaffolding, not substitute. “Bridge, not replace” became a real design rule, not a slogan — every AI-supported feature has a manual fallback.
Lessons learned
- The cheap AI bolt-on is the wrong move. Our first instinct was to put AI everywhere — match score, profile parsing, automated icebreakers. Almost every speed-dating conversation pushed back on this. We moved to “AI handles logistics; humans decide on people” and the design got immediately cleaner.
- Interface micro-decisions carry the trust message, not the marketing copy. Two examples: the explicit opt-in toggle on preferences (vs. burying consent in a privacy policy) and the visible change venue / change time buttons (vs. hiding them in a menu). Whether users trusted the system was decided by these small surface-level choices, not by anything we said about ourselves.
Challenges encountered
- The needfinding-to-design jump is harder than it looks on the rubric. Going from “students feel detached” to “design a school-email-verified postcard interface with an AI date-planner” is a non-trivial leap. We needed at least two rounds of speed-dating to know which design choices were load-bearing.
- Deciding which speed-dating feedback to act on. Users contradict each other; some feedback is signal, some is noise. We adopted a rule: act on it only if at least two unrelated users raised the same friction. That filtered ~60% of comments out and let us focus on the three refinements we actually shipped.
PRESENTATION
