Game Studio Website

A website for a client focusing on usability and responsive design

    • OVERVIEW

    About the project

    The Saikou game studio website is a client project that provides a cohesive and consistent experience across Saikou's digital platforms, fitting in with their branding. The website offers a user experience that is not only visually pleasing, but also fully optimised for every device, from phones to tablets and computers. In this project, Saikou provided Adobe XD designs for their "Home" and "About" pages, of which were referenced during the development of the website.

    WHEN WAS THIS?

    28th December, 2022

    WHAT'D I DO?

    Researched into responsive design and programmed the website.

    Tools Used

    BACKSTORY

    The Problem

    Create a visually pleasing website that offers a wealth of content for its visitors to explore, including history, values and studio mission.

    The client had reported that many of their community members were either unfamiliar with their history and values, or haven't heard of them at all. Providing a website that can neatly include this information aswell as outlining their games would be an ideal solution.

    Design & Implementation

    The solution backed by research.

    FEATURE ONE

    Landing Page

    The cohesive design of the home page aligns perfectly with the provided Adobe XD designs given by the client, and instantly provides the visitor with a brief overview of what Saikou is as soon as they launch the page, as well as a call-to-action button prompting them to view the games offered by Saikou. The inclusion of statistics in the home page (further down) gives real results and history behind the studio, all of which responds correctly to resizing of displays.

    FEATURE TWO

    Live Playing Count

    Relying on the Roblox API to fetch the playing count of the games offered by the studio, live playing counts can be displayed on the website to give the visitor visual feedback as to how successful the game is currently doing. API spam has been considered and as such, playing counts are linked to a MongoDB database which updates with the playing count of the game every five minutes.

    FEATURE THREE

    Hover Effects

    The utilisation of animations when hovering over certain elements such as buttons or social media icons provides extra flair and more importantly a discernible reference as to whether the button/link can be interacted with. The fade in/out animations when hovering over links and buttons creates a more seamless experience in comparison to rapid colour changes that can look visually unappealing.

    Seeing Results

    After the launch of the Saikou website, it became immediately obvious that it had a positive impact on its community, with thousands of unique visitors each month according to Cloudflare's built-in monitoring tools. Statistics recorded the year of 2022.

    Apr-May

    3.58k visits

    Jun-Jul

    3.42k visits

    Aug-Sept

    2.97k visits

    REFLECTION

    Project Learnings

    1. Accessibility is everything

    As the target audience for the studio website can be visitors of various devices, it was vital that the accessibility of the website was top notch, therefore a key consideration had been made towards making the website accessible for all devices in order to prevent a poor user experience and loss of website visitors.

    2. Communication is key

    It was important during the development of the studio website that communication with the client occurred. This allowed aspects of the website that were a grey-area to be clarified, amongst gaining feedback on the current progress of development to make alterations and further revisions.

    3. Follow the designs

    As the client had given Adobe XD designs for both the "Home" and "About" pages, it was crucial that during the development of the project that it kept in-line with the designs set forth. Anything that couldn't be done to the referenced design document was discussed with the client as to not come as a surprise during the final delivery of the project.