Orange
A low-pressure platform for connecting university students through shared classes — from needfinding to high-fidelity prototype.
Course
Human–Computer Interaction
Team
Gu · Sun · Zhang · Feng
Role
UX Research & Design
Tool
Figma
Year
2024
Interactive Prototype
Open in Figma →01 — Problem
Large lecture environments make it difficult for students to form meaningful academic connections. Introverted students face high psychological costs when initiating contact; extroverted students struggle with screening costs and unclear mutual intent. No campus tool offered a low-risk, goal-oriented path to stable study partnerships.
"In large lecture settings, busy college students need a low-risk way to signal mutual willingness to collaborate, because uncertainty about others' intentions makes initiating connection feel unjustified, awkward, and not worth the time."
Point of View Statement
02 — User Research
Before sketching any solutions, we conducted two semi-structured interviews in February 2024 to understand the lived experience of trying to connect with classmates.
Person A
NEU · CS · Sophomore · Introvert
Rarely initiates contact; reads social cues carefully before acting.
Person B
BU · Economics · Junior · Extrovert
Initiates comfortably but struggles to sustain new academic relationships.
The "legitimate reason" barrier
"课前课后最难开口，因为没有理由。" (Before and after class is the hardest — there's no reason to speak.)
— Person A
Both participants needed a socially acceptable pretext before reaching out. Without one, initiating felt presumptuous — regardless of personality type.
Different costs, same root cause
A feared rejection damaging her self-image. B feared wasting the other person's time. The surface behaviors differed, but both traced back to the same uncertainty: not knowing whether the other person was open to connecting.
Sustaining is harder than initiating
"最难的不是第一句话，是之后怎么维持。" (The hardest part isn't the first sentence — it's what comes after.)
— Person B
First contact was manageable; the real friction was the absence of a shared reason to keep talking once the initial exchange ended.
Findings → Design
We identified four stakeholder groups through interviews and observation, each with distinct needs around academic social connection.
Primary
Students seeking connections
Outgoing, new/transfer/international students; rarely use social media for academic connection
Secondary
Privacy-conscious / passive students
Cautious individuals who prefer being invited rather than initiating
Tertiary
School staff
Professors and TAs — concerned with learning outcomes, FERPA, and fairness
Facilitating
Infrastructure operators
University IT — focused on security, compliance, and reliability
Key Personas
Lina· 20
Secondary · CS student
Goal
Find 1–2 study partners without the awkwardness of cold outreach.
Pain
Needs a "legitimate reason" to reach out; can't tell who else is looking.
Prof. Chen· 56
Tertiary · Khoury professor
Goal
Improve learning outcomes; reduce repetitive Q&A load.
Pain
Worried about FERPA, plagiarism risk, and matching fairness.
Jane· 21
Primary · Econ student
Goal
Quickly find like-minded partners; build natural academic connections.
Pain
Frustrated by ambiguous engagement signals; too many irrelevant matches.
Keira· 21
Primary · Psychology student
Goal
Find 2–3 classmates to regularly talk to without judgment.
Pain
Fears initiating; misses group project windows before they close.
03 — Empathy Map
Synthesizing interview data revealed that both introverted and extroverted students share the same core blocker: not unwillingness to connect, but uncertainty about who else is open to it.
Introvert — Says
- —"I don't know how to start talking to classmates."
- —"Messaging someone out of the blue might be weird."
- —"I need a legitimate reason — like an assignment or exam."
Extrovert — Says
- —"Starting a conversation is easy, but keeping it going is hard."
- —"I don't want to be randomly matched — that's a waste of time."
- —"If I could see that someone also wants a partner, that'd be ideal."
Introvert — Feels
- —Anxious and hesitant before initiating.
- —Embarrassed at the possibility of rejection.
- —Relieved when mutual interest is explicit.
Extrovert — Feels
- —Energetic but annoyed by low-quality or one-off connections.
- —Frustrated when responses feel uncertain in large classes.
- —Relieved when next steps are confirmed quickly.
Key insight: the deeper obstacle is uncertainty of intent and psychological cost. This shifted our focus from generic matching to mechanisms that reduce social risk and signal mutual willingness.
04 — Lo-Fi Prototype
We built a paper prototype covering six pages: Login, Profile, Match (Social + Academic modes), Friends, Forum, and Navigation. Three participants completed think-aloud sessions on five task scenarios before any digital work began.
Paper prototype — screens 2
Paper prototype — screens 3
05 — Hi-Fi Prototype
The high-fidelity prototype was built in Figma, iterating through two rounds of user testing. The interface spans six pages: Login, Main, Profile, Match, Friends, and Forum.
Primary Color
Secondary
Typography
SF Pro Thin / Medium / BoldPlatform
Web-based (no download)Match
Social & Academic modes. AI-assisted suggestions with user-controlled filters.
Forum
Class-anchored discussion board. Post, like, comment, tag by assignment.
Friends
Private + group chats. Group creation requires ≥3 members.
Login page
Main page
Match page
06 — Testing & Iteration
Three rounds of think-aloud testing were conducted across the design process, each driving concrete iterations before the next phase.
Paper Prototype
3 participants · 5 tasks · Primary stakeholders
Profile
Upload vs. Create distinction unclear
→ Add inline explanation or merge into a single path
Friends
Friend list and group creation interface indistinguishable
→ Label the New (+) button; add multi-select for direct group creation
Discussion
New Post button not prominent enough
→ Add text label to the (+) button
Discussion
Tags appear draggable onto individual posts
→ Redesign tags to clearly signal filtering, not labeling
Navigation
Tab labels caused accidental mis-taps
→ Rename tabs; add onboarding guide for each page
Match
"Connect" button hard to locate after a match
→ Rename, enlarge, and color-differentiate the button
Changes Made
- ·Added section-purpose descriptions on the main interface
- ·Clarified Upload vs. Create on the Profile page
- ·Made Connect/Invite buttons in Match more prominent after search
- ·Changed Post button color in Discussion; refined tags and post layout
- ·Added dedicated friend-tap interface in Friends section
- ·Refined task instructions for greater testing clarity
Digital Hi-Fi Prototype
4 participants · 5 tasks · Primary + Secondary stakeholders
Primary · less device-familiar · age 20–24
- ·Selected wrong Match mode initially
- ·Forum tags confusing; post didn't appear immediately — real-time feedback missing
Primary · device-familiar · age 20–24
- ·Didn't switch to Academic Match — tab too small
- ·Forum tag confusion persisted
Secondary · device-familiar · age 19–21
- ·Incorrectly used custom tag function (task still completed)
- ·Clicked wrong Add button in Friends — lacked visual feedback
Secondary · device-familiar · age 19–21
- ·Hesitated finding Match tabs
- ·Forum purpose initially unclear — described as a "language issue"
Recurring Issues
Two issues dominated: Match tab visibility (too small, no guidance) and forum post creation logic (confusing flow, no real-time feedback). Briefing improved between sessions; follow-up questions became more targeted.
Final Prototype
Forum tag creation — before & after
Before
After
Discovery
During T4 testing, ~80% of users selected the custom tag option but never clicked Add afterward — they assumed typing was enough to confirm the tag.
Problem
The input box and Add button were visually separated, so users didn't see them as one action. This caused widespread confusion in the forum posting flow.
Fix
Moved the Add button into the input field to unify typing and confirmation. Enlarged the button and made the input border and background more prominent.
07 — Design Decisions
Decision 1
Class tab → Match-centered model
We initially built a "Class" tab inspired by Canvas, letting students browse classmates and post in a forum. Testing showed it improved visibility but not approachability — it replicated passive classroom dynamics. We shifted to a Match-centered model where the core mechanism signals mutual openness, reducing social risk rather than listing people.
Decision 2
Standalone app → Web-based
Interviews revealed that students wanted lightweight, incidental connection tied to coursework — not another app to download. A dedicated app would add friction precisely where we wanted to remove it. Web-based keeps Orange anchored in an academic context within existing workflow.
Decision 3
MBTI → personality descriptions
The MBTI filter confused users unfamiliar with the system, reducing its value as a matching signal. We planned to replace it with plain-language personality and communication-style descriptors to lower cognitive load and prevent misinterpretation.
08 — Remaining Issues
Despite multiple iterations, four usability issues remain — each corresponding to a heuristic violation (visibility, feedback, consistency, control).
Abbreviated names in chat
Replace initials with full names or consistent visual identifiers.
Forum class filter has no effect
Dynamically update posts on class selection; indicate active filter visually.
Group chat minimum 4 users
Allow smaller groups (2–3) to reflect actual communication patterns.
Filter panel state inconsistency
Closing the panel should clearly reflect whether selections are applied or reset.