Interactive Design | Project 2
Interactive Design | Project 2: Website Redesign Prototype
June 02, 20257/5/25 - 21/5/25 (Week 3 - Week 5)
Hu Yao Ping | 0376768
Bachelor of Design (Honours) in Creative Media | Taylor's University
Interactive Design
Project 2: Website Redesign Prototype
[Table of Contents]
1.Lecture
2. Instructions
3. Project
4. Feedback
5. Reflection
[Lecture]
[Instructions]
[Project]
Fig1.1 process
At first, I tried using the green color scheme from The Hunger Games to create a natural, mysterious feel. But it looked too dark and flat, and key details didn’t stand out.Then, I switched to a vintage palette with red, olive green, beige, and soft blue based on my earlier design. This made the design clearer, more balanced, and better matched the retro style. The final colors improved the overall look and helped express the theme well.
Fig 1.2 video
This video showcases the redesigned interactive prototype of the Suzanne Collins Books website, featuring the following pages:
Homepage:
A clean navigation bar and a hero section with the site title, tagline, and a “Explore Books” button, creating an immersive literary atmosphere.
Books Page:
Displays featured series such as The Hunger Games and Gregor the Overlander, using image-and-text cards with hover effects for better browsing.
Contact Page:
Includes a simple contact form and social media icons, with a clear layout for easy user interaction.
The prototype focuses on visual consistency and enhanced user experience, with smooth click flow and intuitive navigation.
Fig 1.3
Fig 1.4
Fig 1.5
Write-up:
Project Title: Suzanne Collins Books – Website Redesign Prototype
Tool Used: Figma
Key Features of the Prototype:
This prototype presents a redesigned version of the official Suzanne Collins Books website. It includes three main pages: the Homepage, a Core Content page (Books), and a Contact Page. These were developed using Figma with a medium-to-high level of fidelity and include interactive elements such as clickable buttons, hover effects, and a working form layout.
• Homepage: The homepage features a clean and modern layout that reflects the dark and intense themes of Suzanne Collins’ novels. It introduces the brand through a hero section with a prominent title, tagline, and call-to-action button. Clear navigation allows users to move easily across the site.
• Books Page (Core Content): This section displays key book series like The Hunger Games and Gregor the Overlander. Each book series is presented with high-quality visuals and brief descriptions. Hover states and structured layout help users explore each series easily.
• Contact Page: A simple, user-friendly contact form is included to allow readers or fans to get in touch. The form is accessible and clearly labeled, with icons for social media to enhance user engagement.
Design Decisions Made During Development:
Several important design decisions were made to improve both the usability and visual appeal of the site:
• Simplified Navigation: The original site had an outdated, cluttered structure. In the redesign, the navigation is streamlined into four main items, which improves usability and prevents user confusion.
• Typography & Color Scheme: A serif typeface was chosen for headers to reflect a literary tone, paired with a clean sans-serif body text for readability. The dark background with gold or crimson accents evokes the atmosphere of Suzanne Collins’ stories, particularly the dystopian tone of The Hunger Games.
• Visual Hierarchy & Layout: The redesigned layout uses clear spacing, grid alignment, and consistent visual cues to guide users. Content blocks are modular and designed for easy adaptation to mobile or tablet layouts.
• Interactive Elements: Buttons feature hover states and transitions, giving feedback to users and creating a more engaging experience. The form fields are interactive with placeholder text and clear labels.
How the Prototype Addresses the Objectives Set in the Redesign Proposal:
This prototype successfully translates the goals of the original redesign proposal into a working visual and interactive format. Specifically:
• It improves usability by providing a cleaner, more navigable layout.
• It enhances user experience through consistent design, intuitive interactions, and mobile-friendly layout considerations.
• It achieves stronger brand alignment by visually communicating the tone and themes of Suzanne Collins’ literary work.
• It introduces modern design standards with clear CTAs, responsive grids, and interactive design components.
The project reflects an understanding of UX principles such as accessibility, interactivity, and responsive design. By prototyping the redesigned interface with a user-first approach, this project delivers a tangible improvement over the original static, outdated site.
Conclusion:
Overall, the prototype not only fulfills the visual and functional goals of the redesign proposal but also demonstrates my ability to translate design concepts into a usable, interactive product. The structured layout, literary-inspired theme, and enhanced navigation contribute to a significantly improved user experience. This process has strengthened my understanding of design systems, prototyping tools, and UX thinking in real-world applications
[Feedback]
Week 7 (4/6/25)
General Feedback:
This week, we will continue to teach and practice coding in class.Specific
Feedback:
This week, I completed project 1 and started to prepare for project 2.
Week 8 (11/6/25)
General Feedback:
This week, we switched from online classes to self-study.
Specific Feedback:
I started designing the website for my project2 in figma.
Week 9 (18/6/25)
General Feedback:
Week 8 (11/6/25)
General Feedback:
This week, we switched from online classes to self-study.
Specific Feedback:
I started designing the website for my project2 in figma.
Week 9 (18/6/25)
General Feedback:
Today is a physical class, with code teaching and practice, and the teacher checked.
Specific Feedback:
I continue to further complete and modify the details of my project2
Specific Feedback:
I continue to further complete and modify the details of my project2
[Reflection]
Experience：
The Website Redesign Prototype project was a hands-on dive into UX/UI design. Turning my initial proposal into an interactive prototype using Figma was both challenging and rewarding. I focused on creating smooth navigation, responsive layouts, and testing interactions like button hovers and form submissions. Balancing design fidelity with feasibility was a steep learning curve, but seeing the prototype come to life made the effort worthwhile.
Observation：
This project emphasized how essential user-centered design is. Even small issues—unclear labels or inconsistent styles—affected usability. I noticed that high-fidelity prototypes led to more helpful feedback, as users could better visualize the final product. Testing across devices reinforced the importance of responsive design. I also realized that visual design and UX must complement each other—good looks alone aren’t enough without functionality.
Findings：
Key takeaways included the value of prototyping in identifying issues early and bridging ideas with user experience. Clear communication—both in written and visual form—helped stakeholders understand design decisions. Most importantly, iterating based on feedback proved vital, showing that a designer’s intuition doesn’t always align with user expectations. Successful redesign requires a balance of usability, aesthetics, and strategy.
Comments
Post a Comment