top of page

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.








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


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.


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




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.

High Fidelity

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