Level Design Postmortem: Sixth Street (Zenless Zone Zero)

I worked for the Hoyoverse project Zenless Zone Zero several years ago from the first playable demo to the start of β. One of the part I made is Sixth Street, a hub world that plays a role as a start menu in the game.

The welcome card on my desk. Picture taken on the first day I joined the team.

It is important to note that the level changed a lot for multiple reasons, making it completely different from my design. Therefore, there is no need to refer to the game; reading this article is enough. And in this article, I will focus on the methods and processes. Also, I did this about three years ago when I was less experienced and faced many challenges with frequent revisions. In this article, I will simplify and highlight only the aspects proved effective.

Determine What It Is

In the game world, it is a silent street where the main characters live and work, while in the game, it’s the start menu. Therefore, it should provide access to most of the game’s functions. A menu should be user-friendly, so the map should be easy to navigate, allowing players to reach functions without having to search extensively. Additionally, moving between these functions should be engaging, meaning the time spent traveling between points should be controlled.

To compare, it’s similar to levels like the village in Monster Hunter: Rise and Dedsec’s den of Watch Dogs series. These areas are the most stylized place in their respective games. So I believe Sixth Street should also be highly stylized, both in terms of shape and structure.

Functions

As mentioned above, this is essentially a menu, so the first step is to gather information about the functions that should be included. This involves identifying entrances to all gameplay elements and peripherals. For example, the start of main story and where players gacha. I obtained this information from the system design team and prioritized these elements accordingly.

There are also functions that go beyond the basic gameplay elements, such as the inherent features of the location itself. For example, characters encountered in the story may visit, so there should be natural spawn points that are easy to encounter. Additionally, maybe later, the main character holds a concert, a gathering place is necessary.

Once I had all the functions, I mapped out their relationships, considering spatial, temporal, and visibility factors. Each function was represented with a bubble diagram. Some functions have similar settings, such as a store and a bookshop, which might be placed adjacent to each other and grouped into a district.

World building

To create a virtual place that make sense, world building is essential. “Make sense” means not only ensuring that the functions work well within the place, but also the place fits and showcases the game’s world setting.

Reference Gathering

The first step is reference gathering, which involves two types of references: prototypes and art references.

Prototypes are places with similar functions to the place you want to create. These can be real world location or settings from other works of art. For Sixth Street, a prototype could be a street with single-family detached houses and stores, an old but cozy residential area near the city center, or a street with a well-known video shop.

Using prototype references is valuable even if the map is not based on a real-world location because they provide information that has been tested by time and people. Instead of copying these places, I analyzed their features and the reason behind them. For example, I considered the percentage and allocation of businesses facilities, the influence of modern urban planning theories, and the context or relationship with other parts of the city. This analysis helps ensure that the virtual place feels authentic and well-integrated into the game’s world.

To use a reference, the first step is to identify the specific reason for using it. For example, if the reference pertains to the percentage of businesses in an area, I might need to compare it with places that have different business percentages.

One of the most memorable features I found in the prototypes was influenced by a policy: in Japan, if someone wants to build a house, they must purchase the land. Due to Japan’s mountainous terrain, the shapes of the land parcels vary greatly, leading to diverse architectural shapes. This unique characteristic is the flavor I need for the place, so it becomes a guiding principle for the design.

Art references are used for visualization. They include places that fit or provide inspiration for the artistic style. These references can be at various scales — props, stores, buildings, or entire districts. All are valuable for creating a cohesive and visually appealing environment.

Image Analysis

After gathering references, the next step is image analysis, which involves examining both the overall site and its individual components.

The image of the whole site pertains to how the location functions within the game world. In this project, characters gather on Sixth Street for various reasons, so it serves as a node within the game world.

Next, I analyzed the image of each part of the site. For example, characters might visit the street because of the video shop, making the video shop a node within Sixth Street.

During the block-out process, the focus is on emphasizing these images through structure, roads, and decoration. For instance, I created a curved road around the video shop’s front facade, using the echo effect to emphasize its importance. From a decoration perspective, I used numerous lines to symbolize the televisions, connecting the video shop with other parts of the street and implying its relative position. This approach ensures that each node is distinct and effectively integrated into the overall design.

During the design process, I encountered several problems. Here are two notable issues:

The Metrics Issue

Creating a seamless experience was challenging due to the game’s ultra-fast ACT mechanics, which made determining metrics a significant hurdle. (My previous work on combat metrics provided valuable experience, which I plan to discuss in future articles.)

Initially, I used the combat 3Cs for Sixth Street, which led to problems: the spaces were large, making a corner store appear as large as a stadium. The high ceilings made it nearly impossible to create variations in elevation. Additionally, the movement cadence in Sixth Street differed from combat areas; players might stop anywhere, making it easy to notice unrealistic building sizes, breaking immersion. After discussing with team members, I decided to develop new metrics and create a dedicated 3Cs for this area.

The Art Accident

The design process went smoothly, and the grey box worked perfectly in the engine for several weeks. However, when the art phase began, an unexpected issue arose: the headquarters wanted the artists to determine the map structure. This meant discarding my work and using a map designed solely by the artists.

This was frustrating and nonsensical, but I understood that Hoyoverse values art highly, which has contributed to their success in previous projects. To move forward, compromise was necessary. This situation made me reconsider the level designer’s highest priority, which should never be compromised. Ultimately, I found ways to adapt certain areas of the map to fit my spatial relationships, ensuring the most basic functions were preserved.

This blog first appeared on Medium and has been published with the author's permission.