As part of a high-fidelity user interface design assignment, my team and I designed a mobile travel app focused on enhancing the trip-planning and on-the-go exploration experience for users. The goal was to create an intuitive, visually consistent, and fully interactive prototype that aligned with user interface design best practices.
Project Scope
Theme Chosen: Interactive Map Guide
Platform: Mobile (375×812 px)
Tool Used: Figma
Link to Deliverable Below
All screens were built with real content and linked via Figma’s Prototype mode to demonstrate complete user flows with clear hierarchy, spacing, and accessibility considerations.
1. UI Style Sheet
Created a comprehensive design system featuring:
A cohesive color palette with HEX codes
A structured typography scale (H1–H5, body, captions)
Defined iconography style (stroke width, size, usage)
A 4-column mobile grid system and spacing logic
Core UI components such as buttons, input fields, cards, modals, and tab navigation
2. Interactive Components
Built reusable and stateful components using Figma Variants, including:
Button states (default, hover, pressed, disabled)
Icon buttons, toggles, filters, and form inputs
Components reused consistently across screens
3. High-Fidelity Prototype (15 Screens)
Designed a fully interactive user journey, including:
Onboarding + welcome screen
User login/sign-up
Main dashboard with an interactive map
Points of interest (POI) details and route suggestions
Profile and app settings
Success and error states