📱 Project Overview
I designed a mobile-first solution for All American Diner to help employees easily clock in/out, track their work hours and tips, and view weekly schedules. At the same time, managers gained real-time oversight of shift coverage and team performance. The goal: streamline shift management, reduce confusion, and enhance team communication in a fast-paced restaurant environment.
💡 Problem & Goal
Problem: Paper schedules led to confusion, miscommunication, and no efficient way to track hours or tips.
Goal: Create a mobile app for employees and a desktop dashboard for supervisors to simplify scheduling, time tracking, and performance insights.
✏️ Design Process
1. Wireframes
Low-fidelity, black-and-white wireframes created in Figma to visualize user flow.
Mobile: Clock In/Out dashboard, weekly schedule view, time tracking overview.
Desktop: Supervisor dashboard showing up to 10 employees at a glance.
→ See Low-Fidelity and High-Fidelity Wireframes below.
2. High-Fidelity Mockups
Branded with the diner's signature red color palette and Material Design icons.
Employee Dashboard: Real-time clock, quick clock-in button, today's shift info.
Schedule View: Weekly shifts color-coded by role (booths, counter, tables).
Analytics View: Tip totals, hours worked, and performance KPIs.
→ See Low-Fidelity and high-fidelity wireframes below.
3. Supervisor Desktop View
Manager-focused layout designed for scheduling oversight.
Full team schedule for the upcoming week
Quick status views for clock-ins and coverage
Filter by role or time period for streamlined oversight
→ See Low-Fidelity and High-Fidelity Wireframes below.
⭐ Key Features
For Employees:
Clock in/out
Weekly schedule view
Tip logging
Performance tracking
For Supervisors:
View all staff schedules
Monitor attendance
Analyze team performance metrics
Tech Stack:
React 18
Tailwind CSS
Shadcn/UI
LocalStorage for session persistence
✅ Outcome
The app replaced messy paper schedules with a sleek, digital platform that boosted team punctuality, reduced confusion, and gave managers real-time insights—all in a branded interface tailored to the diner’s energetic workflow.
This application is still under development and refinement, with design enhancements and corrections ongoing to optimize performance and usability.
Initial Low-Fidelity Wireframes
Sign In screen
Dashboard-Home screen
Dashboard-Home Clocked In screen
Schedule screen
Time screen
Stats-screen
Team chat screen
My Profile screen
Money earn management screen
Hi Fidelity Supervisor Desktop App Screens:
Dashboard Desktop Supervisor Screen
Schedule Desktop Supervisor Screen
Time Tracking Desktop Supervisor Screen
Statistics Desktop Supervisor Screen
Team Chat Desktop Supervisor Screen
Employee Profiles Desktop Supervisor Screen
Technical Docs Desktop Supervisor Screen
Below Interactive Demo Desktop App: