Project 2/ Website Redesign Prototype

29.05.25 - 18.06.25/ Week 6 - Week 8

Sara Patel/ 0362876

Interactive Design/ Bachelors of Design in Creative Media/ Taylors University

Project 2/ Website Redesign Prototype

---

INSTRUCTIONS

---

CLASS ACTIVITIES

For the following weekly tutorial activities we practiced different elements of html, css, css styling, etc using Adobe Dreamweaver. Here are the practical tutorials which gave us the technical idea about coding and how minor changes can completely change how a website looks. We did three websites one with box model, one for practice and one for the dropdown menu.

Fig 1.1: Code For the first website

Fig 1.2: ScreenGrab for the first website

Fig 1.3: Coding for the Dropdown Menu

Fig 1.4: ScreenGrab for the Dropdown Menu

Fig 1.5: ScreenGrab for the Dropdown Menu

Fig 1.6: ScreenGrab for the Dropdown Menu

---

TASK

For this Project we were asked to create an interactive prototype of the website we created the redesign proposal for in the previous task. This prototype was to showcase new design outline and functionality, including important pages like the homepage, main content pages and a contact page. We had to use tools like Figma, Adobe XD, or similar to make a clickable version where users can navigate and interact with buttons, forms, and other features. The design had to be user-friendly, work well on different devices (like phones and computers), and reflect the final look of the website. We had to focus on showing clear improvements in design and usability.

Website Chosen: SpaceJam 

Website Proposal (Project 1): Proposal

Fig 2.1: Prototype design Screen

Fig 2.2: Prototype navigation Screen

Fig 2.3: Interactive Prototype

Introduction

The redesigned prototype of the Space Jam website includes many major improvements and fixes problems that were present in the existing website. The original website had an outdated look as it was created in 1996 when design and outline of the website were not so modernized and user-friendly, also lacked proper navigation and did not effectively highlight the fun energy of the Space Jam brand. This prototype fixes these issues by focusing on modern design and creating a better user experience by designing an interactive layout that attracts fans of all ages.

Changes and Improvements

The homepage has been transformed completely as in the old website, the homepage was cluttered and basic which didn’t grab attention effectively and was not even easy to understand. The prototype introduces a bold and exciting homepage with dropdown menu, better navigation and prominent buttons, making it easy for users to engage with the site immediately.  I added the trailer in the beginning so that the users get an idea about the movie if they haven't watched it. After that added a vibrant sections for the sub-pages, making the homepage more organized and attractive. Made the titles of the sub sections simple for large audience to understand easily without putting additional effort to understand where to go.

For the second page which was the introduction of a dedicated “Characters” section. On the old website, fans couldn’t easily explore the personalities and stories of their favorite Space Jam characters. The new prototype includes a “Meet the Characters” page with clickable buttons for each character. This page gives users an overview of all the key characters. Additionally, individual character profile pages provide detailed information, photo gallery with interactive elements like sliders.

The contact page has also been redesigned to be more user-friendly. On the original site, the contact form is not easily accessible but in the prototype, it is clean and simple, with precised fields allowing users to quickly connect for any help or confusion. The design is straightforward, ensuring that even younger users can easily send a message or ask questions.

One of the significant improvement throughout the prototype is the navigation which was one of the biggest problems with the old website as it was confusing and cluttered. It was difficult to find specific sections or understanding how to move from one page to another. The new prototype features a proper header and footer with important navigating buttons and the drop down menu bar  accessible from any page. The menu includes dropdown options of key sections for easy navigation. This simple layout ensures users can quickly find what they’re looking for without frustration.

Another highlight of the new prototype are the interactive elements as the original website had limited opportunities for users to interact while the prototype adds many elements, such as clickable buttons, hover effects, image sliders and functional forms to create a more engaging experience. These features make the website feel alive and enjoyable to explore.

The color palette and fonts have been carefully chosen to reflect the fun and vibrant nature of the Space Jam brand. The old website had an inconsistent look, with colors and fonts that didn’t always match with each other and even the brand’s personality.

Problems Solved

The redesigned prototype solves problems such as the issue of outdated design in the existing website by introducing exiting and modern look which invites users to explore the site. The addition of well-organized sections makes it easier for users to find what they’re looking for, also  fixes navigation issues by introducing a simple and consistent menu system. Users no longer have to struggle to locate important sections or pages. Next, the prototype addresses the issue of limited interactivity. The addition of clickable buttons, hover effects and image sliders creates a more engaging and interactive website. Lastly, the redesigned contact page solves the problem of poor user engagement. The clean and simple form design encourages users to connect with the website, making it easier for them to send messages or ask questions.

Conclusion

The redesigned Space Jam website prototype is a significant improvement of the original site. It fixes major problems, such as outdated design, poor navigation, lack of interactivity and limited responsiveness. This redesign is a perfect blend of modern design principles and the nostalgic charm of Space Jam, making it a standout improvement over the existing website.

---

REFLECTIONS

This project helped me learn new things as i was using Figma for the first time to create a prototype and even the concept of functional prototype was new to me. This resulted onto a very challenging start but with the help of tutorial video and you tube tutorials I figured out how useful and powerful the elements in the application is for creating interactive designs. I learned how to use different features, like creating frames, linking buttons, adding hover effects, add elements, etc to make the prototype both functional and engaging.

One of the biggest challenges I faced was understanding how to organize the layout in Figma. At first, I struggled with aligning elements and making sure everything looked balanced. Over time, I got better at using grids and guides to create a clean and organized design. It was satisfying to see how these small adjustments made the design look more professional and user-friendly. It was also frustration in the beginning to understand how to design functional interactive elements. Apart from the challenges, on the brighter side this project improved my creative skills as i understood more about the use of color and typography effectively to attract and influence the viewers. Finding the right balance between fun and readability was a really interesting exploration. Along with that working on the interactivity was really exciting to see as minor changes change the complete look of the website and make it look more lively and exciting.

Overall, this project helped me improve my design and technical skills as I feel much more confident with the tools and elements now. While it wasn’t always easy, the process and experiment was really exciting. It also improved my time management skills as this was created side by side to other coding class activities so it took time to manage and understand both together. Lastly this experience has motivated me to explore more tools and techniques in design.