top of page
Case Study - Kiki's Destination Service (3).png

UX/UI Case Study

Service

Kiki's

Destination

Project Overview

The web has become an important marketing space for tourist destinations. Destination websites provide a virtual interface between the place they represent and the potential traveller.

In my second semester, our Web Design unit had us develop an approach to creating a destination website of our choice, with the aim to showcase, teach and enhance the places culture and community. For this, my chosen destination was a little museum tucked away in the city of Japan, Ghibli Museum.

Team

Sole Designer

Tools

Figma

HTML + CSS

Javascript

Timeline

Aug 2022 - Nov 2022 (University Project)

Problem

How might we design and develop a destination microsite that promotes Ghibli Museum and highlights the place’s unique culture and community?

Goals

  • Shed light into the history and culture that inspired the creation of Ghibli Museum

  • Provide users with easy-to-read information on events and exhibitions held at the museum

  • Make the locating ticket-provider process more findable and accessible.

Solution

My solution provides users with the option to navigate different pages of the site to accommodate different purposes. With this solution, users will be able to access the site regardless of the type of device they are using to have a chance to learn more about Ghibli Museum and the steps they need to take to visit the location.

Design Process

I was determined to create a site that met the needs of my users. For that, I did background research to have a better understanding of the location and identify who the target users were for my website. Online ethnography was conducted to identify certain topics brought up by users regarding Ghibli Museum. This helped me to target some problems to narrow down for the website. This was followed by a competitor analysis to pre-existing destination websites to evaluate current trends and call-to-actions. 

Online Ethnography

Taking a dive into existing forums and reddit threads to gather a contextual understanding of the geographical location and user insight.

Screenshot 2023-01-12 115003.png
Screenshot 2023-01-12 114843.png

Competitor Analysis

Comparing features of current and existing destination websites. My biggest competitors were the Ghibli Museum Official Website and Visit Finland.

Logo 1.png
Logo 2.png

Key Findings

From this, I identified certain issues including, but not limited to difficulties in finding information on where to purchase tickets and what the location offered for visitors. By doing a comparison and analysis of four different destination websites, I was able to narrow the most important features that I needed to consider when making my site. A website's style and call to action features were notions that I needed to keep in mind. 

Ideation

Ideation was the next step which required me to develop a solution to the problems I discovered through research.

Sketches

Draft concept sketches for the website were illustrated in accordance with the key insights that were discovered. Users wanted clearer information into the location, thus 4 pages were created to meet their needs; Home, About, Ticket and Location.  

Sketches For Web Design
Sketches for Web Design

Low Fidelity

For low fidelity, I sketched out the website and mobile device layout and created black, grey and white screens on Figma.

Wireframe for Web Design
Wireframe for Web Design
Wireframe for Web Design
Wireframe for Web Design

Visual Design & Branding

In order to move onto my high fidelity prototype, I had to create a brand guide & moodboard which involved testing different typography, imagery and colour palettes to suit my website. For this I also took into consideration opinions from users online to help build the guide. 

I wanted to epitomise a sense of nostalgia and calmness with my website. Many fans of Studio Ghibli express these very feelings when watching the movies therefore, I wanted users to gather the same feelings when viewing my website as they do with the movies.

Visual Design and Moodboard

High Fidelity

High Fidelity Prototype

User Testing

User testing was conducted with 5 different users who were given prompts to follow as they navigated through the website. Towards the end of the session, users gave feedback on how the site could improve and what suggested implementations for certain features. Most of the sessions went smoothly but through testing, I discovered some changes that needed to be included.

I was asked to submit a development documentation alongside my website prototype to present my justifications for design decisions and discussions of further iterations to consider for the future. From this, I was able to receive informative feedback from my university tutors. 

Key Changes

  • Limit number of text on screens as users expressed having too much would make them lose interest font and button in the mobile version as the original prototype was too small, making it difficult for users to click.

  • Button features on the footer of the website – users weren’t utilising the features 

  • Add an animation effect on the buttons in the header and buttons for ticket page; makes CTA more clear 

  • Increased scale of the font and button in the mobile version as the original prototype was too small, making it difficult for users to click.
     

Next Steps

From the feedback I receive from my tutors, I hope to make changes to improve the responsiveness of my website, especially for mobile design. With these changes, I want to further conduct more user testing and gather insight from users on the design layout. There are also a couple of design changes I want to make that I didn't have the sufficient time to do before the submission. With these changes, I hope to improve the visuals of the website.

Reflection

There were areas where I could have definitely improved when it came to creating the website, especially in the area of responsiveness. With the increase in mobile users, making websites responsive and to be viewed on a smaller device was something that was highly taken into consideration and I believe with more practice in coding, I could improve the flow of my website to better meet my users needs and goals. 

bottom of page