Klockin is a facial-recognition attendance system I designed at Metafusion. Using existing video analytics tech, originally built for surveillance and ANPR, to solve attendance tracking for institutions and enterprises using CCTV already in place, no new hardware required.
PROJECT OVERVIEW
Klockin is a facial-recognition-based attendance system I designed at Metafusion, where I was the Founding Product and Visual Designer. It uses Metafusion's existing video analytics and facial recognition technology, originally built for surveillance and ANPR, to solve attendance tracking for educational institutions and enterprises, without any new hardware installation.
I identified the opportunity independently, built out the full product vision (case studies, wireframes, and role architecture) and pitched it directly to the founders. It went on to close 5 clients, including IKEA, BITS Institute, and Smartwork, before development had even begun. I then led the 2-week sprint to deliver a shippable MVP with a team of 3 under me, handing off complete documentation to engineering. The product launched under the name Klockin and shipped within a month of handoff.
Problem
At my own college, attendance was taken by hand in classes of 100+ students, eating 10–20 minutes of lecture time and leaving room for proxy check-ins. In India, falling below the attendance threshold disqualifies a student from sitting final exams, so this wasn't a minor annoyance. Existing fixes like fingerprint or dedicated face-capture hardware needed installation in every room, still created bottlenecks, and for enterprises, attendance errors fed straight into payroll and performance data. The opening: institutions already have CCTV everywhere. No new hardware needed.
Mission
Make attendance invisible: no queues, no manual roll call, no proxy check-ins, no new hardware. Just accurate data running quietly in the background. And because that data decided exam eligibility and fed payroll and performance reviews, the mission also meant earning trust in it, ensuring the right people could see and control the right data at every level.
Solution
Instead of tracking everyone continuously, which breaks down in a 400-student hall, Klockin recognizes faces at entry and exit points, calculating attendance as cumulative time against a set threshold rather than a single check-in. Every edge case, students stepping out and back in, overlapping sessions, mid-session faculty changes, was mapped and solved before any screens were designed. I also built a 5-tier role hierarchy (Standard User, Moderator, Admin, Super Admin, internal override) to keep sensitive data scoped to the right people, with data stored locally and synced when connectivity allowed. The MVP that shipped scoped this to End User and Admin roles, delivered in a 2-week sprint, with the rest phased in as real usage data came in.
USER RESEARCH
Attendance friction showed up differently depending on where you sat in the system, so research focused on four groups directly affected by it, from the person marking present to the person relying on that data months later for payroll or academic eligibility.
COLOR PALETTE
The logo can be used in different variations basis on where the logo is being placed. The main Logo mark represents the true brand & should be used on areas of branding.The other variations of logo can be created for App icon or graphics to evoke bold, playful, and authentic sense.
HEX: #66B037
RGB: (241, 46, 228)
CMYK: 0%, 81%, 5%, 5%
Primary Color
HEX: #FFC300
RGB: (255, 195, 0)
CMYK: 0%, 24%, 100%, 0%
Primary Color
HEX: #0E262A
RGB: (107, 0, 199)
CMYK: 46%, 100%, 0%, 22%
Complementary Color
81% of users prefer an all-in-one platform that combines attendance, performance report, and payroll
TYPOGRAPHY
SF Pro was selected to support Klockin's structured, no-nonsense B2B identity. Its geometric letterforms and consistent stroke weights bring a sense of precision and reliability to the interface, qualities that matter when the product is handling data enterprise and institutional decision-makers stake real business processes on. Designed to appeal to a professional, efficiency-driven audience rather than a consumer one, the typeface prioritizes function over flair without feeling cold or impersonal. Its range of weights establishes clear visual hierarchy across dense dashboards, data tables, and admin panels, keeping information scannable at a glance while reinforcing the brand's trustworthy, enterprise-ready personality.
Heading is Bold
Subheading is Regular
Body is Light. Lorem ipsum dolor sit amet consectetur. Tellus lacus lectus elementum quis condimentum elit. Vitae mi iaculis a ac morbi consequat egestas adipiscing vitae. Mauris gravida mauris sit elementum tincidunt eget praesent. Eget accumsan risus lorem lectus sapien ut arcu quis. Ipsum dui amet id mi.
Heading is Light
Subheading is Regular
Body is Regular. Lorem ipsum dolor sit amet consectetur. Tellus lacus lectus elementum quis condimentum elit. Vitae mi iaculis a ac morbi consequat egestas adipiscing vitae. Mauris gravida mauris sit elementum tincidunt eget praesent. Eget accumsan risus lorem lectus sapien ut arcu quis. Ipsum dui amet id mi.
Heading is Light
Body is Regular. Lorem ipsum dolor sit amet consectetur. Tellus lacus lectus elementum quis condimentum elit. Vitae mi iaculis a ac morbi consequat egestas adipiscing vitae. Mauris gravida mauris sit elementum tincidunt eget praesent. Eget accumsan risus lorem lectus sapien ut arcu quis. Ipsum dui amet id mi.
Heading is Bold
Body is Regular. Lorem ipsum dolor sit amet consectetur. Tellus lacus lectus elementum quis condimentum elit. Vitae mi iaculis a ac morbi consequat egestas adipiscing vitae. Mauris gravida mauris sit elementum tincidunt eget praesent. Eget accumsan risus lorem lectus sapien ut arcu quis. Ipsum dui amet id mi.
Dashboard
Clean & Modern
keep track of your attendance on the go
keep track of your attendance on the go
CHARACTER SYSTEM
To extend the brand beyond the interface, we developed a diverse cast of stylized 3D characters that brought personality and storytelling into the Bingo Champions experience. Each character was designed with a distinct appearance, expression, and visual identity while following a consistent art direction to ensure cohesion across the product.
The character system was used throughout gameplay, marketing campaigns, social media, tutorials, promotional events, and seasonal content, creating a more engaging and memorable brand experience.
Character Style
The characters follow a stylized 3D illustration style that combines expressive facial features, soft proportions, and premium rendering. Rounded forms, vibrant colors, and detailed lighting create a friendly, approachable look that complements the playful nature of the game while maintaining a polished, modern aesthetic.
This variety made the world of Bingo Champions feel more inclusive and relatable while giving the brand a richer visual identity.
Design Principle
Stylized 3D
Semi-Realistic
Rounded Forms
Bold Silhouettes
Expressive Faces
Dynamic Poses
Vibrant Colors
Soft Lighting
Rich Materials
Clean Detailing
Intuitive results
tracking
