MapGo - Navigation and Location Discovery App Design
Guoshuai Zhang
MapGo — React Native Location & Navigation App
Short description
A modern React Native mobile map app for location search, route navigation, saved places, and GIS-style map layer controls.
Project overview
MapGo is a React Native location and navigation app designed to help users search places, explore nearby locations, save favorite spots, and navigate routes with a clean mobile experience.
The goal of this project was to create a polished mobile app concept that combines everyday navigation features with more advanced map-based functionality, such as smart filters, route options, place details, saved locations, and customizable map layers.
Unlike a simple map screen, MapGo is designed as a complete mobile location product. It focuses on fast search, easy navigation, clear information hierarchy, and a smooth user experience for people who need reliable location data on the go.
The problem
Most map and navigation apps can feel crowded, complex, or difficult to use when users only want to find a place quickly, check useful details, or choose the best route.
Users need a mobile experience that makes it easy to:
Find places and addresses quickly
Explore nearby restaurants, hotels, parks, shops, and attractions
View useful place information before visiting
Compare route options
Save favorite locations
Switch between map layers
Use the app comfortably in dark mode
The challenge was to design a map app that feels powerful but still simple and mobile-friendly.
The solution
I designed MapGo as a clean React Native mobile app that brings together search, navigation, place discovery, saved locations, and GIS-style layer controls in one smooth experience.
The interface uses a dark, modern visual style with high-contrast map elements, floating controls, rounded cards, clear icons, and bottom-sheet interactions. The goal was to make every screen feel practical, premium, and easy to understand.
MapGo helps users move from search to discovery to navigation without feeling lost inside the app.
Key features
Interactive map home
The main screen gives users a full map view with a floating search bar, current location marker, nearby place categories, map controls, and quick access to popular locations.
Smart search and filters
Users can search by place name, address, category, or nearby location. Filters allow them to narrow results by restaurants, hotels, parks, shopping, attractions, open-now places, top-rated places, and distance.
Route navigation
The navigation flow shows route options such as driving, walking, and cycling. Users can compare estimated time, distance, traffic conditions, and start turn-by-turn navigation.
Place detail screen
Each location has a detailed screen with photos, address, rating, opening status, distance, directions, save, share, and contact actions.
Saved places
Users can save favorite places and organize them into lists such as favorites, trips, recent places, or want-to-go locations.
Map layer controls
The app includes GIS-style map layer controls where users can switch between satellite, terrain, traffic, public transport, boundaries, and points of interest.
Dark mode interface
MapGo uses a premium dark-mode UI designed for map readability, comfortable mobile use, and a modern product feel.
Design direction
The design direction was inspired by premium navigation and mapping products, but with a cleaner and more specialized mobile interface.
The visual style uses:
Dark navy backgrounds
Blue and green accent colors
Glowing route lines
Rounded mobile cards
Floating search bars
Clear map markers
Bottom navigation
Bottom-sheet panels
Minimal icons
Large readable route information
High-contrast mobile layouts
The final look is modern, technical, and easy to use. It feels like a professional mobile app for real navigation, travel, location discovery, or GIS-based products.
My role
Product concept
Mobile app UI/UX design
React Native app planning
Map-based user flow design
Navigation experience design
Location search flow
Saved places experience
Map layer control design
Visual design system
Portfolio presentation design
Tools & technologies
React Native
TypeScript
Mapbox
React Navigation
PostgreSQL
PostGIS
Node.js
Firebase
Geolocation API
Push notifications
Figma-style mobile UI system
Screens designed
Main cover / project presentation
Map home screen
Search and filters screen
Route options screen
Turn-by-turn navigation screen
Trip summary screen
Place detail screen
Map layers screen
Saved places screen
Nearby places screen
User experience flow
The user opens MapGo and lands on a live map view. From there, they can search for a location, browse nearby categories, select a place, view details, save it, or start navigation.
For navigation, the user can compare route options, choose the best method, and follow a clean turn-by-turn direction screen.
For deeper map usage, the user can open map layers and customize what information appears on the map, such as traffic, terrain, satellite imagery, transport, or points of interest.
Result
The final project presents a complete React Native mobile app concept for location discovery and navigation.
MapGo shows how a map-based product can combine everyday navigation features with more advanced location intelligence and GIS-style controls. The design is clean, practical, and visually strong enough for a real mobile product, travel app, real estate app, venue navigation app, or field mapping tool.
This project demonstrates my ability to design mobile apps that require more than simple screens: interactive maps, route flows, search states, filters, saved data, and structured user journeys.
Like this project
Posted Jun 22, 2026
Designed React Native mobile navigation and location discovery app MapGo.
