Interactive Design Project 2: Website Redesign Prototype
10/11/25 - 30/11/25 (Week 4 - Week 10)
Choong Yee Leng || 0381980
Interactive Design || Bachelor Degree in Creative Media || Taylor’s University
Project 2: Website Redesign Prototype
TABLE OF CONTENT1.Instructions
2.Website Redesign Prototype
3.Brief
4.Reflection
Instructions
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE link or as a DOWNLOADABLE file.
A brief write-up in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
Website Redesign Prototype
Brief
Key feature:
- Introduction: A comprehensive introduction section has been added, with all key pages linked directly from the homepage. This improves the website’s structure and provides users with a clear, intuitive navigation flow.
- Call-to-Action Buttons: CTA buttons such as “Contact Us” and “Learn More” have been incorporated to draw user attention and improve readability. These CTAs help guide users toward important actions and information.
- Hover Effects & Transitions: A subtle color-change hover effect has been applied to all CTA buttons. Additionally, certain images now feature text reveal on hover, creating a more engaging and interactive experience.
- Hero Section: A hero section has been added to each page to ensure consistent visual hierarchy and maintain a smooth reading flow across the site.
- Visual Enhancements: Embedded videos are now showcased in the highlight section. Additional visuals and images have been integrated alongside relevant text to enrich content presentation and user engagement.
- Content Organization: Information has been systematically structured into clear sections to improve readability, accessibility, and overall user experience.
Design decision:
Decision 1: Colour scheme changes
Colour scheme in navigation bar and footer has been changed to colour with stronger contrast, which is black as background and white as body text, to enhance readability.
Layout of "our services" and "our awards" in homepage has been modified to enhance interactivity and maintain users' browsing flow.
Decision 3: improve corner radius
The corner radius of images and buttons has been increased, making them appear rounder and more visually appealing. This creates a softer, more modern look that improves the overall aesthetic of the website.
Decision 4: improve navigation bar
The contact button has been removed to maintain a cleaner and more visually consistent layout across all pages. Additionally, subtle color variations have been applied to indicate when users navigate to different pages, helping them stay aware of their current location on the website.
Decision 4: added colour different across sections
A grey shade has been added between sections to create clear contrast, making each part of the page visually distinct and easier for users to follow.
How the prototype addresses the objectives set in the redesign proposal:
- enhance user's trust and decision making: Additional visuals and embedded media have been added to the website. These include images of the studio environment, team member photos, and embedded videos showcasing completed work. Together, these visuals help users better understand the company’s professionalism and capabilities, making them more confident and willing to collaborate.
- strengthen brand identity: The White Noise logo has been prominently displayed in both the navigation bar and footer to reinforce brand recognition. Additional content, including the studio’s mission, team member profiles, and images of the studio environment, has been added to provide users with a deeper understanding of the brand and its values.
- modernize the look & feel: To modernize the overall look and feel, the website layout has been redesigned with a more contemporary approach. Information is now divided into well-structured sections, supported by an improved hero section that enhances reading flow. More visuals have been incorporated to reduce text-heavy areas, and interactive elements have been added to create a more engaging user experience.
- enhance usability: A footer has been added to simplify navigation, and clear CTA buttons guide users to important actions. Iconography has been incorporated for easier recognition of functions, and long blocks of text have been broken into organized sections to improve readability and overall user experience.
- improve interactivity: Hover effects have been applied to CTA buttons, linked text, and visuals that reveal text on interaction, creating a more engaging experience. Smooth transitions between pages have also been added to enhance navigation flow and overall user engagement.
Reflection
In this assignment, I experienced firsthand how a prototype is created, which was a completely new experience for me. This was my first time using Figma, and the process was not entirely smooth. I spent about 50% of my time just exploring Figma and familiarizing myself with its tools before I could start creating a prototype based on my previous design proposal.
During the process, I faced and overcame several challenges. Initially, I used Figma’s website designing function, but most of my elements did not display correctly in the preview section. This issue was resolved when I switched to the design feature in Figma, which allowed my elements to perform properly. Next, while creating CTA buttons, I encountered difficulties linking the buttons to other pages while maintaining hover effects. After some experimentation, I figured out how to balance both by using the hover effect variant element to link pages effectively.
While developing the prototype, I also made some design decisions that differed from my original wireframe. I realized that there were many perspectives I had overlooked during the initial proposal, which highlighted the importance of creating a prototype before building the actual website. This process helped me understand the practical considerations necessary when designing a functional website.
Overall, this assignment provided me with a strong foundation for future UX/UI projects. It not only improved my Figma skills but also taught me valuable lessons in problem-solving, design iteration, and the importance of prototyping, which will save me time and effort in future projects.
Comments
Post a Comment