Mobile Game UI&UX Design&Implementation

During my time at NetEase Game, I had a chance to design a large mobile game title and experience live operations to update content like holiday events. So I decided to create a generic Halloween event for mobile games and showcase my ability to adapt to different themes and engage users with unique, festive experiences.

This is a personal project with my profession in UX design, UI art&design, and Unity implementation.

An overview of what I have built in Unity:

Background about this project:

I worked as a game UX designer intern at NetEase Games in 2020 and 2021. I joined a mobile game project to design a Chinese storytelling, anime-styled gacha game (a type of video game that implements the toy vending machine mechanic). During my internship, I did a lot of comprehensive research on similar types of games, including system design, core mechanics, UX flow, and UI design patterns. In March 2021, my game came alive for the general public to download and play. Thus I have experience designing LiveOps events and new content.

This experience, coupled with my exposure to similar games, inspired this unique project in my portfolio. Specifically, I designed a holiday session for a mobile game, incorporating features that not only showcase my understanding of mobile game dynamics but also highlight my ability to create engaging experiences, especially within the context of the mobile gaming industry.

Throughout the project, I embraced my role as a UX designer, UI artist and Implementer. To set up a standard workflow as a collaborator, I pretended that I collaborated with a game designer who presented me with system design requirements. After translating those requirements into a cohesive UX design, I handed over the design to UI artists for detailed GUI art, and conveyed my design to developers for Unity feature implementation. This collaborative approach ensured a smooth flow from conceptualization to the visual realization of the holiday session, maintaining a user-centric focus at every stage.

I received a game design document that can be summarized like this:

Here I broke down a detailed system design document and summarized the what the system is like in my own words:

1. Design a halloween event panel, three sections in total (daily sign-in reward, daily task, seasonal game).

2. Daily sign-in section should have a share function.

3. Daily task will automatically refresh in a timely basis. If finished, the reward can be used for a seasonal game pass.

4. The seasonal game has 5 levels in total, props, monsters, and finishing points are included.

5. The goal for the season game is to finish all 5 levels in total and get all rewards, players are limited by their HP.

What I have summarized：
After receiving the design requirement from the game designer and understanding thoroughly what the event system looks like, I summarized what screens should I create.

1. Event main screen.
2. Daily sign-in screen, sharing screen
3. Daily task screen
4. Seasonal game tutorial.

Then I made a workflow that shows how the system looks like:

I discovered some key aspects that I should be aware of:

After receiving the design requirement from the game designer and understanding thoroughly what the event system looks like, I summarized what screens should I create.

1. Consistent branding: The new event player journey should align with the original game with alterations of gameplay, awards and holiday theme experience.

2. Thematic visuals: Incorporate festive and seasonal graphic and environment design to create a holiday atmosphere, and implement an intuitive festive UI that guides players seamlessly through the event.

3. Festival-limited content: Include special daily tasks that align with the festival theme and allow players to unlock special rewards.
4. Clear introduction: Sometimes it needs player guidance to introduce the new event. It can be a key element to create an engaging user experience together with a good interaction design.

I also dug some references on similar games:

On the left side, two Chinese mobile games combine UI with the background and expand the clickable area from UI button only to UI button + the object that it refers to. (Environmental UI Design)

For example, for the first game UI, the "Daily Sign-in" clickable area (in green) can include the button and the book. For the third game, we can click the button and the cats in the background to enter "Daily Sign-in".

This integration allows players to interact with their festive environment in more intuitive and natural ways. And is more dynamic in design and alteration.

On the right side are Arknights and Genshin Impact event screens. They use a conventional flat UI design to introduce the event system. This is straightforward and easy to be familiar with. Players can easily understand how the event system works with guidance and extra narrative.

However, this UI design is less engaging to interact with the festival and easily gets boring over time. Arknights uses this pattern of UI design every time it has a new game event, which makes players less enthusiastic whenever it comes out. It is a very safe choice when designing for new event and secure old players.

Research on halloween-theme objects:

After much consideration, I've decided to use the environmental UI design approach for this event. To integrate background objects and the UI layer, I need to research what signature objects I should put in the background that fit well for the Halloween theme.

- Pumpkins

- Ghosts & skeletons

- Haunted house

- Candy (as award)

- Bats and black cats

- Witches

- Wooden structures

- Scarecrow