3rd October 2024 (Week 2) - 20th May 2024 (Week 5)

Insha Thahirah Rajab - 0360671

Interactive Design - Section 02

Bachelor's Degree in Creative Media (Honors) - Taylors University

Project 2

Task 1

INSTRUCTIONS

PROJECT

Project 2 - Website Redesign Prototype

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.

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.

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 writeup 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.

: process work

I started off by getting the Taylor's MyTimes logo off google.

The second main logo was an HTML document so I decided to recreate the logo myself on illustrator since it was a key element of the design, and something I will be referring to often.

My logo was done and it was time to work on the prototype. I started off by making multiple pages to divide them to make a clean workspace.

I focus mainly on the requirements which were the main page, contact page and adjacent page accordingly. I later on added blank pages for the other pages.

I made a sketch of how I wanted the pages to look:

Aside from the visuals that are shown in the final, I followed a few YouTube tutorials and learnt how to incorporate prototyping to create interactive elements such as buttons, hovering, scrolling effects.. etc.

I attempted to make my dashboard calendar interactive by including multiple home pages with months that change as the button is pressed.

However, this proved to slow down the prototype further and cause lots of lag and errors so it was scratched off.

I made some pop-ups for the emails and profile icons for more interactivity. This proved to be easier than I expected, however elevates the prototype further.

At the end, I merged the pages into one main workspace and linked them through the navigation elements.

: final prototype

: brief writeup

Key features of the prototype

Interactive Components: Buttons, hover states and links to other pages through the sidebar. Interactive "User" and "Mail" buttons. Interactive notes element. Scroll effects. Interactive contact form.

Transitions and Animations: Dissolve transitions through pages. Push animations for "User" and "Mail" button interactions. Animated cursor and text boxes for contact form.

Overlays and Modals: "User" and "Mail" icons provide relevant pop-ups. Transition component in notes section dissolve from "click here to start adding text" to "type now"

Responsive Design Elements: Figma allows prototypes to adapt to various screen sizes and orientations, ensuring a consistent user experience across different devices.

design decisions made during the development

1. Navigation Design

Decision: Used a simple, noticeable navigation bar or links.

Reasoning: Ensures easy findability of important pages and smooth navigation.

2. Layout Structure

Decision: Adopted a clean, grid-based structure.

Reasoning: Promotes readability and reduces cognitive load.

3. Typography

Decision: Differentiated font sizes for headings, subheadings, and text.

Reasoning: Enhances usability and allows easy content differentiation.

4. Color Scheme

Decision: Used a simple and balanced color palette.

Reasoning: Improves aesthetics, functionality, and accessibility.

5. Interactive Elements

Decision: Added logical buttons, hover effects, and feedback.

Reasoning: Makes the interface engaging and informs users of their actions.

6. Visual Hierarchy

Decision: Used contrast and spacing to highlight key features.

Reasoning: Guides users to important actions or information.

7. Content Presentation

Decision: Balanced text and visuals (e.g., images and icons).

Reasoning: Enhances engagement and effectively conveys information.

8. Accessibility

Decision: Incorporated standards like text contrast and readable fonts.

Reasoning: Ensures usability for diverse users, including those with disabilities.

9. Consistency

Decision: Maintained uniform patterns and UI components.

Reasoning: Facilitates learning and efficiency by reducing transition gaps.

10. Interaction Feedback

Decision: Integrated micro-interactions with feedback.

Reasoning: Provides responsive feedback to improve user experience.

how the prototype addresses the objectives set in the redesign proposal

1. Enhanced Usability

Features: Decentralized options for easy access, intuitive button placement, and clear section titles.

Addressed: The prototype ensures accessible navigation across all pages and intuitive button positioning to minimize user errors.

2. Improved User Experience (UX)

Features: Hover, click, and transition effects; minimalist layout with ample whitespace; micro-interactions for feedback.

Addressed: Enhances engagement by providing feedback on actions and ensures a seamless, uncluttered user experience.

3. Alignment with Branding

Features: Consistent use of colors, typography, and iconography; visual design aligns with brand image.

Addressed: Adopts a systematic design that integrates branding elements, supporting a clean and professional look.

4. Accessibility

Features: High contrast between text and background, readable font sizes, and alternative navigation options.

Addressed: Optimized for accessibility, making the design usable for people with disabilities.

5. Meeting User Needs

Features: Prioritizes frequently used features, efficient workflows, and informative visuals.

Addressed: Elements are tailored to user requirements, ensuring easy access to key tasks and information.

6. Scalability and Future Enhancements

Features: Modular design with reusable components and the ability to add new content.

Addressed: Supports integration of new features, ensuring long-term relevance.

REFLECTION

Project 2 was extremely fun yet time consuming. Figma felt like the perfect blend between canva and html and was extremely easy to use. I struggled slightly with following some tutorials that used an older version of figma and had to figure some of the controls myself. I loved comparing between the original website with my redesign to assess areas I've improved. Overall, I learnt that as a design student, I prefer using interfaces like figma which are more visual based, than hard coding.

Interactive Design - Project 2 Website Redesign Prototype

CONTENTS