Map
Map
Map
The Map is a core navigation and discovery tool designed around progressive disclosure based on zoom level. The Map is closely tied to player progression, unlocking content and visibility as players advance.
As the UX owner for the Map, I defined the Map’s goals, interaction, and background requirements to ensure players could clearly read the terrain, elevation, identify skateable areas and support player navigation and exploration.
The Map is a core navigation and discovery tool designed around progressive disclosure based on zoom level. The Map is closely tied to player progression, unlocking content and visibility as players advance.
As the UX owner for the Map, I defined the Map’s goals, interaction, and background requirements to ensure players could clearly read the terrain, elevation, identify skateable areas and support player navigation and exploration.
Company
EA
Company
EA
Year
2024-2025
Year
2024-2025
Role
UX Designer
Role
UX Designer
Goals
Prototype in After Effect
Animated flow to visualize motion and transitions
Animated flow to visualize motion and transitions
Zoom Levels
Wirframes
The wireframes include Map and Neighbourhood Rank Progress
The wireframes include Map and Neighbourhood Rank Progress
Wireframes
All Panels
Organized panels for all POCs on the Map
Organized panels for all POCs on the Map
Organized panels for all POCs on the Map
Neighbourhood Rank Progression
Reward Track system which can be reused in other features
Reward Track system which can be reused in other features
Reward Track system which can be reused in other features
Consistent and Reusable
Unified design and interaction model across in-world and map panels
Creates a seamless and intuitive player experience
Reduces learning curve and development cost
Unified design and interaction model across in-world and map panels
Creates a seamless and intuitive player experience
Reduces learning curve and development cost
Filters
Players can filter activities by type and state
Filters also act as a visual legend for quick reference
Players can filter activities by type and state
Filters also act as a visual legend for quick reference
Players can filter activities by type and state
Filters also act as a visual legend for quick reference
Formula
Iconography
Examples
Examples
Layers of Icons
Layers of Icons
Cross-Platform
Support interactions on
Console
PC
Mobile
Testimonials
Testimonials
“ It's been so wonderful working with you! You are so detail oriented and very meticulous in all the design work you have contributed to the Skate team"
— UI Director
“ It's been so wonderful working with you! You are so detail oriented and very meticulous in all the design work you have contributed to the Skate team"
— UI Director
“It's always ez breezy working with you and you always make dev's lives easier without the leaving anything behind on your design. There is no uncharted territory, and you're always up for feedback and trying new stuff!"
— UI Tech Director
“It's always ez breezy working with you and you always make dev's lives easier without the leaving anything behind on your design. There is no uncharted territory, and you're always up for feedback and trying new stuff!"
— UI Tech Director
“Clean and detailed UX work, thank Kristine !!!"
— UI Designer
“Clean and detailed UX work, thank Kristine !!!"
— UI Designer