A self-initiated project developing skills in; WordPress CMS, Content Design, HTML/CSS.A pain point that drove me to initiate this project is; a visible skill gap in WordPress and CMS platforms, as well as wanting to practice more of HTML/CSS. This allowed me to experiment with the varying constraints between a CMS and HTML/CSS in creating a website.
Content Theme & Target Audience
The website content theme is Studio Ghibli; a Japanese animation film studio with globally renowned works such as Spirited Away and My Neighbour Totoro. I was drawn to this theme due to my own interest, and I felt inspired to write content about it.
The target audience of Studio Ghibli tends to be less demographical and more behavioural, as their films appeal to both children and adult audiences, despite being animation films. As a result, the target audience of my website is as follows;
- People who enjoy animated films
- Existing fans of Studio Ghibli who want to learn more about its history, most iconic works, or their most recent work; The Boy and The Heron
- People who want to learn more about Ghibli Park
Creative & Content Inspiration
My research looked into the inspirations of visual aesthetic and written content (topic, language, tone of voice) that allowed me to come up with subjects for the website’s subpages;
- History of Studio Ghibli
- Most famous/iconic works
- The Boy and The Heron (most recent work in 2024)
- Ghibli Park
WordPress website & APIs
I utilised the free template Kigen, customised to suit my content, using the gallery view to display various film posters on the homepage.
Several APIs were incorporated into the website to integrate features, including a Spotify music player, YouTube video player and maps.
HTML/CSS
Recreating the website through code enabled me to work beyond the restrictions of WordPress and its theme, coding from scratch instead of using Bootstrap also allowed me to develop technical skills in HTML/CSS, such as utilising media queries for responsive design.
I also made sure accessibility principles are implemented across both the WordPress and HTML/CSS websites; active class, alt text, colour contrast
However, hard coding means that I was only able to host the website locally on my device, unless relying on external platforms such as GitHub. This is a key takeaway setting HTML/CSS apart from CMS platforms.
User Testing
Concurrent Think Aloud testing was used to test the WordPress website, to determine how changing certain contents can impact the overall user experience of the website. This method was selected as it provides reasoning behind user behaviour and allows a deeper understanding beyond just observing the user’s interaction with the product.
The user was asked to amend parts of the web content to anything of their choice, specifically; a headline, 2 images and 1 paragraph.
The testing showed that content disruption resulted in substantial content inconsistencies, affecting the storytelling, content narrative and overall usability, leading to potential confusion and disruption in the user experience of new users/site visitors. The broken content can also result in the website being perceived as untrustworthy or illegitimate.
This project allowed me to develop knowledge in CMS and APIs, specifically WordPress, and explore Content Design, specifically writing and curating short blog-style content.
mayvira's portfolio 