Trip Planner: Gothenburg, Sweden

Dates: Jul. 2025 - Aug. 2025

Role: Designer & Developer

Project Supervisor: Licia Bailey

Tech Stack: HTML, CSS, JavaScript, jQuery / jQuery UI, Leaflet, Magnific Popup, Open-Meteo API, Google Fonts, Visual Studio Code, GitHub

Design Tools: Figma, Photoshop, TouchDesigner

Click here to visit the website

Project Overview

This project is a single-page trip planner designed for a four-day visit to Gothenburg, Sweden. This tool was built to feel calm, quick, and useful during an actual city break; the key elements being "lean + functional". The site pairs an itinerary using jQuery UI tabs with a content area, a lightbox photo gallery, an interactive Leaflet map, a weather widget pulling real-time data from Open-Meteo, and a set of "trip tools" that save to the browser via Web Storage. Each element supports the goal of reducing decision friction and presenting only what travelers need in the moment.

Contextual Grounding🡢

What the Project Is: The trip planner is a structured travel companion built as a demonstration of modern front-end fundamentals. It blends interactive components, API-driven data, persistent local features, and a minimalist interface to showcase the city's neighborhoods, tram lines, galleries, museums, and archipelago routes.

Conceptual Foundation:

This project is rooted in the idea of designing for calm. Borrowing from UX minimalism, information clarity, and travel planning patterns that reduce cognitive load.

Audience & Practice Demonstration:

The planner was built for visitors who want enough structure to move confidently but not so much that the experience becomes rigid.

Phase 1 Research & Concept Development🡢

Initial Research & Discovery

  • Mapped a realistic four-day arc through Gothenburg: Haga Nygata, Magasinsgatan, Korsvägen museums, an archipelago day from Saltholmen, and a wrap-up near Liseberg.
  • Collected visual references for trams, districts, ferry routes, cafés, and public squares.
  • Identified essential trip-planning features: itinerary, maps, weather, photos, and tools.

Concept Formation

  • Established the planner as a real-time, in-the-moment tool, rather than a long-form guide.
  • Prioritized features travelers actually check frequently: routes, weather, costs, packing, favorites.
  • Chose a simple tab pattern with a restrained palette to keep focus on content.

Goals & Constraints

Goals:

  • Build a quick, frictionless planning tool.
  • Demonstrate jQuery widgets, AJAX calls, plugin integration, and Web Storage.
  • Create a visually quiet interface optimized for travel use.

Constraints:

  • Plugin load order via CDNs
  • Weather API CORS behavior
  • LocalStorage parsing for Trip Tools
  • Single-page scope (no backend)

Phase 2 Planning & Design🡢

Wireframes, Sitemaps & Layout Decisions

  • Wireframe Development: Using Figma, sketched a low-fidelity 1280px container with a sticky nav and left-tabs/right-content structure.
  • Designed a hero banner with immediate context and a simple call to action using Photoshop.
  • Structured "trip tools" (Budget, Packing, Favorites) as sections anchored by localStorage.

Style Guide, Typography & Color Systems

  • Type: Archivo Black (headings), Space Mono (body)
  • Palette: Ink (#1c2024) on off-white (#f8f8f8)
  • UI Language: Subtle borders, chips, small icons, minimal shadows
  • Motion: Smooth transitions on tabs, gallery fades, map marker hover states

Accessibility Decisions

  • Semantic <main>, <nav>, <section>, and <article> regions
  • ARIA labels on map controls and tab widgets
  • Keyboard navigation enabled for the lightbox
  • Alt text for all imagery

Technical Planning & Architecture

  • jQuery UI Tabs: For itinerary navigation with hash-based deep linking
  • Magnific Popup: For the photo gallery
  • Leaflet + OSM: For map tiles, custom divIcons for district and island markers
  • Open-Meteo: For daily forecast (August 2025 data) and fallback logic
  • LocalStorage: For persistent trip data
  • Deferred scripts: To ensure plugin order and stable initialization

Phase 3 Prototyping & Development🡢

Code Implementation

  • Separated HTML/CSS/JS into external files for clarity and maintainability using VS Code.
  • Loaded plugins with defer and added a fallback retry for the lightbox
  • Implemented defensive parsing and default resets for stored data
  • Structured the itinerary tabs to read like a checklist using jQuery UI tabs.

Interaction Logic

  • Tab system that syncs with hash fragments
  • Lightbox gallery supporting keyboard navigation
  • Weather widget with °C/°F toggle and persistent unit preference
  • Favorites list with add/remove actions wired through data attributes

Animation, Graphics & Motion Exploration

  • Full-bleed hero banner
  • Subtle gallery fades and zoom states
  • Map markers styled for legibility and contrast

Components Built & Media Created

  • Hero video on TouchDesigner
  • Four-day itinerary (tabs + content)
  • Weather card layout
  • Photo gallery with responsive grid
  • Interactive map with custom pins
  • Trip Tools (Budget, Packing, Favorites)

Phase 4 Testing, Iteration & Refinement🡢

User Testing & Feedback

  • Simplified the packing list interactions after early testers found the delete feature unclear
  • Enhanced chip system to make tram lines and stops more scannable
  • Adjusted map markers for improved contrast on island pins

Code Refactoring

  • Cleaned plugin initialization order for Magnific Popup
  • Resolved a remove-item quirk by swapping to data-action="remove"
  • Conducted an accessibility pass with axe to refine button states and ARIA roles

Visual Polish

  • Refined spacing across the itinerary and map blocks
  • Improved gallery grid ratios for better cropping
  • Tuned border radii, shadows, and chip padding for consistency

Phase 5 Final Output🡢

Final Deliverable Details

  • Format: Single-page interactive trip planner website
  • Core Features: Itinerary tabs, photo lightbox, interactive map, weather forecast, "trip tools" sections with saved data
  • Responsive: Optimized for laptop use during travel (1280px width)

Features Completed

  • Fully interactive four-day itinerary
  • Lightweight Leaflet map with clear city/island pins
  • API-driven weather widget
  • Persistent trip utilities (budget, packing, favorites)
  • Minimal, calm design system

Product Delivered

The final site feels fast, practical, and quiet, something I would genuinely open during a trip. It turns a large amount of travel fuzz into a set of small, decisive components that help visitors move confidently during travel.

Reflection & Future Plans🡢

What I Learned

  • Web Fundamentals: Strengthened my grasp of web fundamentals (HTML/CSS/JS/jQuery)
  • Plugin Integration: Gained confidence in handling plugins, API calls, and Web Storage
  • UI Design: Developed intuition around layout, spacing, and scannability in UI

Challenges & Breakthroughs

Challenges:

  • Managing CDN order and plugin bindings
  • Handling CORS behavior from the weather API
  • Debugging favorites list edge cases
  • Designing a calm layout without losing hierarchy

Breakthroughs:

  • Stable late-binding approach for the lightbox
  • Clear, chip-based navigation patterns
  • A resilient weather-fetch strategy

Future Plans

Features to Add or Extend:

  • Add live ferry times from Västtrafik
  • Implement export options (PDF, iCal)
  • Develop dark mode + expand accessibility settings
  • Explore migrating the entire project to a framework like React or Svelte using TypeScript

Summary🡢

The Gothenburg Trip Planner is a purposeful, well-structured single-page travel companion designed around clarity and ease of use. It blends maps, galleries, weather data, and persistent tools into a calm, functional layout and demonstrates my ability to build accessible, API-driven, modular front-end experiences. Refactoring the project into TypeScript further elevated the codebase and expanded my capabilities as a new front-end developer.