Skip to main content
← Back to Portfolio Mobile App

Dental City — Clinic Attendance App

An Android app for clinic staff: sign in with a work PIN, check in and out against your branch on the map, and confirm the moment with on-device face recognition.

Mobile App Android UI/UX Design Kotlin Firebase Face Recognition

Client

Dental City

Year

2022

Role

Android engineering & UI design

Duration

2022

Dental City — Clinic Attendance App
Screenshot from Dental City — Clinic Attendance App

The Challenge

Attendance at a multi-branch clinic is a physical, location-bound task. Staff check in at the reception they actually work at, not at a central office, so any system that only knows a timesheet will be wrong at least once a day. The clinic needed check-in bound to a branch, to a position on the map, and to the person - without turning every shift into paperwork.

The Approach

We split the app into a small set of screens that each answer one question: who am I, where am I, and am I here. Sign-in uses a work email and a PIN. The home screen shows the branch, arrival and departure times, employee ID, and the check-in and check-out actions side by side. Check-in opens a map pinned to the branch so the staff member can confirm the position, and face recognition is offered as a second confirmation when the location fix is unreliable. Training and exception requests were built into the same flow instead of being handed off as separate admin tasks.

What Was Built

13 · 6 with screenshots

Screenshot from the running project.

Dental City — Clinic Attendance App — Splash & First Run
01

Splash & First Run

The app opens on the Dental City mark and hands over to the first-run flow. Branch, account, and language are settled before anyone is asked for a PIN.

Screenshot from the running project
Dental City — Clinic Attendance App — Employee Sign-in with Work PIN
02

Employee Sign-in with Work PIN

Staff sign in with their work email and a PIN instead of a long password. That account is the key to everything else: it decides the branch, the language, and what the employee is allowed to check in for.

Screenshot from the running project
Dental City — Clinic Attendance App — Indonesian / English Language Switch
03

Indonesian / English Language Switch

Every screen carries a language toggle, and the choice is remembered on the device. Switching to English turns the Indonesian labels into Log In, Your PIN, and Forgot PIN? without reloading the screen or re-entering anything.

Screenshot from the running project
Dental City — Clinic Attendance App — Branch Dashboard with Check In / Out
04

Branch Dashboard with Check In / Out

The home screen is the shift in one view: branch, arrival and departure times, employee ID, and the two actions that matter. Check In and Check Out sit side by side so the daily rhythm is one thumb away, with a map of the branch and a shortcut to the employee profile.

Screenshot from the running project
Dental City — Clinic Attendance App — Employee Profile & Branch Binding
05

Employee Profile & Branch Binding

The profile screen shows the data that arrives with the account - employee ID, name, and address - together with the branch the account is currently bound to. That binding is what makes a multi-branch deployment work: one app, one sign-in, different clinics.

Screenshot from the running project
Dental City — Clinic Attendance App — Guarded Sign-out
06

Guarded Sign-out

Leaving the app asks for confirmation before the session is cleared, because a shift signed out by accident still has to be corrected by hand the next morning.

Screenshot from the running project

Also built

7

On-device Face Recognition

Attendance can be confirmed with a face check instead of a tap alone. The app registers training photos once, then matches a live capture against them before the attendance is saved - a second factor that does not depend on the network being fast.

eKYC Verification: ID Card + Selfie

Identity is checked with two images: a photo of the ID card and a selfie. Both are captured in the app and uploaded as multipart data, so onboarding no longer depends on someone photographing a document with a different phone.

Location Training & Branch Search

A staff member trains the location of their branch - up to four reference captures - so a check-in can be verified against a known point instead of a loose GPS fix. Branches are also searchable when switching sites.

Map-based Check-in

The check-in screen shows a live map centred on the branch, with the staff member's position tracked and refreshed every second. It answers the only question that matters at a reception desk: is this person at the right clinic right now.

Attendance History

Every past check-in is kept as a list that can be filtered and read back, so a month of shifts is available on the device instead of only in a central report.

Exception Request

When a shift cannot be closed normally - a forgotten check-out, a branch without signal - the employee raises an exception from the app, with a top-up path for the linked balance when the correction needs funds.

Push Notifications & Resumable Upload

The app holds a Firebase Cloud Messaging token and can receive pushes. Uploads use a multipart body with progress reporting, so a photo taken without signal can still be sent once the connection returns.

Tech Stack

Kotlin MVVM Retrofit OkHttp Gson Google Maps Firebase Cloud Messaging Firebase ML Vision ZXing Glide SharedPreferences

The Outcome

Attendance became a two-tap action instead of a paper trail, and each branch's records stayed separated automatically instead of by hand. The app also inherited a hardened network layer and a working release pipeline from the payment codebase it grew out of, which is why it could ship as a signed release APK rather than a sideloaded build.

About This Project

Dental City is a multi-branch clinic network, and attendance was still running on paper forms and chat groups. Every branch kept its own routine, and nobody could tell at a glance who was on duty at which location.

The app puts that routine on the phone: sign in with a work account, see your branch and the time you arrived, then check in from a map pinned to the clinic. Where GPS alone is not trusted, a photo of your face is matched against the training data you registered once, so the attendance record carries more than a timestamp.

It was built on top of a white-label mobile payment codebase, so the parts that usually take months - secure session handling, camera capture, upload pipelines, barcode scanning, push delivery - were already in place. What was written for the clinic is the layer above it: the attendance flow, the branch switcher, location training, exception requests, and bilingual copy throughout.

The interface is deliberately plain. Yellow is the clinic's own colour, the type is large enough to read at arm's length in a busy reception, and every screen works one-handed. Indonesian is the default and English is a single tap away for staff who need it.