School Bus Tracker UI
A comprehensive UI design project created during my 7th semester to learn website design and master Figma.
This design was created as part of my 7th-semester project work. The primary goal was to design an intuitive and user-friendly interface for tracking school buses, while simultaneously providing a hands-on learning experience to dive deep into website design principles and master Figma tools.
Learning & Execution
The core objective was to create a practical, user-centric dashboard layout that administrators and parents could easily navigate while allowing me to practice advanced Figma techniques.
Designing Complex
Dashboards
Dashboard interfaces require a lot of data visualization and structured information architectures. The challenge was keeping the design beautiful and uncluttered while ensuring that users can access vital tracking information at a glance.
Structured, Component-Based
Layouts
I utilized a robust component system and clear auto-layouts to segment different functionalities like tracking maps, schedules, and notifications. This structured approach streamlined the design and served as an excellent practical Figma exercise.
Exploration Process
Colors & Typography
Defined a trustworthy and engaging color palette, utilizing primary, secondary, and neutral tones. Established clear typographic hierarchy for optimal readability on dashboards.
Wireframing
Drafted initial layouts to map out core features like real-time tracking, student lists, and driver information before committing to high-fidelity designs.
UI Components
Designed foundational elements, ensuring consistency across buttons, cards, and input fields to simplify eventual development and maintain a cohesive look.
High-Fidelity Screens
Developed multiple full-screen dashboard interfaces targeting different user roles, such as school administrators and parents.
Design Elements & Mockups
The Result
This 7th-semester project proved to be an invaluable exercise in bridging design concepts with practical tools. I significantly accelerated my proficiency in Figma, specifically mastering auto-layouts, components, and creating structured, scalable web interface designs.