ESOO PARK

Intro

This Adventure app makes exploring easy

with custom maps, AR, and a community of explorers.

This Adventure app makes exploring easy with custom maps, AR, and a community of explorers.

UI, Design System, Prototyping

About

Duration

14 weeks
Jan 2024 - Apr 2024

Team

Esoo Park
Product Designer

Tool

Figma, Adobe Creative Suite

Protopie, Midjourney

Problem

Limited Personalization in Exploration

Traditional map apps lack personalization and interactive features, making it difficult to discover unique

places, receive tailored recommendations, and share experiences meaningfully.

Traditional map apps lack personalization and interactive features, making it difficult to discover unique places, receive tailored recommendations, and share experiences meaningfully.

Solution

An Immersive and Personalized Adventure App

This Adventure app provides custom maps, AR-powered navigation, and a connected community, making exploration more engaging, personalized, and easy to share.

This Adventure app provides custom maps, AR-powered navigation, and a connected community, making exploration more engaging, personalized, and

easy to share.

Interface
Analysis

Interface Analysis

Explore Location

Presents a seamless and visually engaging experience for users looking to discover

new travel destinations

Presents a seamless and visually engaging experience for users looking to discover new travel destinations

Home Screen

Displays a list of popular adventure locations with a cover image, location tag, and title
Navigation bar at the bottom allows users to switch between "Explore," "Community," "My Map," "Search," and "Settings."

Displays a list of popular adventure locations with a cover image, location tag, and title.
Navigation bar at the bottom allows users to switch between "Explore," "Community," "My Map," "Search," and "Settings."

Displays a list of popular adventure locations with a cover image, location tag, and title.
Navigation bar at the bottom allows users to switch between "Explore," "Community," "My Map," "Search," and "Settings."

Destination Cards (Location Cards)

Destination Cards
(Location Cards)

Showcases large, immersive images of featured locations.
High contrast between text and background ensures readability.

Showcases large, immersive images of featured locations.
High contrast between text and background ensures readability.

Showcases large, immersive images of featured locations.

High contrast between text and background ensures readability.

Interface
Analysis

Interface Analysis

Detail Page of Location

Presents a structured and visually immersive layout, making it easy for users to explore and decide

on their journey.

Presents a structured and visually immersive layout, making it easy for users to explore and decide on their journey.

Hover & Information Overlay

A large, immersive background image gives users a feel of the adventure.
Difficulty Label ("Challenging Trek") – A clear difficulty rating helps users gauge the experience.
Elevation Data (14,411 ft) – Key stats provide essential hiking/climbing information.

A large, immersive background image gives users a feel of the adventure.
Difficulty Label ("Challenging Trek") – A clear difficulty rating helps users gauge the experience.
Elevation Data (14,411 ft) – Key stats provide essential hiking/climbing information.

Call-to-Action (CTA) Buttons

"Explore" Button (Bright Green): Encourages users to start their adventure.
Alternative Action ("No, I need direction") – Suggests a different user journey, possibly linking to a navigation feature.

"Explore" Button (Bright Green): Encourages users to start their adventure.
Alternative Action ("No, I need direction") – Suggests a different user journey, possibly linking to a navigation feature.

Interface
Analysis

Interface Analysis

Interactive Adventure Map

This Interactive Adventure Map UI allows users to drop a pin at a specific location within a mountain

and discover nearby activities.

This Interactive Adventure Map UI allows users to drop a pin at a specific location within a mountain and discover nearby activities.

Pin-Based Location Selection

Users can drop a pin at their desired location (e.g., a trailhead, campsite, or entrance).
The black pin icon represents the user’s selected location, helping them focus on nearby adventures.

Users can drop a pin at their desired location (e.g., a trailhead, campsite, or entrance).
The black pin icon represents the user’s selected location, helping them focus on nearby adventures.

Focused Adventure Discovery

When a user selects a nearby activity, the marker changes color (e.g., orange for camping, blue for hiking), indicating the selected adventure.
User selects an adventure marker, which highlights the location and triggers a detail preview card.

When a user selects a nearby activity, the marker changes color (e.g., orange for camping, blue for hiking), indicating the selected adventure.
User selects an adventure marker, which highlights the location and triggers a detail preview card.

Interface
Analysis

Interface Analysis

Adventure Detail Page

This campground detail page is designed to provide users with an immersive and

informative experience

This campground detail page is designed to provide users with an immersive and informative experience

Hero Image with Carousel

A large, immersive cover photo showcases the camping experience.
A carousel of preview images below the hero image allows users to explore additional photos.
A "+48" badge indicates there are more images available, encouraging users to tap for a full gallery.

A large, immersive cover photo showcases the camping experience.
A carousel of preview images below the hero image allows users to explore additional photos.
A "+48" badge indicates there are more images available, encouraging users to tap for a full gallery.

Campground Information Section

Clearly displays "North Pines Campground" with a location pin (Yosemite National Park, California, USA).
A concise overview of the campground's atmosphere, features, and surroundings.

Clearly displays "North Pines Campground" with a location pin (Yosemite National Park, California, USA).
A concise overview of the campground's atmosphere, features, and surroundings.

Community & Engagement Features

Displays a profile preview of 3 users who have joined the camp.

"+26" indicator suggests more people have joined, encouraging engagement.

CTA encourages immediate user action (e.g., navigation, trip planning, or route guidance).

Displays a profile preview of 3 users who have joined the camp.

"+26" indicator suggests more people have joined, encouraging engagement.

CTA encourages immediate user action (e.g., navigation, trip planning, or route guidance).

