Interactive Design / Project 2 ：Website Redesign Prototype

Interactive Design – Project 2 ：Website Redesign Prototype

4 November 2025 – 26 November 2025
Student: Ge Xianjing (0377636)
Programme: Bachelor of Interactive Spatial Design (Hons), Taylor’s University

 Project Brief

INSTRUCTIONS
This is the Module Information Booklet for this module:

Interactive Prototype – Design Reflection & Development Summary 

Original website   https://rkfineart.com/

PROJECT 1--Website Redesign Proposal


For this assignment, I developed a fully interactive prototype for the redesigned Richard Koh Fine Art (RKFA) website. The goal of this redesign was to modernize the gallery’s visual identity, improve usability across key user journeys, and present core information—such as exhibitions, artists, and contact details—in a cleaner and more structured way. Using Figma as my primary prototyping tool, I created a set of functional pages that simulate real user navigation and demonstrate how the redesigned interface enhances the overall digital experience.

Design Decisions

In the early stages, I spent a lot of time experimenting with different colour palettes and layout compositions, testing what was necessary and what felt visually redundant. I compared a darker and a lighter homepage version to find a balance between gallery atmosphere and readability. Originally, I planned to add a separate “Publications” page to the main navigation, but considering the workload and its lower priority for this project, I decided to remove it from the top menu. Instead, I relocated publications to a smaller “Other Information” section at the bottom of the homepage, so the content is still accessible without distracting from the core structure of the site.

First layout adjustment

  • Color test
First color test

Second color test

Finally determining the color palette

  • Text styles
Text styles


Finally layout 



Home Page – Establishing the Visual Identity

The redesigned Home page uses a calm, neutral color palette with generous white space to reflect the refined tone of a contemporary art gallery. A large hero banner introduces the gallery environment, followed by organized content blocks such as About the Gallery, Featured Exhibitions, and Highlighted Artists. These sections help users immediately understand the gallery’s identity and current activities.
Interactive elements include clickable exhibition cards, sliding image components, and a functional navigation bar that allows users to switch between pages seamlessly.

Home Page

Core Content Page – Exhibitions

For my main core page, I selected Exhibitions, because it represents the central function of any art gallery. The page is divided into clear sections: Current Exhibitions, Upcoming Exhibitions, and Past Exhibitions. Each entry includes an exhibition poster, description, dates, venue, and a “Learn More” button that leads to a dedicated detail page.
I also designed filter buttons (All / Current / Upcoming / Past) to demonstrate how users can organize content efficiently. These filters are interactive within the prototype and help illustrate realistic user flow.

Exhibitions page

Exhibitions Content Page

Artists Page – Supporting Artist Discovery

Our Art Fairs page highlights current, upcoming, and past presentations across Kuala Lumpur, Singapore, and Bangkok. Each fair showcases curated selections of artworks, offering a glimpse into the gallery’s evolving program and its commitment to promoting Southeast Asian contemporary art on a global stage.

Artists Page

Artists Page – Supporting Artist Discovery

The Artists page adopts a card-based layout that displays each artist’s portrait, a short biography, and a link to view the full profile. I added filter options for Location, Category, and Alphabetical Sorting so users can explore the artist list in a structured manner.
This design improves discoverability and supports one of the site’s main objectives—helping visitors understand the breadth of talent represented by the gallery.

Artists Page

Artists Content Page

About Page – Strengthening Brand Narrative

The About page focuses on conveying the gallery’s mission, history, and regional presence. It contains visually rich sections such as “Inside the Gallery,” “Our Mission,” and a horizontal “Gallery History” timeline featuring images of exhibitions and gallery interiors.
This page helps build trust and professionalism by offering context about the gallery’s growth and contributions to Southeast Asian contemporary art.

About Page

Contact Page – Practical Interaction Design

To show functional user interaction, I created a well-structured Contact page that includes:

  • A user input form (email, name, message)

  • Two “We Are Here” sections for Singapore and Bangkok

  • Embedded map previews

  • Contact information and working hours

Users can click form fields, browse locations, and interact with the layout as if navigating a real website. This fulfills the requirement to demonstrate interactive form elements.

Contact Page

UX Considerations & Design Decisions

Throughout the design process, I focused on:

  • Clarity & hierarchy: neatly organized content blocks with consistent spacing

  • Consistency: unified fonts, icons, colors, and layout structures

  • Navigation simplicity: persistent header for quick page switching

  • Interactivity: hover states, clickable buttons, image carousels for realism

I chose a soft color palette, minimalistic layout, and refined typography to align with RKFA’s contemporary and elegant tone.


Layout

Teacher’s Feedback

Visual Styling

  • Do not add outlines around images or components.

  • Remove unnecessary decorative elements, such as the star icons.

  • Keep the page clean, minimal, and uncluttered.

Title text is composed of solid characters

Background introduction, unnecessary graphics have been removed

Images & Media

  • The first image should be displayed at a proper, consistent size.

  • When asked, remove images or sections that do not contribute to the design.

  • Background images are not allowed—use a clean, solid background instead.

  • No need to add additional images unless necessary.

