Game Map
BitCraft Online
PROJECT
Game Map
The map is a commonly used feature in BitCraft, serving as a core source of information for players. The design strikes a balance between the information players should be given automatically and the information they should be able to record independently through thoughtful categorization and ordering of elements and interactions.
ROLE
Lead UX Designer
As Lead UX Designer for BitCraft Online and one of the game’s earliest team members, I evaluated the project during its early development and identified key opportunities for improvement. This role was hands-on, giving me the opportunity to work from research through conception to implementation.
DELIVERABLES
- User & market research
- Data synthesis + insight development
- Logic + hierarchy building
- Conducting team workshops
- Wireframes
- Video + static prototypes
- Pre-alpha UI design
- Hand off and implementation documentation
- Feedback collection + synthesis
The Process.
Spread across multiple releases, the process of developing BitCraft’s map took me to research both game and real-world maps at a granular level, utilizing time-tested methods while also ideating tailored solutions, and ultimately building a comprehensive design document that explained every possible interaction.
Why does this design matter?
BitCraft is a massively multiplayer community sandbox game where players work together to build a new civilization in a single, editable wilderness with an ancient past. BitCraft’s gameplay emphasizes skilling, building, crafting, farming, trading, and exploring, empowering players to cultivate a sheltered village with their friends or establish impressive cities and empires.
— Official BitCraft Online Website
Bitcraft’s sandbox-style world is filled with unique biomes, resources, creatures, civilizations, mini-dungeons, travelers, and more. This means the player must be able to follow many things, places, people, and plans. When I joined the team, we faced a major problem: the map had nearly no functionality. This left players with only a simple visual guide and their current coordinates, which quickly proved inadequate.
Some common pain points were quickly brought to light:
- Keeping track of important locations was a struggle.
- Players had to write down the coordinates of places of interest physically.
- Frequently opening and closing the map menu was necessary to check navigation progress.
- Exploration was not equitably rewarded.
- Topographical information was not always conveyed clearly.
- The game’s content was expanding with each release, further exacerbating these issues.
BitCraft is a massively multiplayer community sandbox game where players work together to build a new civilization in a single, editable wilderness with an ancient past. BitCraft’s gameplay emphasizes skilling, building, crafting, farming, trading, and exploring, empowering players to cultivate a sheltered village with their friends or establish impressive cities and empires.
— Official BitCraft Online Website
Goals & Objectives.
Once the problem was clearly laid out, the next step was to establish primary objectives for the solution:
MAKE INFORMATION DIGESTIBLE, BUT COMPLETE
Especially as content expanded, the map had high amounts of information to convey to the player, and we needed to be aware of the line between informative and cluttered.
CREATE A DYNAMIC, INTERACTIVE TOOL.
The map would no longer just be a static image for players to uncover. Instead, it needed to be equipped with interactive elements to enhance each player's experience.
AID kEEPING TRACK OF ELEMENTS ACROSS GAME SCALES
Bitcraft functions on three major scales:
Player Scale: Gameplay that pertains solely to the individual’s experience.
Town Scale: Gameplay that pertains to the claim’s system within the game; i.e., a small to medium group of people working towards growing a Settlement.
Empire Scale: Gameplay that pertains to the Empire system within the game; i.e., a large group of people working towards conquering land under a shared banner.
This new map design would need to support all of these experiences.
REDUCE FRICTION OF OPENING AND CLOSING THE FULL MAP
Not every inquiry should require the player to open a full-screen menu, especially repeatedly. The mini-map needed to be more robust to support on-the-go gameplay. All of these goals led to formulating the leading design statement for this project:
How might we design a map system that functions as a personal tracking and recording tool for players to make the world their own, while simultaneously conveying layers of existing world information?
Research.
Once the initial goal setting was complete, it was time for research. Maps are no new concept, and thus there are endless versions of them— both inside and outside of gaming. This led me to comb through real-world maps, online maps, videogame maps (both in-game and online interactive versions), and even this fun article of Cartographers reviewing Breath of the Wild’s map.
GOOGLE MAPS
When designing a product, I always stress the importance of not getting stuck in researching only other versions of the same thing. Of course, games are in the same design realm, but it is crucial to examine the everyday tools people use to solve problems. By keeping this mindset, we prevent ourselves from simply reheating the same soup and instead come up with a new, innovative design. Google Maps has a massive user base, considering it is the most used modern map service. Most users would be familiar with it, so I found it imperative to study it for this project.
In particular, I focused on how Google Maps handles different zoom levels and the information it naturally culls for display. This required me to select a random (populated) location on the map at maximum zoom and slowly zoom out. Whenever the information and visuals were updated, I would take a screenshot. This became invaluable to my decision making regarding zoom culling for BitCraft’s map.
Key Google Maps screenshots that I used to define the 0%, 25%, 50%, 75%, and 100% zoom level respectively.
VIDEOGAME ATLUS
Videogame Atlus by Luke Caspar Pearson + Sandra Youkhana is a fantastic read that opened my eyes to just how intentional and intricate map design can be. Both through masterfully crafted visuals and thoughtful analysis, this book is a fantastic study of videogame maps and spaces.
GAME MAP PINS
Many games have markers and pins on their maps, including ones placed by players themselves. I looked at several games to see how they handled both their pin design and flow of placement. Two major examples stood out:
Genshin Impact’s flexibility in placing, customizing, naming, editing, and deleting pins resonated with BitCraft’s users' needs.
Footage I recorded of Genshin Impact’s map pin flow.
Breath of the Wild’s map stamps interested me for another reason altogether: they had two types of pins that functioned differently. The first was what I began calling concept-based, which relied on an image to portray an idea (e.g., cooking resources, mineral deposits, bosses, etc.). The second was what I noted as abstract-based, conveying no specific concept but instead meant to mark a waypoint for exploration. I found both of these to apply to BitCraft’s players' needs.
Breath of the Wild’s stamp box.
GAME MAP TOPOGRAPHY
For topography, we had several things to consider, including biomes, elevation, water sources, and roads. It was also crucial to consider a few key constraints and key factors about BitCraft’s map:
- The overworld terrain is not a pre-designed space with crafted locations.
- The world is generated utilizing designed constraints and typed biomes.
- Over time, players can edit and add to the world.
I kept these factors in mind as I researched and tested how other games handle their topography. Ultimately, Minecraft and Don’t Starve Together were the most aligned with our constraints and served as the strongest topography references. Additionally, both games have countless user-made mods that enhance the experience. As a general rule, I find mods to be an invaluable subject of study because they show exactly what dedicated players want to see added to their favorite titles and how they would like to see these changes implemented.
GAME MAP TOPOGRAPHY
To fill the gaps left from my research thus far, I dived into MMOs, notably World of Warcraft, New World, and Final Fantasy XIV Online. I found these references particularly useful for their mini-map functions and territory divisions.
Ideation.
Bitcraft’s map was designed in stages due to constraints on the development rollout. Because of this, we had to choose what to prioritize with certain releases.
pre-Alpha PASS
The first map update addressed the most pressing issues with the easiest-to-implement solutions, focusing on the low-hanging fruit. This led to the initial development pass for map pins and basic information panels. Additionally, I was creating all of the game’s ore-alpha UI at this time.
In addition to this prototype, I provided the following anatomy of elements and a menu placement breakdown to address click location use cases, aiding in communicating the implementation.
Click location menu use cases showing how the menu adapts depending on where the player selects.
Lastly, I created these explorations for BitCraft’s base mini-map. I wanted to explore both unintrusive options and ones that emphasized the cardinal directions for players who chose to have their map rotate with their orientation in the world, which wound up becoming a player favorite.
Alpha
Once we were at the alpha stage, it was finally time to design the map as a complete system. This meant considering information culling, adding new content, and fleshing out interactions. The team also brought on the talented Randy Huynh as our dedicated UI designer, helping BitCraft’s UI evolve.
Zoom levels
To better cull information, I detailed how we would handle the various zoom levels of BitCraft’s map. To do this, I visually laid out each map element on a graph benchmarked at 0%, 25%, 50%, 75%, and 100% zoom. From there, I created cards for the various map elements, including their names, categories, and in-game visuals or references (if applicable). I placed each card on the graph according to when it should become visible, along with implementation notes.
TOGGLES
To further usability, a few toggles were added to the map’s functionality. However, this was an area that could be easily bloated. I created a table, sorting each potential toggleable to determine which elements would benefit most from this feature, taking the existing behaviors into account.
Property
Empire territory grid
Player placed pins
Ancient Ruins
Watchtowers
Owned land + available land
Players
Travelers
Animals
Settlements
Empire territory layer
Owned vehicles
Teleport Location
Empire Planned Expansion
Behavior
Permanent
Permanent
Permanent
Permanent
Hidden by Default
Render Distance
Render Distance
Render Distance
Permanent
Permanent
Permanent
Permanent
Triggered on Hover
Benefit Level
High
High
High
Medium
Medium
Low
Low
Low to None
Medium
Low to None
Low to None
Low to None
Low to None
Toggle Decision
Toggle
Toggle
Toggle
Toggle
Toggle
No Toggle
No Toggle
No Toggle
No Toggle
No Toggle
No Toggle
No Toggle
No Toggle
Final Product
Anatomy of Design
The final design breaks down the map’s content into “layers”; these layers define the information hierarchy and how the UI is rendered. Information is divided into three major types based on interaction:
Primary: Surface-level information, displayed by default with no user input required.
Secondary: Information triggered by hovering over an element.
Tertiary: Information triggered by clicking an element and opening a focus panel.
Layer 1: Topography
Layer 1 is defined by the elements that comprise the land's foundational topography. This includes biomes, land masses, elevation, and bodies of water. This layer is entirely Primary information.
A drawover of BitCraft’s existing map demonstrating how elevation may be portrayed.
Layer 2: Roads
Layer 2 is defined by player-built infrastructure that impacts how players navigate and travel the world, such as bridges and roads. Like the previous layer, layer 2 is entirely 📍Primary information.
A drawover of BitCraft’s existing map demonstrating how roads may be portrayed.
Layer 3: Territories
Layer 3 is defined by elements that convey ownership or occupation of an area on the map. In BitCraft, this is often called a claim.
Ancient Ruins
Ancient Ruins are non-player-owned claims that function like mini dungeons. They may contain loot and puzzles for players to clear. Once cleared, the ruin collapses and is closed off to players for a specified period until the dungeon refreshes.
Primary Information
- State
- NPC status
- Ruin type
Secondary Information
- Coordinates
- Claim Boundary
- Time until reset (if closed)
Tertiary Information
- Track location
A hovered Ancient Ruin, both in open and closed states.
Settlements
Settlements are player-built claims on the town scale. Members must recruit other players and work together to upkeep these Settlements with supplies and progress to higher tiers. Because players expand the claim tile by tile, each Settlement may have a unique shape and size, which must be accounted for visually by the claim boundary. Additional behaviors include renting homes, aligning with Empire, and even serving as a capital city.
Primary Information
- Player relation
- Empire status
- Supply status
- Tier
Secondary Information
- Coordinates
- Settlement name
- Tier
- Claim boundary
Tertiary Information
- Settlement owner
- Number of members
- Rentals available
- Recruiting status
- Track location
- Option to launch the full Settlement summary window
A hovered Empire aligned Settlement including secondary information via tooltip and claim boundary.
An Empire aligned Settlement in its default (primary), hover (secondary), and click (tertiary) states.
An unaligned Settlement in its default (primary), hover (secondary), and click (tertiary) states.
Empires
Empires are player-founded groups that may claim territory on the Empire scale. Empire claims are established by the placement of actively aligned nodes and may be contested in sieges, where the winner seizes the territory under their own banner.
By nature, Empire boundaries overlay biomes, Ancient Ruins, and Settlements. This means the visual indicator for boundaries had to be designed so as not to confuse or conflict with these other elements.
Primary Information
- Claim boundary
- Empire name (on maximum zoom out)
- Claim type
Secondary Information
- Empire name
- Relation to player
Tertiary Information
- Emperor
- Number of members
- Total territory area
- Option to launch the Empire menu
Empire border visuals based on claim type (from left to right: Established empire borders, area marked for siege, area marked for expansion, and actively sieged area).
Watchtowers
Primary Information
- Empire alignment
- Siege status
- Build state
Secondary Information
- Name of aligned Empire
- Siege information (when applicable)
- Watchtower name
- Claim boundary
Tertiary Information
- Mark for a siege (when applicable)
- Siege information (when applicable)
- Supply level
Watchtowers are nodes built by Empires to extend their area of influence. Each Watchtower has its own radius of area of influence and can be potentially overtaken by a siege by other Empires.
An uncontested Watchtower in its default (primary), hover (secondary), and click (tertiary) states.
A Watchtower under siege in its default (primary), hover (secondary), and click (tertiary) states.
Layer 4: Game Markers
Layer 4 is defined by non-territory-based markers automatically generated by the game logic. Moving entities are displayed on the map, with their positions constantly updating to reflect their overworld location.
Players: Personal Marker
The player’s current location; when the map is opened, this marker serves as the pivotal position.
Primary Information
- Cone of vision
Secondary Information
- Coordinates
- Player’s username
The player marker.
Players: OTHER PLAYERS
Other online players that are within render distance.
Primary Information
- Relation to player
- Emperor status
Secondary Information
- Coordinates
- Hovered player’s username
- Empire name (for Emperors)
- What claim(s) are shared
Other player markers from left to right: default, shared claim member, Emperor.
Personal: Player Housing
Permanent markers that indicate any building the player owns or rents.
Primary Information
- Rent payment status
Secondary Information
- Coordinates
- Building name
Tertiary Information
- Option to launch rental menu
- Track location
Housing marker.
Personal: DEPLOYABLES
Permanent makers that indicate the location of the player’s deployed vault entities— often vehicles.
Primary Information
- Type
Secondary Information
- Coordinates
- Deployable name
Tertiary Information
- Track location
Deployable markers for carts and boats.
Personal: TEleport location
A permanent marker that indicates the player’s set recall location.
Primary Information
- Status (available vs. disabled)
Secondary Information
- Coordinates
- Cooldown timer
Tertiary Information
- Teleport prompt
Available vs. disabled teleport markers.
NPC
There are two main types of NPCs in BitCraft: Travelers, who show within render distance and are stationed at Ancient Ruins, and Wisp, who acts as the player’s tutorial and quest giver.
Primary Information
- Type
Secondary Information
- Coordinates
- Name & title
- Time remaining (when applicable)
- Current objective (when applicable)
Tertiary Information
- Track location
Traveler icons.
Mobs
Mobs within render distance that can be hunted via combat.
Primary Information
- Aggro type (based on player’s level)
Secondary Information
- Coordinates
- Creature name
- Tier
Mob icons from left to right: friendly, neutral, and hostile.
Layer 5: Custom Pins
Primary Information
- Pin icon
Secondary Information
- Coordinates
- Label
Tertiary Information
- Pin management
- Track location
Layer 5 consists of custom pins placed by the player. This feature enables players to set their own goals and explore, making the map feel like their own personal tool.
Pin Types
There are two main types of pins, each with its own merits.
Concept Pins
Concept pins convey a game concept while remaining general enough that players can assign their own meaning as needed. These pins are often long-lasting and typically mark locations where players plan to return routinely.
Abstract Pins
Abstract pins have a more generalized design, enabling players to mark locations without needing a concept-based meaning. These pins are often more short-term than their concept counterparts, as they mark waypoints for areas of interest or objectives.
Pin Management
Pin management functions fall under the Tertiary level and are accessed via the focus panel triggered upon clicking the pin. The following options are:
Placing a Pin
A new pin will be placed upon clicking an empty spot on the map with the right mouse button. From here, the player will be prompted to select an icon and (optionally) input a label. By default, a pin starts as an abstract pin.
Editing a Pin
Clicking a pin that has already been placed will trigger its focus panel. From here, the player can edit, label, and delete the selected pin.
From left to right: The new pin prompt and the edit pin prompt.
Layer 6: HUD
Layer 6 is defined by the topmost UI that makes up the HUD.
BitCraft’s map with HUD elements only.
BASIC ELEMENTS
Compass Rose
Located in the top-right corner of the screen, the compass rose indicates the cardinal directions on the map.
Current Player Coordinates
Located beneath the compass rose, a string of coordinates shows the player character's current location.
Controls Panel
To conserve user memory, this low-center UI panel displays the interaction controls for navigating and using the map. Controls include selecting a location, placing a pin, zooming, panning, and rotating.
On-Screen Zoom Control
To accommodate mice without a middle mouse button, an on-screen zoom controller is included on the left side of the HUD.
Nav To + Toggles Panel
Located under the player’s coordinates, this panel centers around a player’s personal locations and utilities. There are 3 major functions in this panel:
Nav To: Selecting one of the options under “Your Locations” triggers the Nav-To function. This function pans the camera to focus on the location, ensuring players always have easy access to their core places.
Toggles: Players can use toggles to hide certain visuals on their map, reducing visual clutter and allowing them to focus on what is most important to them in that moment. Toggleables include the Empire territory grid, placed pins, Ancient Ruins, Watchtowers, and owned + available land.
Watchtower Overview: Pressing the “View Watchtowers” button opens the Watchtower overview menu. This allows players to stay up to date on relevant Watchtower and siege information.
Mockup of the Watchtower Overview menu.
Information Overlays
When players need information beyond the Primary level, information overlays come into play to deliver Secondary and Tertiary information through tooltips and focus panels, respectively.
Basic Hover Tooltips
Toggleable with the Alt key, the basic hover tooltip triggers when the cursor hovers over the map, but not over a specific marker. This tooltip displays coordinates, biome, and ownership information.
Basic hover tooltips for both an unaligned and empire-aligned territory.
Marker Hover Tooltips
Triggered when the cursor hovers over a specific map marker, these tooltips display Secondary information assigned to an element.
Marker hover tooltips for both an unaligned and an Empire-aligned Settlement.
Focus Panel
Triggered when a player clicks a specific marker, the focus window UI adds context by providing any Tertiary information and interaction assigned to an element.
Focus Panels for both an unaligned and an Empire-aligned Settlement.
Additional Behaviors + Features
Now that we have established the map's content and the corresponding render layers, there are a few additional interactions worth detailing.
Zoom Views
To create a stronger hierarchy and avoid overcrowding, BitCraft’s map adapts around the current zoom level. This logic was defined in the Ideation section.
Auto pathing
Players can use their left mouse button to click on the map or mini-map (an optional setting) to auto-path to the selected location.
Tracking a Location
Players can track existing markers and pins via the focus panels triggered by an LMB click. This will help the player navigate to their desired location by keeping the tracked pin persistent on both the map and mini-map.
Off-Screen Indicators
Similar to their stationary counterparts, off-screen indicators point to the direction of important or tracked markers outside the current map view by hovering the edge of the player’s map.
A non-tracked and currently tracked NPC marker.
Mini-Map
The mini-map is a reduced map-view UI in the Overworld HUD and is core to reducing the friction of the player having to open the full-screen map frequently.
At its core, the mini-map gives directional guidance through a map preview, live coordinates, and emphasis on tracked elements. Additional navigational support is provided by the surrounding buttons, which include an Empire grid toggle, a claim border toggle, teleport, and access to the full-screen map.
To further enhance usability, players can choose to opt in or out of rotation lock and zoom controls triggered when the player scrolls the UI while hovering.
A non-tracked and currently tracked NPC marker.
Outcomes and Reflections
Rehauling BitCraft’s map was a great experience in thorough, intentional research, design, and documentation. For it to function, each element needs to work in harmony — something I had become accustomed to through designing all the game’s systems’ UX in tandem. In the end, the map settled on a robust exploration tool that lets players set objectives and make the world their own. I may have left the team before the full design could be implemented, but I am confident that these changes lead to a net improvement of the Bitcraft experience.