Interactive Design Project 1| Design Proposal

 15.04.2025 - 28.05.2025 ( Week 4 - Week 6)

WANG JINYI / 0374697

GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Project 1

Table of Content

Lectures

Instructions

Task

Feedback

Reflection

Lecture Summary


Week 4 Lecture Material| Web Standard PDF

This lecture introduced us to the basics of HTML (HyperText Markup Language) — the standard language used to build web pages. We learned how HTML structures a webpage using elements such as:

  • <head></head> for page metadata

  • <p></p> for paragraphs

  • <h1> to <h6> for headings

  • <ul><li></li></ul> and <ol><li></li></ol> for unordered and ordered lists

Through hands-on class exercises, we practiced writing HTML code to create:

  • Titles, paragraphs, and sections

  • Bold and italic text using <b> and <i>

  • Lists of hobbies, goals, and favorite things

  • Horizontal lines with <hr> and line breaks with <br>

We also explored how to:

  • Insert images and hyperlinks

  • Change text color and background color

  • Align text (e.g., center alignment)

  • Add text decorations like underline or strikethrough

This session helped us build a solid foundation in HTML and understand how basic code can be used to control content structure and visual presentation on a webpage.


Instructions

Module Information Booklet PDF

Task
Project 1- Web Redesign Proposal 

What we need to do:

Objective:
The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should
demonstrate your ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.
 
Assignment Description:
You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address the following key aspects:
     
Website Analysis:
 
Current Design Evaluation:
Provide a critique of the current design, focusing on layout, color scheme, typography, imagery, and overall aesthetics. User Experience (UX): Assess the site’s usability, navigation, accessibility, and responsiveness. Identify pain points or areas that could be improved.
 
Functionality:
Evaluate the website’s performance, including load times, interactivity, and compatibility across different devices and browsers.
   
Redesign Goals:
 Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernized look, enhanced brand alignment).
 
Target Audience:
Describe the intended audience for the redesigned website and how the new design will better meet their needs.
       
Design Proposal:
Visual Design Concepts: Present your ideas for the new visual design, including visual references, mood board and wireframes. Discuss the rationale behind your design choices.
 
UX Enhancements:
Propose changes to improve user experience, such as simplified navigation, better content organization, or enhanced interactivity.
Technical Considerations: Outline any technical updates or changes, such as optimizing for mobile devices, or improving load times

Submission:
Submit your E-portfolio link that includes an embedded link of your proposal. The proposal can be prepared using any form of
presentation application such as Google Slide or Canva

Chosen Website: http://www.jmm.gov.my/ms

Fig 1.1 Chosen website home page, Week 4


In order to better present my analysis and design ideas, I have made a complete design proposal PPT.

Step 1: Information organization
Sort out the original web page screenshots, interface evaluation data, pain point list and user feedback, including my own first-hand experience.

Step 2: Content Planning
According to the requirements of the proposal, the content is divided into:

  • Objective
  • Website analysis
  • Current  design evaluation
  • User experience issues
  • Functionality
  • Redesign goals
  • Target audience
  • Design proposal
  • UX enhancement
  • Technical considerations
  • Conclusion
Step 3: Generation of visual prototype diagrams
Hand-drawn web page layout draft diagrams and used Canva to create visual drafts, making my ideas clearer and more definite.

Fig 1.2 hand-drawn sketch, Week 5

Fig 1.3 Digitalized Web Pages Sketch, Week 6


Design Proposal PPT

Website Redesign Proposal PDF, Week 6

Feedback

Week 4: I presented three poorly designed websites to Mr. Shamsul. He recommended focusing on the Department of Museums Malaysia website, as it had clear design and UX issues worth improving.

Week 5: After showing him my proposal slides, he commented that all necessary content was included and the structure was clear and concise. He suggested adding a visual redesign mockup to strengthen the proposal.

Week 6: I presented a hand-drawn wireframe and a digital visual mockup. He was satisfied with the improvements and stated that the proposal was now complete and well-developed.

Reflection 

Through the practice of this website redesign proposal, I not only systematically exercised my practical abilities in website evaluation, information architecture analysis and interface optimization, but also further understood how to achieve a good balance between user experience design and visual aesthetics. Throughout the entire process, I constantly reflected on the true needs of users, attempted to move from "looking beautiful" to "being user-friendly", and verified the feasibility of the design ideas with actual page diagrams.

This project has made me realize more clearly that an excellent website is not only fully functional or aesthetically pleasing, but more importantly, it can convey the brand's temperament at the first moment, guide user behavior, and leave a good impression. Although the process of revision was complex, every step made me feel the satisfaction brought by creation and design. I can't wait to apply these theories and experiences to real projects in the future to create more professional, practical and pleasant web pages.





Comments

Popular posts from this blog

Advanced Typography: Task 2 Key Artwork & Collateral