The pictures are not stacked together

General Comments

  • The overall design is good and most parts are working well.

  • Only minor adjustments remain; the majority of the layout is acceptable.

  • Continue refining on your own and send My e-portfolio to the teacher as requested.


Prototype Outcome

The final prototype meets all requirements of the assignment:

  • Home page

  • Core content page (Exhibitions)

  • Contact page

  • Additional supporting pages (Artists, Art Fairs, Exhibition Detail, About)

  • Interactive navigation, transitions, and clickable components

The prototype successfully demonstrates a cleaner structure, improved readability, and a more intuitive experience for gallery visitors exploring exhibitions and artists online.


Prototype  Navigation Click Jump 1.1

Prototype 1.2

Prototype scrolling playback image 1.3


Figma Mode Link


Figma Prototype  Link


Overall Reflection & Conclusion

Throughout the redesign process, this project allowed me to strengthen my understanding of layout structure, visual hierarchy, and user-centered thinking. By analysing the original RKFA website, I identified areas that could be improved—such as information clarity, navigation flow, and visual consistency. These insights guided my decisions as I developed a cleaner, more coherent interface that aligns with the identity of a contemporary art gallery.

Creating multiple versions of the homepage taught me the importance of iterative testing. Each variation helped me evaluate colour harmony, spacing, and typography, ultimately leading to a more refined and balanced final design. I also learned to prioritize essential content: instead of adding too many pages or overloading the navigation bar, I focused on presenting the most relevant sections clearly, while secondary content was simplified or relocated to maintain usability.

Building the interactive prototype in Figma was an important step in translating static layouts into functional user flows. Adding transitions, clickable buttons, and interactive filters helped me better understand how users would navigate through the site and what design choices improved or hindered the experience. It also made me more aware of responsive behaviour and how visual decisions influence real interaction.

Overall, this project strengthened my skills in both UI design and UX reasoning. I learned how to make practical decisions, balance aesthetics with functionality, and consider user needs more thoughtfully. The final prototype reflects not only a redesign of the RKFA website, but also my growth in problem-solving, visual communication, and digital prototyping.

Comments

Post a Comment

Popular posts from this blog

Performative Media / Week learning

Image
Performative Media / Week learning September 23, 2025 24.09.2025 - 2025 / Week 1 - Week 4 GeXianjing / 0377636 Performative Media / Bachelor of Interactive Spatial Design (Honours) Week 1 — Introduction to Performative Media Human–Space–Media Interaction This week marked my first class in Performative Media . The lecture focused on exploring how humans, physical space, and media can interact with each other, transforming the audience from passive viewers into active participants. We were also introduced to TouchDesigner , a node-based visual programming software that allows creators to design real-time visual and sound experiences through sensors like cameras, microphones, or motion detectors. It feels like “programming with LEGO blocks” — logical, yet highly creative. We explored inspiring examples such as Team Lab’s immersive installations and OK Go’s robot per...
Read more

Game Studies /Exercises 1 :My favourite video game

Image
Game Studies Exercises 1 : My favourite video game/table top game & what makes this game playful Starting from 12.2024 4.2025 -8.2025 / Week 1 - Week 14 Ge Xianjing / 0377636 Game Studies /Bachelor of Interactive Spatial Design (Honours) Exercise 1 🎮 【Strategy, Style & Shenanigans】Why Teamfight Tactics: 金铲铲之战 Is My Favorite Game 🧩 Introduction: A Game That Keeps Me Coming Back Even when I haven’t played for a while, there's one game that always pulls me back like a magnet — Teamfight Tactics (金铲铲之战) . It’s not just about winning or losing — it’s about thinking, adapting, and watching chaos unfold on a tiny digital battlefield. If you love games that mix brainpower , visual style , and a dash of randomness , welcome to your new obsession. 👑 When Legends Collide: The King of Glory Crossover One of the most exciting updates in 金铲铲 was the crossover with King of Glory (王者荣耀). Imagine seeing familiar heroes like Luban No.7 reimagined as adorable “Little Legends”...
Read more

Application Design II /Task 1: App Design 1 Self-Evaluation and Reflection

Image
Application Design II /Task 1: App Design 1 Self-Evaluation and Reflection Starting from 12.2024 4.2025 -8.2025 / Week 1 - Week 14 Ge Xianjing / 0377636 Application Design 2 / Interactive Space Design Task 01: App Design I — Self-Evaluation and Reflection To-Do List : Write a reflection on the redesign work of the Baidu App Identify elements to change and update Final Report: Baidu High-Fidelity Prototype Modifications Name: Ge Xianjing Major: Interactive Space Design Project Title: Baidu Interface Redesign and High-Fidelity Prototype Background and Premise In the previous semester, my design project focused on improving Baidu’s user experience by redesigning key functional interfaces, such as hotel booking, personal information editing, and route planning in Baidu Maps. Based on early low-fidelity prototypes, user testing, and teacher feedback, I created a high-fidelity prototype using Figma, and implemented a series of visual and interaction enhancements. Key Modification...
Read more