Interactive Design | Project 1
Interactive Design | Project 1Website Redesign Proposal
- May 07, 2025
7/5/25 - 21/5/25 (Week 3 - Week 5)
Hu Yao Ping | 0376768
Bachelor of Design (Honours) in Creative Media | Taylor's University
[Table of Contents]
1.Lecture
2. Instructions
3. Project
4. Feedback
5. Reflection
[Lecture]
Week 4 / The Web and Language：<!DOCTYPE html>
<html></html>
[Instructions]
[Project]
Specific tasks:
The goal of this task is to redesign a proposal based on the website selected last week. This proposal requires us to look critically at the website's functionality and user experience, analyze the website's problems, and provide improvement suggestions for a better user experience.
Project Name: SuzanneCollinsBooks.com Website Redesign
Project Overview:
This proposal aims to redesign the Suzanne Collins official website visually and structurally to improve the overall user experience, visual aesthetics, and technical performance. The existing website has obvious problems in terms of confusing navigation, outdated visuals, and lack of mobile optimization, which affects visitors' browsing and information acquisition.
Design Goals:
• Optimize information architecture and navigation logic
• Reshape the visual style to fit the theme of the book (such as "The Hunger Games")
• Implement responsive design to improve multi-device compatibility
• Enhance interactivity and usability to increase user engagement
Expected Results:
Create a clear, visually unified, and modern author website to improve user satisfaction and strengthen the brand image.
The following is the whole process, presented by PPT:
First, I conducted an in-depth analysis of the website, then checked the different ways to open the page, and then compared them in many aspects. I created a linear sketch based on my ideas, that is, a wireframe.
Then I designed a mood board for the color scheme and image usage, which helped me think about the overall design further.
Then I poured it into the AI software to create the website. Here is the brief process:
Final result:
[Feedback]
Week 4 (14/5/25)
General Feedback:
This week we studied HTML coding in class and practiced
Specific Feedback:
I selected several sites for Project 1 and gave them to Mr. Shamsul for review. Finally, one was selected for the next step.
General Feedback:
This week we studied HTML coding in class and practiced
Specific Feedback:
I selected several sites for Project 1 and gave them to Mr. Shamsul for review. Finally, one was selected for the next step.
Week 5 (21/5/25)
General Feedback:
This week we did some programming exercises again in class. We learned how to change the font color, font and background color, and add images.
Specific Feedback:
I have currently conducted a website analysis for Project 1 and have made some progress
General Feedback:
This week we did some programming exercises again in class. We learned how to change the font color, font and background color, and add images.
Specific Feedback:
I have currently conducted a website analysis for Project 1 and have made some progress
Week 6 (28/5/25)
General Feedback:
This week we held an online course where we learned web programming and applied all the knowledge we had learned before.
Specific Feedback:
I put all the processes of website analysis and website design into a PPT made in WPS, and submitted the assignment on time after writing the blog.
ExperienceThis week we held an online course where we learned web programming and applied all the knowledge we had learned before.
Specific Feedback:
I put all the processes of website analysis and website design into a PPT made in WPS, and submitted the assignment on time after writing the blog.
[Reflection]
Throughout the redesign proposal for SuzanneCollinsBooks.com, I gained valuable hands-on experience in website analysis, design thinking, and visual communication. Initially, I felt overwhelmed by the outdated and disorganized interface of the original site, but gradually, through structured research and planning, I was able to identify key design issues and propose practical improvements. I also deepened my skills in using tools such as Google PageSpeed Insights, wireframing in grayscale, and creating a mood board to guide the aesthetic direction. This project significantly improved my ability to develop user-centered and brand-consistent web design solutions.
Observation:
I observed several major weaknesses in the existing website. The navigation was unclear and lacked hierarchy, the mobile responsiveness was poorly implemented, and the visual design did not reflect the tone and themes of Suzanne Collins’ work—especially the dystopian, intense atmosphere of The Hunger Games series. The color palette felt dull and lifeless, the typography was inconsistent, and the site had almost no interactive features to engage visitors. These shortcomings significantly reduced the site’s usability and emotional connection with its intended audience.
Findings:
- User experience design is critical — even the most beautiful visuals fail if the website is difficult to navigate or understand.
- Visual language must align with brand storytelling — a website representing a well-known author should visually express the tone, narrative, and essence of their work.
- Responsive design is non-negotiable — in the current digital landscape, a website must function effectively across all devices and screen sizes.
- A structured proposal builds design credibility — being able to present design problems, solutions, visual references, and wireframes in a professional manner is a vital skill for any designer.
Comments
Post a Comment