Map Redesign
At Autoverse Studios, I was tasked with redesigning the user experience for the game map in Auto Legends. Over time, the map had gone through several iterations and partial redesigns, which resulted in a fragmented and unintuitive interface. My focus for this redesign was to unify these disparate ideas, resolve existing navigation friction, and come up with a singular, cohesive experience that would better serve the players and support the game’s evolving content ecosystem.
Identifying Pain Points
The current map has several issues that need to be addressed. The map is cluttered with many icons making it difficult to read. The map also has an inconsistent visual language for the various types of content. ( Locations, Tutorial Content, Special Events ).
Redesign Goals:
- Declutter the map making it easier to read and more user friendly.
- Design a scalable solution that can accommodate future features.
- Incorporate a mobile friendly design.
Previous Design
Design Intent VS New Mechanics
Previous Design
The above image shows the previous design intent.
The original concept centered on six locations, all of which featured identical visual elements and shared the same functionality. Clicking on them would take the player to that physical location on the map.
Special events were represented by unique triangle icons. This design choice aimed to create a visual contrast with standard map elements, highlighting them as unique opportunities to capture player interest.
After New Mechanics were added
The above image shows the previous design after new mechanics were added. As you can see the map now appears very cluttered and difficult to navigate.
The previous design was not bad. It just didn’t account for all the new features that would be added, and as a result it lost clarity.
The unique triangle icon, originally designed for rare special events, was repurposed for permanent features. This shift meant a design intended for infrequent use became commonplace, contributing to a cluttered feel across the map.
New tutorial campaigns were also added. These were icons that appeared on the map but didn’t actually represent physical locations. These icons also contributed to the cluttered feel.
My Process:
Drawing from established design objectives and a clear understanding of user friction, I began the redesign by wireframing potential layouts for the primary map. These early concepts centered on enhancing readability and adopting a mobile-first architectural approach.
Location Details
Location Details Panel
In the previous design clicking on a location would bring up a details panel highlighting information about that location. The issue with this panel is that it isn’t mobile friendly. Another issue is the layout. This layout will have limitations in the future when new content needs to be added.
Redesigned Location Details Panel
New Layout – By utilizing a full-screen popup, the updated details panel provides expanded space for larger text and touch-friendly buttons, enhancing the mobile experience. This redesigned layout also offers the flexibility needed to incorporate additional features down the line.
Challenge Icons
The introduction of the Challenges feature conflicted with established UX guidelines for map iconography. Previously, map icons were strictly reserved for physical world locations; however, the new challenge icons merely triggered a display dialog, violating this principle. This led to two significant problems: first, the icons represented non-physical entities, and second, their placement as pseudo-locations created a cluttered, disorganized layout that distracted players from actual destinations and caused confusion.
To significantly enhance map clarity, the Challenges feature was redesigned by consolidating various individual icons into a single button located in the bottom-left corner. Activating this button triggers a Challenges dialog that lists all available daily objectives, providing a cleaner and more streamlined interface.
Map Flow
Conclusion:
In conclusion, the redesign of the Auto Legends map significantly elevates the user experience by prioritizing clarity and mobile optimization. By transitioning to a full-screen popup for detail panels, the interface now provides a more touch-friendly environment with expanded space for legible text and future feature integration. Furthermore, the strategic consolidation of the Challenges feature into a single, streamlined button resolves previous iconography conflicts and eliminates map clutter. These improvements collectively transform the map from a disorganized layout into a cohesive, intuitive navigation tool that allows players to focus on their destinations without distraction.
Before and After
Gallery
