A Redesign of the UX and UI for the video game Shinsekai: Into The Depths.
Project Overview
Shinsekai: Into the Depths is a video game that can be played using either Apple Arcade or the Nintendo Switch. My chosen topic and deliverable was to redesign the UI and UX of this game. It is an underwater adventure game developed by Capcom, made in Osaka, Japan.
Project Goal
The goal of this project was to find, understand and then rectify any game interface design discrepancies. So, for the last 8 weeks, I have been creating, researching and finally redesigning a new prototype for the user interface of this game. I chose the video game called, Shinsekai: Into the Depths, because it is artistically beautiful, but also because the usability of the navigation and menus can at times, work against the game, and therefore affect the flow of the gameplay itself.
I have always wanted to delve deeper into game design, but having only ever designed UI and UX for websites and phone applications, this would be a whole new world. The more I read, the more I wanted to know.
Technology and Resources Used
Software:
- Adobe Illustrator: To create new elements and assets such as maps, health bars, menus, pop up instructions, buttons and navigations.
- Adobe XD: This was an essential tool to make the Style Tile and clickable High Fidelity prototype, as well as the video of the prototype.
- Adobe Audition: This was used to record my vocals for the demonstration video.
- Premiere Pro: It was used to edit the video and audio together.
- InDesign: To create a Journey Map.
- Nintendo Switch and Apple TV: These were deployed to play the game for comparative views, and a desktop browser was used for game play reference.
- Media Encoder: This was used to render the video.
Resources:
- Miro: This is a great program for ideation. I used this in the early phases of my project for quick ideation and iteration, and later to create the User Flow Chart.
- Sketchbook and pencil: For low fidelity wireframes.
- Research: Extensive research was conducted with comparative analysis and reading.
- Milanote: I used this for organizing my mood board and blueprints in the early phases of my project.
Creative Process
The more I played Shinsekai: Into The Depths, the more I became enamoured with it. The soundtrack to this game is available for purchase, and was composed by Chikara Aoshima. As a musician, when the music is as captivating as Shinekai’s is, I am engrossed in the game that much more, and I have even more respect for the team that made it happen. I cared more about the game once I read that the creators of the game wanted to capture the underwater sounds properly. To do that, their team recorded creaking ice in deeply frozen lakes. This kind of attention to detail is felt throughout the game play. So, if a player puts the game down and doesn’t go back to it because the user design isn’t as well designed as the rest of the game is, then isn’t that a shame? What if I were someone who could solve a problem like that? Then all that hard work and dedication to a masterpiece such as Shinsekai: Into the Depths, would not go to waste. Not that it did, the game is a success internationally. However, I wanted to learn about Game UI & UX. This was the game I chose to learn it on.
The process began with creating a problem statement so I was clear about what my goal was:
How might I re-design the UI for Shinsekai: Into the Depths, to be a more user centric experience during game play?
Phase 1: Research
UI and UX in Game Design are vast topics. I knew I needed to start with copious amounts of reading, and making notes as I went along. Extensive research was needed for this project.
To start, I needed to:
- Identify and make a list of the pain points (design problems).
- Next I needed to prioritize the information by sorting them by importance, meaning and how often they need to be displayed.
- I would have to complete a customize a Game User Journey Map for Shinsekai: Into the Depths.
User Research
To understand the pain points and areas to be reconsidered of the game in its current design, I researched reviews online for this game. The criteria I used for the reviews would that they’d need to be unbiased to supply me with information that would be otherwise difficult to obtain. Here are a few that I used to help me make my design decisions:
Pain Points
- “The menus are cumbersome to navigate.” J. Friscia
- “There are so many different items to pick up in the game that all appear in different menu tabs. It can be difficult to keep track of.” “Nintendo Enthusiast”.
- “Equal parts terrific and annoying”. JeuxActu
- “The design feels washed out”. E. Hunt
Competitive Analysis
Comparative research is important in design, so I used other games and artwork to refer to. I compared maps, health bars, navigation bars, menus, all of it. I wanted to see what was already working in games that had clear Game UI.
Below is how I began to map out the redesign of the UI & UX for Shinsekai: Into the Depths.
Game User Journey Map and User Persona
User Flow Chart
Next, I needed to create an order to what I was going to change in the game. To do that, I would need to make a Game User Flow Chart.
Style Tile
The Style Tile contains the fonts, colours, and general look of the project. I had to establish these elements before moving onto sketching.
Phase 2: Design Process
Sketching Low Fidelity Wireframes
For this stage, I needed to establish which screens I would be redesigning. Then I would need to sketch out a vague blueprint.
Phase 3: Final Deliverable
I was ready to move onto mid fidelity, then high fidelity and finally clickable prototypes.
Below are the screens I designed in Adobe XD. I haven’t included all of the screens I designed because I will go into more detail in the video below these images.
Displayed is the original design by Shinsekai on the left, and my design on the right for comparison.
I have created a video to demonstrate the screens with a clickable prototype.
Usability Testing
I conducted usability testing with a mix of people to get a variety of responses.
This was a difficult test to run without the screens being part of the game, so I did an A/B test of the original Shinsekai screens, compared to what I designed and asked specific questions about both.
The results were as predicted. People appreciated the function of the new designs, but liked the beauty of the original designs. Without being able to demonstrate the new design in real game play, they could not see the effect it would have on their experience. In addition, because I did not have access to the developers, I was unable to make changes that looked the way I had envisioned them.
Key Takeaways
Being the sole person to work on the redesign of this game user interface, I expected a lot from myself, without having the time, budget or access to the original artwork.
The general conclusion of my User Testing was that my design choices would make positive changes in a person’s experience playing Shinsekai: Into the Depths.
Reflection
What were my goals, and did I meet them?
My main objectives were all met for this deliverable. I had set to complete and accomplish several tasks, which I made a project plan for with a schedule to abide by. In summary, I completed the following:
- Researched UX & UI Design for game design extensively.
- Defined a problem statement in the form of a question to understand my main task.
- Identified UI pain points with the game I chose to redesign.
- Created a Journey Map ( what the player is thinking, doing and saying).
- Sketched Wireframes.
- Made a User Flow chart.
- Determine fonts, colours and design.
- Created a Style Tile.
- Explored the software Unity.
- Attended a User Research for Game Design lecture.
- Made a clickable prototype in XD.
- Ran user testing research studies.
- Recorded audio and video for a demo of my clickable high fidelity prototype for Shinsekai: Into the Depths.
Challenges:
Reflecting back on this project, I know that my greatest challenge was to create new designs, when I did not have the original assets to work with. Looking to the future, I hope to work with the artists and game designers. That is really the best way for this type of project to have the proper result.
What I Learned About UX and UI Game Design:
Video games have always had a steady, constant presence in my life. Video game have represented comfort and escape. One thing that I hadn’t realized until lately, is that I always have had an eye for what works in visual graphic user interface, and what does not. I think we all inherently have a sense of UX and UI design, because if there are too many steps to do something, or the game doesn’t flow well, or even when it’s too difficult to understand how a map works or what the ‘little arrow’ on the right means, we all can get frustrated with the game. What I have learned, is that good UI & UX design can allow a game to be played the way the game developer intended it to be played. It can make the difference between making a video game worth playing at all. I also learned about The Fourth Wall in game UI. It is the imaginary barrier between a player, and the game itself. It is my goal to merge the space between the game designer’s vision and the player’s experience.
What Did I Learn About Myself?
I learned that I am a determined learner, and I will keep digging to understand anything if given the chance. In this case, I found that I was given the opportunity to unravel some of the many layers of UX & UI Game Design. Shinsekai: Into the Depths, allowed me to take a dive deep into the ocean, and explore to my heart's content. The possibilities are endless in game design. I wanted to find out if I could offer anything to User Experience and User Interface in game design and it turns out, that my determination to want to see something worthwhile thrive, is far greater than it would have been to stay in my comfort zone with what I already knew about UI & UX design. Moreover, self directed learning and time management are two skills that I have had the opportunity to hone during this project. I hope that my UI and UX design skills will make people’s game experience an even better one in the future.
