Kingdom Hearts 3
Design // Web, UI/UX, visual, interaction
Year // 2020
Tools // Adobe Illustrator, XD, After Effects, Photoshop
The challenge
This was a personal project I made for myself to redesign the Kingdom Hearts III website. The Kingdom Hearts series is a vibrant, colorful video game series with a complex story that I loved growing up. I waited 14 years for Kingdom Hearts III to be released but their current website is a bit disorganized and lacking an aesthetic that is reflective of how simple and clean the game UI is. I wanted to improve both the structure and the look and feel of the website.
The process
The process started with evaluating the current website and seeing where I can add improvements and doing some sketches to try to come up with a few new layouts.
Kingdom Hearts has always been a series involving the traveling to other worlds. I wanted to create a full screen experience to emulate that kind of world immersion for the user. I sketched out a few preliminary layouts, and then moved on to wireframing in Adobe XD to try to establish a more solid layout. I also created a small design system based on colors the franchise seems to use the most.
The current navigation bar has over 10 different options and could be overwhelming to the user. I wanted to decrease the number of items in the navigation bar, only highlighting important topics, and highlight the Buy Now call-to-action. I also wanted to create a better experience for a user to view screenshots of the game and get an adequate introduction to characters. I began to play with a few ideas I had about how objects would animate on screen after user interaction.
The final result
I decreased the amount of menu items, removing the patterned background and adding more full screens, and bolder elements allow for a clean and immersive website experience, as well as created some examples of some animations the user could experience.
