Augmented Reality AR Map Navigation Mobile App

Role: Lead UX/UI Designer
Platform: iOS Mobile Application
Client: UK-based startup entrepreneur
Year: 2017

AR Map App Overview

This mobile app integrated augmented reality (AR), map-based geolocation, and gamified discovery to help users navigate physical spaces and find nearby coupons. By leveraging camera overlays, live walking directions, and interactive AR markers, the app provided a playful, spatially aware experience grounded in real-world data - foreshadowing today’s AR and mapping innovations.

Search The star on map

Key Product Design Contributions

  • End-to-End Product Design Ownership: Drove the design process from concept to visual execution, working across UX research, information architecture, wireframing, prototyping, and UI design.
  • Mapping Interface Design: Built a 2D and AR-based map UI for navigating coupon hotspots, combining real-time geolocation with intuitive directional overlays.
  • Spatial Interaction Design: Created animated AR markers and navigation arrows, enabling a spatial understanding of where and how to move toward rewards.
  • Cross-Platform Design Thinking: Though the initial MVP was iOS-only, I structured the design system to be extensible to Android, web, and kiosk-based interfaces.
  • Prototype & Usability Testing: Delivered high-fidelity Figma prototypes, tested with real users to validate onboarding clarity, spatial orientation, and user flow logic.
  • Design System Foundation: Established scalable UI patterns (typography, color, iconography) aligned with Apple HIG, preparing for future multi-platform deployment.

Core User Flows Designed

  • Explore Map / Nearby Offers
  • AR Navigation with Real-World Overlays
  • 360° Location Preview with VR Mode
  • Coupon Redemption Flow with Wallet Integration
  • Push Notification Alerts on Location Entry
  • Gamified Reward Collection & User Progress
  • Onboarding for AR Guidance & Permissions
  • Visual design of ~50 unique screens, focused on clarity and playfulness
Onboarding screens

‍

Explore the coupons and get AR directions and marker

‍

The app include 360 videos and gamification that rewards the active users.

Tools & Technologies

  • Figma: UI design, prototyping, and design system setup
  • User Research: Onboarding feedback loops, in-app usability testing
  • ARKit (via dev collaboration): Defined UX for AR overlays & real-world markers
  • Agile Collaboration: Partnered with product owner and mobile dev
  • Prototyping for Native iOS: Screen transitions, gesture-based interactions

Mapping & Spatial Product Design

This case demonstrates:

  • Ways to simplify spatial tasks into intuitive interactions - whether through map views, camera overlays, or list-based browsing.
  • How AR and geolocation can enhance real-world exploration, offering users engaging, context-aware experiences.
  • The value of tight collaboration across design, engineering, and product to bring ambitious ideas into practical, shippable tools.
  • An emphasis on thoughtful navigation logic, clear overlays, and seamless transitions between spatial modes - essential elements in location-based products.

This iOS application combined augmented reality (AR), geolocation, and gamified search to help users discover coupon offers around them using real-world navigation. It showcased interactive maps, walking directions, and on-site rewards through AR experiences - aligning closely with emerging use cases in Maps and AR/VR.

‍

‍