MÉTIERTOPIA: A Story-Based Interactive Website

Introduction

MÉTIERTOPIA is a story-based interactive website that depicts the career-changing journey of the story's main character. As the story progresses, users will get to know the usual doubts and indications of one who yearns for a career change. Will the main character be able to find a new career that suits his passion along his journey, or will he remain directionless for the rest of his lifespan?

Project Insight

According to a recent survey, 32% of those aged 25 to 44 have considered a career change within the last year, with 29% of people having completely changed fields of work since starting their first job after college. Among the main factors for these career changes include the desire for a salary increase, as well as having an interest in a different field.

Objective

This project aims to convey the message that it's never too late for a change in one's career direction and, hopefully, somewhat reassure those that might have a desire to change their careers. The project is also a form of self-expression, as it alludes to my personal experience of changing careers from being a former Mechatronic Engineer to becoming a digital media design student at The One Academy Penang.

Part I: The Design Process

Ideation

The design process essentially started with the task of coming up with a rough concept for the project, which includes the project title, the characters/setting of the story, as well as a draft of the website's story.

From the rough concepts, a gear-inspired theme which combines both steampunk and futuristic elements was decided for the project. This was due to the fact that gears (an element that is heavily associated with the steampunk genre) can often be found within the robotics field of Mechatronic Engineering, which in turn led to the idea of having the characters of the story be sentient robots. Based on these ideas, a moodboard was formed using a collection of images that are related to the steampunk genre:

The ideation process was then followed by a few rough sketches to somewhat visualize the design of the characters, locations and concepts:

A storyboard was also created based on the completed draft of the story plot, which will subsequently be used as a visual guide during the production process of the website's assets.

Character Design

As stated during the ideation process, the characters for the website's story were decided to be sentient robots, i.e. robotic characters with the ability to perceive, feel and emote.

With the concept for the character design finalized, all characters that make an appearance within the website's story were subsequently created:

Background Scene Design

Background scenes were designed based on the completed storyboard, with the entire story mainly taking place in two major fictional locations: Scientia City and the Town of Virtuose.

Part II: The Interactive Scrolling Website

The development of the interactive scrolling website started with the creation of story chapters based on the storyboard and listing down a site map to determine the number of webpages that are required for the website.

With the concept idea finalized, assets for the website's layout were then created. Below are the initial versions of the webpages which has a more vintage appearance to match the steampunk theme.

Certain feedback regarding the webpages indicated that the vintage newspaper look of the website contradicted with the futuristic design of the robot characters. The solution for this issue was to incorporate more futuristic/mechanical elements to the webpage layouts while also retaining the local newspaper idea for the story pages:

The completed assets were then exported and incorporated into the coding of the website though Visual Studio (VS) Code. To implement the scrolling website function, the LottieFiles plugin for Adobe After Effects was used to export any completed animations as .json files. The .json files were then coded accordingly as part of the webpage, thus allowing the previously exported animation to be scrolled on the designated webpage. Below are some of the final webpage designs for the Métiertopia website:

Below is a video walkthrough that showcases all pages and functions of the interactive scrolling website:

Part III: The Physical Artefact

The development of the physical artefact started with the ideation process, concept sketches and listing down the interaction steps to get an idea of which electronic components to use for the overall artefact:

The ideation process is followed by the fabrication of plywood parts, which is done through the use of a laser cutting machine. The fabricated parts were then assembled for the installation of the electronic components.

Below are some photos of the physical artefact(s):

The video walkthrough below showcases the function of the physical artefact, where pressing on the provided buttons would initiate audio recordings to be played:

Project Showreel

A project showreel was created to showcase the entire project from the interactive scrolling website to its accompanying physical artefact:

Thanks for Checking Out My Project!

And special thanks to my lecturer, Leong Wai Khong, for the constructive feedback and assistance provided throughout the span of this project, notably suggestions regarding certain refinements during the asset production and web coding process, as well as providing weekly access to the fabrication lab.