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, allowing players to discover activities and popular locations.
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, allowing players to discover activities and popular locations.
Company
EA
Company
EA
Company
EA
Year
2024-2025
Year
2024-2025
Year
2024-2025
Role
UX Designer
Role
UX Designer
Role
UX Designer
Goals
Wirframes
The wireframes include Map and Neighbourhood rank because player’s progression on each neighbourhoood will be visualized on the Map
The wireframes include Map and Neighbourhood rank because player’s progression on each neighbourhoood will be visualized on the Map
Wireframes
Zoom Levels
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
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
Iconography
Examples
Examples
Examples
Layers of Icons
Layers of Icons
Layers of Icons
Cross-Platform
Support interactions on
Console
PC
Mobile
Prototype in After Effect
Created test flow to visualize motion and transitions.
Clearly demonstrated design intent to Tech for smoother implementation.
Created test flow to visualize motion and transitions.
Clearly demonstrated design intent to Tech for smoother implementation.
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 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
“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
“Clean and detailed UX work, thank Kristine !!!"
— UI Designer