← Back to all projects
🏫 AI · Security · Kiosk Design

Face Recognition
Gate System

A smart school entry system that uses facial recognition to identify students, log their attendance, and display everything clearly — even in harsh outdoor sunlight.

My role
UX/UI Designer
Platform
TV Panel + PC Dashboard
Users
Students, Guards & Admin
Status
Shipped ✓
6
Distinct screen states designed for the student flow
2
Separate interfaces — TV panel + PC dashboard
☀️
Optimized for outdoor daylight readability
✓
Shipped to real schools
The problem
The tech worked. The design didn't. 😅

The face recognition technology was already built and functional. But the screen showing it to students? Completely bare bones — raw data on a screen, no personality, no guidance, and impossible to read when sunlight hit it directly.

🌞
Sunlight was the enemy
The TV panel sits outdoors at the school gate. Direct sunlight washed out low-contrast text and colors, making the screen unreadable for students trying to check in every morning.
🤷
No visual feedback
Students stood at the gate not knowing if the system was detecting them, scanning them, or had already approved them. It just silently did things with no communication at all.
🎨
Zero design, zero engagement
The original interface was purely functional — just raw data on a plain screen. It didn't feel like a real school product. It felt like a prototype left running in production.
👮
Guards had no control panel
When a student had trouble getting through, the security guard had no clear interface to help them. No easy way to see what went wrong or manually approve entry.
The design question
What were we trying to solve? 🎯

💬 "How might we improve the readability and clarity of the face recognition system under real-world outdoor conditions — so that every student can pass through the gate quickly, confidently, and without confusion?"

Two screens, two audiences
One system. Two very different needs. 📺🖥️

This project required designing two completely separate interfaces that had to work together — one for students at the gate, one for staff at a desk.

📺 TV Panel (Student-facing)
Mounted outdoors at the school gate. Students walk up, face the camera, and the screen walks them through the process — no buttons, no touching, just look and go.
  • Idle state with live classroom photo and clock
  • Clear step-by-step stages with large, readable text
  • High contrast colors built for outdoor sunlight
  • Big status messages: Face Detected → Scanning → Match Found → Access Granted
  • Student info on success: name, grade, section, entry time
  • Recent log of students who entered
🖥️ PC Panel (Admin / Guard Dashboard)
Used by the security guard or school admin to monitor who's entering and manually assist students who have trouble getting through.
  • Sidebar navigation: Timesheets, Students, Teachers, Settings
  • Live attendance timesheet with Time In and Time Out
  • Student ID, name, and entry records visible at a glance
  • Admin can intervene and approve manual entry if needed
  • Clean, calm design — easy to monitor for an entire school day
The student flow
What a student sees, step by step. 🚶

I designed each stage of the recognition process as a distinct screen state — so students always know exactly where they are and what to do next.

🖼️
Idle
School photo + live clock
👁️
Face Detected
Stand on floor marker
📷
Align Face
Look at the camera
🔍
Scanning
Please hold still
✅
Match Found
Face recognized
🚪
Access Granted
Please proceed
My process
A sprint-inspired approach. 🏃
1
Discover
Collected stakeholder & CEO feedback on issues
2
Define
Mapped environmental constraints (lighting, distance)
3
Research
Studied kiosk & public-display design best practices
4
Design
High-contrast UI, large type, clear states in Figma
5
Review
Admin and security operator feedback session
6
Ship
Deployed to real school gates
Key design decisions
How I solved the hard parts. 🧩
☀️
High contrast for sunlight
I used a light background with bold, dark text — the opposite of what you'd normally choose for a "techy" screen. In direct sunlight, dark-on-light is far more readable than light-on-dark glowing interfaces.
🔤
Giant status text
The main status message (like "Access Granted") is huge — readable from a distance without squinting. Color also reinforces the meaning: orange for action, blue for scanning, green for success.
📍
Progress steps at the top
Four step icons at the top show which stage the system is at — like a tiny progress bar. Students immediately understand the system is working, not broken.
🧑‍💼
Student info on success
Once matched, the screen shows the student's profile photo, name, grade, and section. It's a quick visual confirmation — for the student and for the security guard watching nearby.
The design
All the screens. 🖼️

Every screen state designed, from the idle classroom photo all the way through to access granted and the admin dashboard.

TV Panel — idle & face detection states

Idle Screen
Idle state · School photo + live clock
Face Detected
Face detected · Stand on marker, look at camera

TV Panel — scanning & recognition

Align Face
Align your face · Look at the camera
Scanning
Scanning · Please hold still

TV Panel — match found & access granted

Match Found
Match found · Face successfully recognized
Access Granted
Access granted · Please proceed, next student

TV Panel — student info display

Student Info
Student info · Name, grade, section, entry time + recent log of other students

PC Panel — admin / guard dashboard

Admin Dashboard
Admin dashboard · Timesheets with Time In / Time Out for all students
How we validated the design
How did we know it actually worked? 🧪
🌞
Environmental Usability Evaluation
I assessed the design under simulated outdoor lighting conditions — evaluating contrast ratios, text size, and color choices specifically for a screen exposed to direct sunlight. This shaped every major visual decision in the TV panel design.
📋
Heuristic Evaluation
I evaluated each screen state against Nielsen's heuristics — particularly visibility of system status, error recognition, and match between system and real world. The progress steps at the top came directly from this evaluation.
👮
Stakeholder Review — Admin & Security Operators
The admin dashboard and TV panel were reviewed with the internal team and security operator input. Feedback confirmed that the status indicators were immediately understood and that the dashboard gave guards the information they needed at a glance.
The outcome
From bare bones to a real product. ✨
6
Distinct screen states designed for the student flow
2
Separate interfaces — TV panel + PC dashboard
0
Confusion about whether the system was working — status is always visible

🏫 The real win: Students now walk up to the gate, look at the camera, and know exactly what's happening every step of the way. The security guard has a clear dashboard. The whole process feels fast, professional, and trustworthy — not like a technical prototype.

What's next
Where do we go from here? 🚀

📌 Recommended: On-site Contextual Inquiry during peak hours. The next step is observing students using the gate system in real time — during the morning rush when hundreds of students are arriving at once. This will reveal any friction points that only appear under real-world pressure that our design review couldn't simulate.

What I learned
Lessons from this project. 📚
🌍
Environment shapes design more than anything
Designing for a TV in direct sunlight is completely different from designing for a phone or laptop. The physical space where a product lives should drive every design decision from the very start.
⏳
Feedback during waiting is essential
People become anxious when they don't know if a system is working. Clear progress indicators and status messages completely removed the "is this broken?" moment at the gate.
🤝
Design for everyone in the loop
Students weren't the only users. The security guard needed to understand what was happening too. I made sure the TV panel was readable for nearby observers, not just the person scanning their face.
Keep exploring
See more work.
🎓
SilidLMS
A full redesign of a learning management system
📱
School Mobile App
Schedules, attendance & digital re-enrollment on mobile