Studio Ghibli was founded in 1985 by Hayao Miyazaki and Isao Takahata. Their films explore themes such as war, man vs. nature, and identity and do so in an honest way. Miyazaki captures the raw human emotion through his attention-to-detail style of animation, making it second nature to empathize with each character.

Recently, there’s been a resurgence in Studio Ghibli popularity due to their movies becoming available on HBOMAX, a new streaming service. Studio Ghibli’s current website is outdated and lacks the magical experience their movies create for viewers.

Studio Ghibli wants to change this. They want fans and newcomers to be captivated by the content offered on the website through beautiful visuals for each movie, a library of Studio Ghibli assets fans can download, and a CTAs that lead users to platforms where they may stream their movies and soundtracks or purchase digital copies.

The purpose of redesigning Studio Ghibli's official webstite was to redesign the UI and interactions in a way where the site resonates with users in a similar manner as their movies, while maintaining the current brand image. Since the official website currently acts more as a promotional inforamtion hub than a marketplace for their products, it was important to focus on the sense of immersive realism that their movies consistently embody and bringing the website to life. In order to do this my research consisted of two primary phases; Moodboarding and Asset management.

Through the capabilities of Framer, it was possible to combine deliverables from both the Interaction design phase with the UI design phase.

It's important to note that I wanted to maintain Studio Ghibli's brand image while redesigning their website. In order to achieve that I used the original color palette, but avoided using any flat colors throughout the site and utilized colorful gradients and images. I prioritized visual appeal along with minimal text in order to immerse users in the beautiful worlds of Studio Ghibli. To do this, I experiemented with glassmorphism cards and other semi-transparent elements.

I began with sketching low fidelity wireframes for both the screens and the interaction concepts since functional prototypes were immediately possible in Framer. Below are wireframes of some of the main screens and the interactions within each page.

Upon further iteration and gathering valuable feedback of the wireframe sketches, I moved forward with designing high fidelity responsive pages as well as building the responsive components I planned on making
interactions states for.

Designing the screens in Framer was a slow, iterative process because I was constantly testing the functionnality of new sections, component states, and interactions. I felt it was absolutely essential to get the small details right, as Studio Ghibli films never fail to do. Below are a few examples:

Designing the screens in Framer was a slow, iterative process because I was constantly testing the functionnality of new sections, component states, and interactions. I felt it was absolutely essential to get the small details right, as Studio Ghibli films never fail to do. Below are a few examples:

The official Studio Ghibli website isn't an ecommerce site and functions more so as an information hub to promote their movies and events. Therefore, the rapid prototype I built was focused on desigining the necessary screens for a user to learn more about their favorite movie along with CTAs that would redirect them to a streaming service to watch a Studio Ghibli movie or listen to a movie soundtrack.

Although many interactive components ultimately didn't lead users to to a destination, it was important to bring each screen to life and go beyond just the necesssary functionality of the prototype.