INTERACTIVE DESIGN | Project 2: Website Redesign Prototype

__ 

13 November 2025 - 27 November 2025

Aishath Eshal Shihab (0381863)
Interactive Design | Bachelor of Design (Honours) in Creative Media | Taylor's University

Table of Contents

• Instructions
• Prototype Link
• Feedback
• Reflections

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.

Prototype Link

Click here for the link!

This prototype is heavily based on the inspirations of webpages I found online and the colour palettes both of which are included in my redesign proposal. Key features to note are the many inclusions of high definition images of the zoo animals; to highlight how the zoo puts their wildlife before all else; and the plain, coloured background that makes the animals the “decorative” feature of the website opposing the patterned background the original website has as this would create too much clutter.

In addition to the homepage, the “About Us” page and the “Contact” page have also been designed in the prototype. The about us includes an image of the team and staff at Zoo Negara who keep the place alive and of course the Zoo’s mission and vision. The original website had a lot more than just the mission and vision but as it was a lot of content I featured it with buttons that would redirect to a separate page with more information about the topic.

For the contact page, I decided to use Typeform to create a question form for users to ask their doubts. However, I also added the contact phone numbers and email addresses of the Zoo’s various offices just in case the user would much rather prefer direct contact to an office. To finish off this webpage the last element I included was the address and map location of Zoo Negara. The map is embedded to the webpage but there is also a button that would redirect the user to Google Maps directly if it were to fail or lag.

When making this prototype, a big part of my proposal was to make the website accessible on mobile phones, as I believe this is the device most people would be using to book their tickets or learn about the zoo. So, I also put in the effort to make a mobile version of the prototype for each webpage. While the desktop webpages navigate from left to right before top to bottom, on mobile it is harder to compile all the information from left to right. That is why the mobile prototypes navigate primarily top to bottom. I did try to arrange all the elements the way it is arranged in the desktop version but that led to the text being too small to read. 

To conclude, this prototype meets the main goals of my proposal which were to make it more modern, less cluttered, and accessible on mobile devices. I believe this version of the website, while very different from the original, keeps the same themes and values as the original. One thing I would change about this prototype is how on the homepage all the features are meant to be able to redirect the user to their respective pages, but from first glance it does not show that that is the purpose of the features. If the feature images would pop up when the cursor were placed above it I feel that it would be much better and less confusing.

Feedback

Reflections

At first I thought we were meant to use Adobe Dreamweaver and use html to create the prototype which would have been much harder. Using Figma was easier than I anticipated but it was still somewhat difficult to figure out all the tools and how to arrange the elements.

I would say I am happy with the way the prototype turned out but there are some small details I could not figure out how to add in. I even learned how to use typeform to create a form for the webpage.