Interactive Design - Project 2

-

INTERACTIVE DESIGN - Project 2

|| 05/11/2025 – 26/11/2025 (Week 7 – Week 11)
|| BAI ZHUO QING, 0370042
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Project 2

TABLE OF CONTENTS

1. Instructions：

2. Process Work：

Prototype Overview:

The purpose of this assignment was to transform a previous website redesign concept into a functional prototype showcasing the improved visual design, content structure, and user experience strategy. I developed a clickable prototype using Figma, comprising four core pages: Home, Products, About Us, and Contact Us. Each page demonstrates how the redesigned interface improves usability, clarity, and professionalism. The prototype embodies a modern, user-friendly system that aligns with the project's goals regarding usability, interactivity, and user experience quality.

1. Main Features of the Prototype:

(1) Home:

The home is the user's entry point, therefore its design aims to deliver a clear and reliable first impression. The layout prioritizes simplicity, a clear structure, and intuitive navigation. A prominent top navigation bar allows users to access all major sections, while a clearly visible search bar facilitates quick product searches—crucial for efficiency-conscious users. Featured product cards on the home display images and brief descriptions, enabling users to immediately grasp the website's content. The home effectively showcases the redesigned visual identity and sets the tone for the entire prototype. (2) Product Page:

The product page is one of the most important components of the prototype, showcasing how product information can be presented in a structured and user-friendly way. The new product page abandons the traditional text-heavy layout, adopting a card-style design where each product card includes an image, product name, and key specifications. This improves readability and facilitates comparisons.

The product page also includes interactive elements such as hover states, clickable product selections, and consistent button styles. These micro-interactions help enhance user engagement and provide a more realistic browsing experience. The page layout uses balanced spacing, prominent section headings, and orderly content grouping to ensure good readability. This directly meets the project requirements of visually improving the user flow and demonstrating the clarity of the redesigned content structure.

(3) About Us Page:

The About Us page focuses on presenting brand information in a concise, organized, and aesthetically pleasing manner. Since this page primarily contains descriptive content, the design emphasizes readable fonts, structured text blocks, and auxiliary icons to separate long paragraphs. Clear headings, subheadings, and spacing between separators allow users to easily absorb information.

This page aims to enhance brand credibility by presenting the company's story, values, and mission in a visually coherent and professional format. Its prototype goal is to demonstrate how to modernize information pages, making them more approachable and credible, which is crucial for a company's image in the healthcare or technology sector.

(4) Contact Page:

The contact page uses a clean form interface, demonstrating how users interact with input fields and submit inquiries. The layout includes clearly marked fields, appropriate spacing, and easy-to-use touch targets. Interactive feedback, such as button highlighting and input focus status, enhances the clarity of the form completion process. This page fulfills the requirement of demonstrating how the prototype supports user interaction with the system and guides users through necessary tasks.

2. Key Design Decisions:

Visual Style:

The prototype uses a clean, modern visual style inspired by contemporary medical and technology interfaces. A white background with blue accents creates a trustworthy and professional atmosphere. Soft, neutral tones ensure a clean and aesthetically pleasing interface that is comfortable to view even for extended periods.

Typography and Layout:

Modern sans-serif fonts ensure readability across all pages. Text hierarchy is clearly defined through font size, weight, and spacing. This structured typography ensures product details, company information, and form fields are readily apparent.

Navigation Structure:

A top navigation bar and consistent page layout make navigation simple and intuitive. Centralized navigation helps reduce cognitive load and ensures users always know what to do next. This directly aligns with the design task's emphasis on usability and clarity.

Interactive Elements:

Hover effects, button responses, and clear indicators were added to the page to create a realistic prototyping experience. These micro-interactions make the prototype more dynamic and enhance user confidence as they explore the interface.

3. How the Prototype Achieves the Redesign Goals：

The prototype successfully demonstrates how the new design enhances usability, modernizes visual presentation, and organizes information more effectively.

Improved usability: Clear navigation, readable typography, and structured product cards make the system easier to use.

Stronger visual identity: A clean medical-tech aesthetic helps establish professionalism and trust.

Better content hierarchy: Information is grouped logically, with improved spacing and prioritization.

Enhanced interactivity: Clickable elements and feedback states create a realistic and smooth user experience.

Overall, the Figma prototype fulfills the assignment’s requirements by presenting a coherent, functional, and visually refined demonstration of the redesigned website.

Final submission:

Figma Link：Click Here

3. Reflection：

Through iterative optimization of the website design and prototype development, I gained a deeper understanding of how visual design and user experience transform digital products into functional media. Transforming my concepts into clickable prototypes highlighted the importance of consistency and hierarchy when creating intuitive interfaces.

One of the key insights I gained was that subtle interactive details, such as button states, clear navigation, and feedback, can significantly impact overall usability.

Overall, this project boosted my confidence in using Figma and encouraged me to think more critically about user needs when designing practical, visually coherent solutions.
 

评论

发表评论

此博客中的热门博文

Advanced Typography - Task 1: Exercises

-
图片
Advanced Typography | Task 1: Exercises || 23/9/2025 – 14/10/2025 (Week 1 – Week 4) ||  BAI ZHUO QING ,  0370042 || Advanced Typography || Task 1:  Exercises TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4. Feedback 5. Reflection 6. Further Reading 1. Lecture： Lecture 1 / Typographic Systems: In Typographic Systems, Kimberly Elam identifies eight variations of typographic organization, each offering a unique structural approach to arranging visual and textual elements. Fig 1.1  The eight typography systems (09/23/2025_W1) 1. Axial - All elements are organised to the left or right of a single axis. 2. Radial - All elements are extended from a point of focus. 3. Dilatational - All elements expand from a central point in a circular fashion. 4. Random - Eleme...
阅读全文

Advanced Typography - Task 2: Key Artwork and Collateral

-
图片
Advanced Typography | Task 2: Key Artwork and Collateral || 20/10/2025 – 17/11/2025 (Week 5 – Week 8) ||  BAI ZHUO QING ,  0370042 || Advanced Typography ||  Task 2: Key Artwork and Collateral TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4. Feedback 5. Reflection 6. Further Reading 1. Lecture： Week 5： AdTypo_5_Perception And Organisation: Perception describes the mental processes by which we observe, decode, and interpret visual stimuli. In typography, this is not just about reading; it also includes how text interacts with images, colors, shapes, and spatial arrangement. Effective typography guides attention, constructs clear visual paths, and allows readers to smoothly absorb content. Contrast is one of the most essential tools for establishing hierarchy and emphasis. Drawing from principles introduced by Carl Dair, contrast can be created in multiple ways, each contributing differently to the viewer’s ...
阅读全文

Advanced Typography: Task 3 Type Exploration & Application

-
图片
  Advanced Typography: Task 3 Type Exploration & Application || 17/11/2025 – 15/12/2025 (Week 9 – Week 13) ||  BAI ZHUO QING ,  0370042 || Advanced Typography ||  Task 3 Type Exploration & Application TABLE OF CONTENTS 1. Instructions 2. Process Work     - Task 3 Final Outcome 3. Feedback 4. Reflections 5. Further Reading 1. Instructions 2.Process Work We are required to create a complete font set for this task. Three main directions are given as follows: 1.Create a font that is intended to solve a larger problem or be part of a solution within an area of interest. This may include graphic design, animatio...
阅读全文