Ahmed ElkomyTPM · the seam
↑ Index · Work

CityGuide - Smart Listing Directory & Marketplace

Full-stack city guide platform with business directory, integrated booking system, marketplace, interactive maps, reviews, and multi-language support built with WordPress and Bootstrap.

Year2022
WireframeShipped
Drag the seam · wireframe ↔ shippeddesigned and built by one person
FIG.Measured Render
CityGuide - Smart Listing Directory & Marketplace, measured
The UI, measured. The shipped screen, drawn to its own griddesigned and built by one person

A measured render: the same screen you ship, drawn as a technical drawing. Every number is a constraint someone has to hold. That is why a simple screen is so hard to build.

CityGuide represents a comprehensive digital platform that transforms how people discover, explore, and engage with local businesses and services. As the lead UX/UI designer and front-end developer, I created an intuitive ecosystem that seamlessly integrates directory listings, booking functionality, and marketplace features into a unified user experience. CityGuide Platform Overview Comprehensive platform interface showcasing directory listings, search functionality, and user-friendly navigation

Project Overview

This platform addresses the growing need for a centralized, user-friendly solution that connects locals and tourists with businesses, services, and experiences in their city. The challenge was designing an interface that could handle complex functionality while maintaining simplicity and accessibility for diverse user groups. Key Features:
  • Comprehensive business directory with advanced filtering
  • Integrated booking system for services and experiences
  • Marketplace functionality for local products and services
  • Interactive maps and location-based recommendations
  • User reviews and rating system
  • Multi-language support for international visitors
Advanced Search & Filtering Advanced search and filtering system with intuitive category selection and location-based results

Design Philosophy

The design approach focused on creating a clean, modern interface that prioritizes user journey and information hierarchy. I employed a mobile-first design strategy, ensuring optimal performance across all devices while maintaining visual consistency and brand identity. Core Design Principles:
  • Intuitive Navigation: Clear information architecture with logical user flows
  • Visual Hierarchy: Strategic use of typography and spacing to guide user attention
  • Accessibility First: WCAG compliant design ensuring inclusive user experience
  • Performance Optimized: Lightweight design elements for fast loading times

Technical Implementation

Frontend Technologies:
  • WordPress CMS for content management and backend functionality
  • Bootstrap framework for responsive grid system and UI components
  • Vanilla JavaScript for custom interactive features and functionality
  • jQuery for DOM manipulation and AJAX requests
  • Custom CSS for brand-specific styling and animations
Key Features Developed:
  • Dynamic search and filtering system with AJAX-powered real-time results
  • Interactive map integration using Google Maps API with custom markers
  • Responsive booking calendar with jQuery-based availability management
  • WordPress user authentication and custom profile management
  • Advanced image gallery with jQuery lightbox and lazy loading optimization
Interactive Map Integration Interactive map with custom markers, clustering, and location-based business discovery

WordPress & jQuery Implementation

The platform leverages WordPress's flexibility as a content management system while extending its capabilities through custom development: WordPress Customization:
  • Custom post types for businesses, services, and marketplace items
  • Advanced Custom Fields (ACF) for structured content management
  • Custom taxonomy system for categories and location hierarchies
  • WordPress REST API integration for AJAX-powered search functionality
jQuery & JavaScript Features:
  • Real-time search with debounced AJAX requests for optimal performance
  • Interactive filtering system using jQuery event handlers
  • Custom booking calendar built with vanilla JavaScript and jQuery UI
  • Dynamic content loading with jQuery's AJAX methods
  • Form validation and submission handling with custom JavaScript
Bootstrap Integration:
  • Responsive grid system ensuring mobile-first design approach
  • Custom Bootstrap theme with brand-specific color schemes
  • Modal components for booking forms and image galleries
  • Responsive navigation with Bootstrap's collapse functionality

User Experience Design

The UX design process involved extensive user research, persona development, and iterative testing to ensure the platform met real user needs. I conducted user interviews with both business owners and consumers to understand pain points in existing city guide solutions. UX Improvements Delivered:
  • Reduced search-to-booking time through streamlined user flows
  • Increased user engagement with personalized recommendations
  • Improved accessibility with semantic HTML and ARIA implementation
  • Strengthened mobile conversion through Bootstrap responsive optimization

Marketplace Integration

The marketplace component required careful consideration of user trust, transaction security, and vendor management. I designed a system that balances ease of use with comprehensive functionality. Marketplace Features:
  • Vendor dashboard for inventory and order management
  • Secure payment processing with multiple gateway options
  • Review and rating system with verified purchase badges
  • Advanced product categorization and search functionality
  • Automated notification system for orders and updates
Marketplace & Vendor Dashboard Comprehensive marketplace interface with vendor management and product showcase

Booking System Design

The booking functionality needed to accommodate various business types, from restaurants to tour operators, each with unique scheduling requirements and booking policies. Booking System Highlights:
  • Flexible scheduling system supporting multiple booking types
  • Real-time availability checking with conflict prevention
  • Automated confirmation and reminder system
  • Integration with popular calendar applications
  • Cancellation and refund management workflow
Booking System Interface Intuitive booking system with calendar integration and real-time availability checking

Impact & Results

The CityGuide platform successfully launched and demonstrated significant impact on local business discovery and user engagement: Outcomes:
  • Significant growth in local business inquiries after launch
  • 280,000+ active users across multiple city deployments
  • Strong user satisfaction based on post-interaction surveys
  • Lower bounce rate compared to previous directory solutions
  • Higher booking-completion rates through optimized UX flows

Responsive Design Excellence

The platform's responsive design ensures consistent functionality across all devices, with particular attention to mobile optimization given the location-based nature of the service. Cross-Platform Performance:
  • Mobile-first design approach using Bootstrap's responsive grid system
  • Touch-optimized interactions implemented with custom JavaScript
  • Consistent visual hierarchy across all screen sizes using Bootstrap components
  • Optimized loading performance with jQuery lazy loading and image compression

Future Enhancements

Based on user feedback and analytics insights, several enhancement opportunities were identified:
  • AI-powered recommendation engine for personalized suggestions
  • Augmented reality features for location-based information overlay
  • Integration with social media platforms for enhanced sharing
  • Advanced analytics dashboard for business owners
  • Multi-city expansion with localized content management

Lessons Learned

This project reinforced the importance of user-centered design in complex platforms. The success came from balancing feature richness with interface simplicity, ensuring that advanced functionality never compromised user experience. Key Takeaways:
  • WordPress provides excellent content management flexibility for directory platforms
  • Bootstrap's responsive framework accelerates mobile-first development
  • jQuery's simplicity enables rapid prototyping of interactive features
  • Vanilla JavaScript offers performance benefits for custom functionality
  • Progressive enhancement ensures compatibility across diverse devices
The CityGuide project demonstrates how traditional web technologies like WordPress, Bootstrap, and jQuery can be leveraged to create sophisticated, user-friendly platforms that deliver real business value in the local discovery ecosystem.