This project, completed during my internship as part of my studies, involved rebuilding a website for a museum exhibition in collaboration with two teammates: Wing Lam Stephanie and Natchanon Mahaittidon. The exhibition, presented inside an arcade machine, showcased 3D models created by students using photogrammery. Our main objective was to enhance both the design and performance of the website, which loaded slowly at the time. To address this, we designed a user-friendly interface and implemented the 3D models using Google’s Model Viewer API.
Since the client requested to have arcade elements in the redesign, the first step was researching arcade related UI styles. We also explored who was Max Headroom, as we needed to include references of him in our design. Our team gathered several pixelated, arcade and retro-browser elements in FigJam to assist in the inspiration process. Ultimately, I opted to design a hybrid between modernity and arcade for our UI.

With the research step completed, I began the redesign process. The UI was created with user-friendliness in mind, using high contrasts and easily identifiable buttons to help people of all ages navigate the website. The design itself was heavily arcade inspired, incorporating colours and fonts given by the client. Once my design was completed, our team built the website using HTML, CSS, JS and Node. Due to the limitation of having the website accessible only through the arcade machine, a responsive website was not needed.

While designing, we had the challenge of integrating the 3D models into the interface. Since the user had to be able to freely interact with the models, rotating, zooming and moving it, they received a lot of space in the website. The right side of the screen was used to show information, but it could be minimized to allow for even more space for the model objects. Certain objects had more information than others, so a light box was used to ensure that the layout was never too big to fit the screen.

In the end, the project was well received by the client. Due to the constant stream of communication between our team and the client, we ensured that all requirements were met and that they were satisfied. The project has has yet to be implemented in the museum, but we are certain it will be a success among the museum’s visitors.