LEBON STEPHANIE AMELIE JUDITH 0362853 / Interactive Design / Project 2

 LEBON STEPHANIE AMELIE JUDITH  0362853

Interactive Design / Bachelor of Design ( Honors) in Creative Media/ Taylors University

Objective:

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

Prototype Link: https://www.figma.com/proto/xIu9tHFSTwsD4c7LTKzj6Y/PROJECT-2?node-id=0-1&t=wxXAG81A43qQjxBk-1

Brief Writeup:

Objectives:
The overall objective of this prototype was to  improve the  overall design of the Blinkee.com website
Using the Design proposal and objectives from Project 1 I started to create a prototype in Figma.

Redesign Goals and UX Enhancements (Project 1): 

• Change the layout to balance the typography and other features better.
• Change the fonts to something more unique and consistent.
• Find  a more unique color scheme that matches the product.
• Use higher quality images that are not as tacky and match the website more.
• Add some more interactivity and animations.
• Better organization of different menu items.
• Better mobile optimization and layout.

Proposed design.

Key Features and Decisions Made:

To achieve the objective I needed to decide to decide on key features and design choices I had to make to improve the Blinkee.com website in this prototype.

The Blinkee.com logo has been redesigned to something simpler rather than the rainbow logo. Using a much simpler image to show it is Christmas and removing the tacky animated gif for simpler 'Merry Christmas'  in a white for contrast. This prototype also removes the complex color scheme for just black white and 2 shades of pink that was kept from the original site. The main form that I decided to use where rectangles, squares, and lines with sharp lines to add balance to the very soft pinks in the color schemes. For the typography I used a more complex typeface to add character to the simpler layout. The header is fixed but the footer is not as you always want to access the header but the footer exists as a way to navigate at the end of scrolling and selecting the same page on the footer scrolls you back to the top. All possible ways to move from page to page has a smooth ease in transition  from page to page to contrast the sharp forms

On the home page it had the Christmas section and a preview of the products as this is a e-commerce website and the products are the main focus. On the footer 'Home' is another shade of pink to help show what page you are on

On the Products page I kept to the 3 products per a row format rather than a 4 as I believe the extra white space on the sides give the user more breathing space and it flows into the footer nicer. 'Products' in the header is a different shade to show what page you are on at all times.

On the Contact page I went for a more flowy composition as there is a lot more information and it is easier on your eyes especially with the white space. Also used a hierarchy system to show the importance of different pieces of information. The contact Form is very simple yet functional and it takes up around half the space to make it very visible. 'Contact' is also in different pages of pink in the header and footer so you will always know what page you are on to avoid confusion.