Kingdom Hearts: Chain of Memories is an action role-playing video game made for the Game Boy Advance in 2004. It bridges the gap between Kingdom Hearts and Kingdom Hearts II. The game is known for its unique collaboration between Disney and Square Enix.
The game doesn't have a website or app to promote the game besides a Wikipedia page.
The goal is to understand what would be effective in creating a positive experience with the end-to-end mobile application to ultimately convert into a purchase for the game.
This application will include Kingdom Hearts: Chain of Memories envisioned as a version that was recently made for the Nintendo Switch.
Understanding what users want and expect when they see a new game would help with creating the positive experience for the end-to-end mobile application.
So, I recruited 6 participants for my user interviews. My participants were:
Within the interviews, I wanted to gather more knowledge on:
The user interviews helped pinpoint what would be best to include into the mobile app to convince users to purchasing the game.
Below are the key takeaways:
Strengths of Kingdom Hearts
Entry Barriers to Kingdom Hearts
Influences for Game Purchasing
Website Design
What DOES work
What DOESN'T work
Researching and analyzing other competitors helped spark inspiration for what to consider putting into the mobile application for Kingdom Hearts: Chain of Memories. I viewed Animal Crossing: New Horizons, Legend of Zelda Breath of the Wild, Megaman Battle Network, Final Fantasy X | X-2, and Persona 3 Reload.
Presenting enough information is key for a user to help them make their decision of purchasing the game. The mobile application needs to best match the game's design while still making it a fun experience for learning about the game without including any spoilers.
Point-of-view statements will help establish how we can design to create the best experience possible with the mobile application. The “How Might We” questions pushed our focus further on how we can tackle specific areas of the design we create.
I created two user personas for Kingdom Hearts: Chain of Memories. One represents a consumer who is brand new to the Kingdom Hearts franchise and doesn't play video games as often. The other user represents a consumer who is a fan of the Kingdom Hearts franchise and plays video games frequently. The personas may have varying expectations they have for games, but they have a main focus of trying to get the most enjoyment from a game.
When making the mobile application, I categorized my design goals and tasks by Must-Have, Nice to have, Surprising and delightful, and Can come later. These are what I prioritized for the end-to-end application:
Once the main design goals are incorporated, it would also be nice to include a Worlds Showcase, Reviews, and a Scroll to Top Button to further enhance the mobile app experience.
To better lay out what the end-to-end mobile application would potentially look like, I created a site map.
I went further in depth with the layout of my mobile application with user flows. You can see the flow for the pages:
Kingdom Hearts: Chain of Memories had a complex UI Library. It involved a lot of images gathered from Google Search, all which are cited within file. However, I got to dabble with some creation for the assets as well, such as recreating some of the designs that are widely recognized from the series. It was fun and challenging, since it involved a lot of component variations compared to my other projects!
Below are my lo-fi wireframes for the Homepage, Character Showcase, and other pages from my feature roadmap.
There was a lot of work that went into creating the mid-fidelity wireframes. See how I designed the Homepage, Hamburger Menu, Timeline, Characters Showcase, Media Tabs, Gameplay Features, Specs, Community (formerly Share), and Buy Now pages.
I did a usability test for my hi-fi wireframes with 5 participants. All tests were conducted online via voice chat and screenshare.
Before obtaining input on the mid-fidelity wireframes, I wanted to understand where participants fell with their gaming experience. I asked questions that centered around:
The usability test consists of gathering interaction responses and thoughts for the following tasks:
Learn About the Game's Story
See What is Unique About the Game
Purchasing the Game
Learn About the Game's Characters
See if the Game is a Good Fit
Explore What the Game Has to Offer
Researching and Getting Connect
The participants were also asked to rate the tasks they had just done on a scale of 1-5. Their feedback would help me see if the pages within the mobile app are helpful and create the best experience for them to ultimately purchase the game.
Note: The scale of 1-5 has 1 = poor experience to 5 = very positive experience
I wanted to make sure the mobile app provided the best experience possible to encourage the purchase for Kingdom Hearts: Chain of Memories.
See below for how I created the experience in my high-fidelity wireframes.
NOTE: All usage of official game images are cited and can be found within the Figma file
The Homepage for Kingdom Hearts: Chain of Memories allow a user to click anywhere for what they may be curious about. Initially, they can also follow along the format of what is being presented for learning more information.
Each section shows a preview of what the page will entail. To proceed further, they can simply click on the call-to-action buttons available.
At the bottom of the homepage, the action to "Buy Now" is reinforced.
Besides the Homepage being the user's roadmap to learning more about the game, the Hamburger Menu was designed to help the user reach where they would like to go as well.
The Hamburger Menu draws strong inspiration from Kingdom Hearts: Chain of Memories' loading screen!
For new fans to get a better grasp of the Kingdom Hearts franchise, they can directly go to the pages to learn more about:
The details written omit any spoilers, yet it still creates enough mystery to make a user want to purchase the game to find out more.
The Timeline is provided to recap previous games while introducing the later Kingdom Hearts games to a user.
It allows for a new fan to catch up with the franchise and eliminate the daunting feeling of getting into the series.
The current fans can also visit and read up on this page themselves if they need a refresher!
In the Character Showcase, I wanted to incorporate the character portraits and sprites that you see in-game.
I thought it would be fun to have it interactive, so it will "react" as you select a character!
This helps the user become more familiarized with the game's graphics, done in an innovative way.
Even with this section with the character reveal, I did my best to ensure there were no spoilers involved.
In its simple layout of tabs, the Media page exposes the users to more of the game's contents. The four tabs included are:
Users can better dictate their video game purchasing decision if they can see that the game aligns with their interest. These categories help users find what they prioritize more quickly.
To highlight the game's unique features, a Gameplay page was made. It includes:
The design of the Gameplay page also reflects a close resemblance to Kingdom Hearts: Chain of Memories in-game interactions. The users really get a taste of the game this way!
Since reviews and social media involve participation of fans of the Kingdom Hearts franchise, it felt right to refer to this page as Community.
Some users rely on reviews before they fully commit to purchasing a game. Here, they can find critic reviews, videos of other players' reviews, and how they can search for the reviews on Kingdom Hearts' social media.
Since the Kingdom Hearts series makes their games on multiple platforms, it would be best to include a Specs page.
The Specs page will inform users if this game is a good fit for them, since they can see if their current device or console is able to run the game.
This helps give power to users to make that informed decision before the game purchase.
We want users to reach the Buy Now page to make their game purchase.
However, we know that users may still be hesitant. They have important questions like price, platform availability, and available game options. We know users prize transparency.
This page informs users what they will be getting with their purchase. Afterwards, they can click their desired platform and be redirected to a retail page to buy the game.
Press play to see the experience with the Kingdom Hearts: Chain of Memories end-to-end mobile application.
I did a usability test for my hi-fi wireframes with 6 participants. All tests were conducted online via voice chat and screenshare.
Before we began testing, I wanted to gauge the participants on:
The usability test consists of gathering interaction responses and thoughts for the following tasks:
Going through the Homepage
Exploring what the Game has to Offer
Researching and Getting Connected
Learning about the Game's Story
Seeing what is Unique about the Game
Purchasing the Game
Learning about the Game's Characters
Seeing if the Game is a Good Fit
The participants were also asked to rate the tasks they had just done on a scale of 1-5. Their feedback would help me see if the added features are helpful and easy to understand without needing any further clarification.
Note: The scale of 1-5 has 1 = poor experience to 5 = very positive experience
My high fidelity wireframes gave me an idea of how well my design catered a good experience with the mobile application.
However, despite receiving mostly high remarks, my wireframes underwent another revision. I wanted to create the best experience possible.
Here is the feedback I received:
With this feedback, I sought to polish my design further to receive a more solid score of 5. The prototype you saw previously reflected all the changes from the hi-fi user testing that I conducted.
The experience provided with my mobile application design made a strong, positive impression on the participants! They were able to find the answers they sought for before purchasing a new video game. They felt strongly inclined to purchase Kingdom Hearts: Chain of Memories.
With this feedback, the prototype you saw previously reflected all the changes from the hi-fi user testing that I conducted.
Overall, the experience provided with my mobile application design made a strong, positive impression on the participants! They were able to find the answers they sought for before purchasing a new video game. They felt strongly inclined to purchase Kingdom Hearts: Chain of Memories.
This project was a fun and took great effort since there were so many images and ideas to work with, but mainly I got to pour in my love for the Kingdom Hearts franchise! I got to incorporate my knowledge of the game within my design. It was interesting to envision and plan on how I can emulate the game's experience into my design.
During my research for mobile app layouts, I learned that there were so many different ways to advertise a game. Design really matters! I felt all the knowledge I had from previous projects, were perfectly encapsulated in this project. All of my work in Figma during this project was a test more of consistency. There was so much to edit! I made sure to do my best to keep it organized too.
I also did more user testing this time around, and I was very fascinated with the responses I got. I felt that it further reinforced the importance of doing multiple tests. If I had more time, I would've done another test for my final, polished iteration!
Thanks to this project, I hope to get opportunities to dabble more in designing for the entertainment industry in the near future.