Advanced Typography - Task 1: Exercises

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

---

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：