Interactive Design / Assignment 2 - Website Redesign Prototype

Due Date :Due 7 Dec, 23:59

Task:

Interactive Prototype Development:

• Use tools like Adobe XD, Figma, or Sketch to create a clickable prototype.
• Include key pages:
• Homepage: Show main design elements (e.g., navigation, hero section, content areas).
• One Core Content Page: Example: "About Us," "Services," or "Products."
• Contact Page: Demonstrate user interaction with forms or contact methods.

UX Considerations:

• Usability: Ensure user-friendly navigation, clear interfaces, and accessible features.
• Interactivity: Include buttons, hover states, and form fields to simulate realistic interactions.

Submission Requirements:

• Provide the prototype as an accessible shareable link or a downloadable file.
• Write a 500–800-word write-up for your e-portfolio, explaining:
• Key features of the prototype.
• Design decisions made during development.
• How the prototype meets the objectives of the redesign proposal.

Wireframe 

In this assignment, I began by creating an initial wireframe and gradually transformed it into the final design. The final design ended up being quite different from the first wireframe, as I made several changes and improvements along the way.

Figure 1.1: First Wireframe Sketch

Figure 1.2: Exploration of Wireframe with Color (Homepage Only)

Figure 1.3: Pre-Final Wireframe

Inspiration / research 

Color and Font Used

Lecture Feedback 

• Change the footer color to blue while maintaining the same design style.
• Improve the alignment for better visual balance.
• Redesign the poster for a more polished look.
• Adjust the size of the search box.
• For the contact page, outline the message section with a stroke.
• Add one more page to balance the content distribution.

Overall, the design have some improvement compare to original one .

Write-up

The prototype that i redesign have introduces several key features designed to modernize the original design and enhance the user experience. One standout feature is the revamped homepage, which now includes rounded edges for a softer, more visually appealing aesthetic. The homepage displays more content upfront, allowing users to easily understand what the site offers at a glance. This includes the addition of an events section on the homepage, enabling users to quickly view ongoing events without navigating to a separate page. Another critical improvement is the emphasis on clickable spaces, with the inclusion of more buttons and interactive elements to guide users intuitively through the website.

For the Booklist section, I focused on making the layout clearer and more organized. To achieve this, I included larger titles for each section, allowing users to distinguish different categories at a glance. This change ensures that users can quickly and easily navigate the book section upon their first visit. Additionally, I added extra instructions below each category title, such as "This is for new students only." These instructions provide more context and improve clarity compared to the original website, making important details more noticeable and accessible to users.

Throughout the development process, several significant design decisions were made to address both aesthetic and functional challenges. Initially, I began the design using basic shapes and sharp edges. However, this approach made the design feel outdated and less engaging. After researching online for inspiration, I decided to incorporate rounded edges, which created a more modern and friendly look. Color selection was another challenge. My first attempts did not achieve the desired effect, so I refined the palette to achieve a clean, cohesive, and visually pleasing appearance.

The navigation bar also underwent a major redesign. Initially placed in the middle of the page, it became clear that this layout was insufficient to accommodate all the content without clutter. As the submission deadline approached, I restructured the navigation bar into a tripartite layout that spans the width of the page. This decision allowed me to organize the content more effectively, ensuring that all necessary options were included without overwhelming the user.

These design decisions directly address the objectives set in the redesign proposal. One primary goal was to create a more modern and user-friendly homepage that provides immediate access to essential information. The updated layout, with its prominent events section and organized structure, achieves this by ensuring users can view ongoing activities at a glance. This eliminates the need to navigate through multiple sections, streamlining the user journey.

Another objective was to improve interactivity and accessibility. By adding more clickable spaces, refining the navigation bar, and reorganizing the Booklist section, the prototype ensures that users can find what they need quickly and easily. The rounded-edge design not only enhances the aesthetic appeal but also contributes to a more inviting and engaging user experience.

Overall, the prototype is base on the redesign proposal by prioritizing modernity, usability, and clarity. Each feature and design decision has been have been included to create a website that is not only functional but also visually appealing and user-centric compare to the original one.

Final Outcome (prototype) 

The Final Outcome of assignment 

Homepage

Core Content Pages (Book List)

Contact Page

PDF Format (Home Page)

PDF Format (Core Content)

PDF Format (Contact Page)

Figma Link - Click Here

Note: If the prototype is not balanced, please adjust the settings to fit the width.

Reflection 

In this assignment, I had the opportunity to redesign a website, which allowed me to apply creativity and critical thinking skills throughout the process. Although I encountered several challenges, such as difficulties with the layout and alignment, I was able to overcome them by researching design inspiration and seeking solutions. The alignment was particularly challenging for me, but through trial and error, I was able to find a more structured approach that improved the overall design. This project helped me develop my problem-solving skills and enhanced my understanding of the design process, from wireframing to the final implementation.