Interface
Analysis

Interface Analysis

Pre-AR Navigation Screen

transition to dark mode, AR consumes significant power, and dark mode helps reduce screen brightness, ultimately improving battery life during long outdoor activities.

Top Information Panel

ETA (Estimated Time of Arrival) – Displays how long it will take to reach the trailhead before switching to AR mode.
Clearly shows the selected starting point

ETA (Estimated Time of Arrival) – Displays how long it will take to reach the trailhead before switching to AR mode.
Clearly shows the selected starting point

Dark Mode Map with Route Highlights

Dashed glowing path – Clearly marks the route to the destination.
Waypoints & Checkpoints – Circular markers indicate key points along the path.
Minimal map details – Keeps the focus on the navigation path rather than unnecessary distractions.

Dashed glowing path – Clearly marks the route to the destination.
Waypoints & Checkpoints – Circular markers indicate key points along the path.
Minimal map details – Keeps the focus on the navigation path rather than unnecessary distractions.

Interface
Analysis

Interface Analysis

Interactive AR Navigation

transition to dark mode, AR consumes significant power, and dark mode helps reduce screen brightness, ultimately improving battery life during long outdoor activities.

Ground Arrows

Green AR path indicators are placed on the trail, guiding users along the correct route.
Arrows are spaced out to create a clear sense of movement and direction.

Green AR path indicators are placed on the trail, guiding users along the correct route.
Arrows are spaced out to create a clear sense of movement and direction.

Interactive Trail Markers

Gray icons in the distance indicate points of interest or checkpoints.
Users may be able to tap these to get more details.

Gray icons in the distance indicate points of interest or checkpoints.
Users may be able to tap these to get more details.

AR-Detected Sign & Info Overlay

Information overlay, highlighting a hazardous area on the trail
This could include warnings about steep terrain, dangerous animal, or unstable paths, ensuring user safety during navigation.

Information overlay, highlighting a hazardous area on the trail
This could include warnings about steep terrain, dangerous animal, or unstable paths, ensuring user safety during navigation.

Interface
Analysis

Interface Analysis

Community Feature for Adventure Sharing

This Community UI fosters a social, interactive space where users can share their hiking experiences,

tag locations, and connect with others through personal maps and adventure posts.

This Community UI fosters a social, interactive space where users can share their hiking experiences, tag locations, and connect with others through personal maps and adventure posts.

Community Feed

"For You" shows recommended posts based on user interests. "Following" displays content from friends and followed accounts.
Users can share short adventure stories or real-time updates.
Users can write about their experiences and upload photos, maps, or even voice notes.

"For You" shows recommended posts based on user interests. "Following" displays content from friends and followed accounts.
Users can share short adventure stories or real-time updates.
Users can write about their experiences and upload photos, maps, or even voice notes.

Adventure Posts

Each post is linked to a specific hiking or adventure location (e.g., "Camelback Mountain, Arizona").
"View Map" Button – Opens the shared custom map, allowing users to explore the tagged adventure route.

Each post is linked to a specific hiking or adventure location (e.g., "Camelback Mountain, Arizona").
"View Map" Button – Opens the shared custom map, allowing users to explore the tagged adventure route.

Interface
Analysis

Interface Analysis

Personal Timeline-Based Adventure “My Map”

This timeline UI visually documents a user’s outdoor journey, tracking activities, timestamps, and

locations in a structured and engaging way.

This timeline UI visually documents a user’s outdoor journey, tracking activities, timestamps, and locations in a structured and engaging way.

Timeline Structure

A vertical timeline with circular markers represents chronological events in the user’s journey.
Each marker corresponds to a timestamped activity, making it easy to follow the trip’s flow.
Green and yellow indicators suggest different types of stops (e.g., main activity, sub-activity, or checkpoints).

A vertical timeline with circular markers represents chronological events in the user’s journey.
Each marker corresponds to a timestamped activity, making it easy to follow the trip’s flow.
Green and yellow indicators suggest different types of stops (e.g., main activity, sub-activity, or checkpoints).

Location-Based Experience Sharing

Each entry logs specific locations, allowing others to replicate or customize the same route.
Text input (e.g., "You don’t need to pay ticket! This is free.") provides insider knowledge.
Users save another person’s timeline as a custom plan.

Each entry logs specific locations, allowing others to replicate or customize the same route.
Text input (e.g., "You don’t need to pay ticket! This is free.") provides insider knowledge.
Users save another person’s timeline as a custom plan.

Interface
Analysis

Interface Analysis

Color

#B7EC42

#999999

#FFFFFF, 40%

#000000

Font

Poppins

This Adventure app makes exploring easy

with custom maps, AR, and a community of explorers.

Open Sans

This Adventure app makes exploring easy

with custom maps, AR, and a community of explorers.

Navigation Bar

Explore

Social

My map

Explore

Primary CTA Btn

Secondary CTA Btn

Secondary

CTA Btn

Secondary CTA Btn

Reflection

User Research as the Foundation of Interface Design

User Research as the Foundation

of Interface Design

I realized that effective interface design starts with thorough user research. Understanding the target audience’s needs, behaviors, and pain points provided the foundation for designing intuitive and engaging experiences. Without this groundwork, even the most visually appealing designs risked missing the mark. Conducting surveys, interviews, and usability tests helped ensure that the design aligned with real user expectations and needs.

Establishing a Consistent Design System

To maintain a cohesive user experience across different screens and features, I developed a design system for the Adventure App. This system included standardized components, typography, color schemes, and interaction patterns, ensuring consistency and efficiency in design iterations.