Resident Profile — Redesign Options

Current state vs. proposed redesign matched to agent profile energy

Current
AT
Alex Thompson
Williamsburg
⏰ 3 years in Williamsburg
📅 My Events
Coffee
Running
Dog Parks
Italian Food
Open to meeting people
23
Posts
47
Comments
12
Saved
⚠ Gray boxes — no energy. Numbers feel administrative, not celebratory.
✅
23
Confirmed recs
📅
5
Events organized
🤝
8
Neighbors helped
⚠ Good icons but white/gray bg washes them out. No visual hierarchy.
Community Score
Active Neighbor
64
out of 100
Events organized
5
Events attended
14
Neighbors helped
8
Confirmed recs
23
Group activity
3
⚠ Plain white card, no visual drama. Thin bars (6px) and flat number don't celebrate the score.
Badges
🏘️
Block Captain
Helped 5+ neighbors
Earned Jan 2026
⭐
Top Reviewer
20+ confirmed recs
Earned Feb 2026
🎉
Event Host
Organize 10 events
5/10 complete
🌟
Super Connector
Intro 15 neighbors
8/15 complete
⚠ Earned badges decent but flat. Unearned at opacity-50 feels disabled, not aspirational.
🏠
Feed
🗺️
Map
📅
Events
👤
Profile
Proposed Redesign
AT
64
Alex Thompson
Williamsburg
⏰ 3 years in Williamsburg
📅 My Events
Coffee
Running
Dog Parks
Italian Food
Open to meeting people
23
Posts
47
Comments
12
Saved
✓ Warm violet-to-pink bg + gradient numbers — same warmth as agent stats
✅
23
Confirmed recs
📅
5
Events organized
🤝
8
Neighbors helped
✓ Warm gradient bg makes icons pop. Numbers in gradient text add energy.
Community Score
Active Neighbor
64
/100
Events organized
5
Events attended
14
Neighbors helped
8
Confirmed recs
23
Group activity
3
✓ Gradient left border, score circle matching agent trust circle, thicker rounded bars, gradient "Active Neighbor" pill
Badges
🏘️
Block Captain
Helped 5+ neighbors
Earned Jan 2026
⭐
Top Reviewer
20+ confirmed recs
Earned Feb 2026
🎉
Event Host
Organize 10 events
5/10 complete
🌟
Super Connector
Intro 15 neighbors
8/15 complete
✓ Earned: gradient left border + gradient icon bg. Unearned: dashed border feels "unlockable" not "disabled." Progress in brand purple.
🏠
Feed
🗺️
Map
📅
Events
👤
Profile
Agent Profile — Reference
EC
4.8
Emma Chen
Chen & Associates · Compass
Top Agent ✓ Verified
🔔 Needs Your Attention
2 New Intros
2 Unread Messages
1 Client Update Due
4.8
Trust
Trust Score
Based on 47 transactions + client reviews
★ 4.9 Rating 48 Closings
Intro Requests
JM
Jordan M.
Looking in Williamsburg
Budget: $3,200–$4,000/mo
✓ Accept
Decline
SR
Sam R.
Looking in Greenpoint
Budget: $2,800–$3,500/mo
✓ Accept
Decline
Active Clients
Maria L.
3rd showing scheduled · Wed 2pm
Follow Up
David K.
Offer submitted · Waiting on LL
In Progress
🏠
Feed
🗺️
Map
📅
Events
👤
Profile

Same Visual Language — Two Different Roles

Gradient accents, colored score circles, warm violet-to-pink backgrounds — the agent profile's energy applied to the resident context. The resident profile doesn't need a "Needs Your Attention" banner, but it can still feel alive: a score circle celebrating neighborhood contribution, warm stat cards, and badges that feel like achievements worth earning.

Change Summary

Current Problems

  • • Stat boxes use bg-gray-50 — flat and lifeless
  • • Reputation row has colored icons but white/gray bg washes them out
  • • Community Score is a plain number — doesn't celebrate it
  • • Progress bars at 6px are too thin to feel like progress
  • • "Active Neighbor" is a plain green pill — doesn't match brand
  • • Earned badges are contained in a white card with gray border
  • • Unearned badges at opacity-50 feel disabled, not aspirational
  • • No visual weight hierarchy — everything looks the same

Proposed Changes

  • • Stat cards: from-violet-50 to-pink-50 bg + gradient text on numbers
  • • Reputation row: warm gradient bg (violet→pink) behind icons
  • • Avatar: gradient ring (like agent) + score circle badge overlapping
  • • Score: SVG circle with gradient ring stroke (64px, same as agent trust)
  • • Progress bars: 8px, rounded, gradient fills
  • • "Active Neighbor" → gradient pill (white text on brand gradient)
  • • Score card: 4px gradient left border accent
  • • Earned badges: gradient left border + gradient icon background
  • • Unearned badges: dashed border (unlockable, not disabled)