INTERACTIVE DESIGN - PROJECT 2 - PROTOTYPE
27/05/25 - 16/06/25 ( Week 5 - Week 9 )
Carren Yeliandi / 0376990
Interactive Design / Bachelors of Design in Creative Media / Taylor's University
Project II
Carren Yeliandi / 0376990
Interactive Design / Bachelors of Design in Creative Media / Taylor's University
Project II
TABLE OF CONTENTS
Lectures
Lecture ...
Instructions
<iframe src="https://drive.google.com/file/d/1uHHYgIaueTxzS5HII6T19UE2u5JfwPQa/preview" width="640" height="480" allow="autoplay"></iframe>
PROJECT 2 - WEB REDESIGN PROTOTYPE
Rationale :
The key features of the prototype :
This prototype has minimal menu to minimize user's confusion and maximize user's navigation experience. The homepage shows the current most popular choice of bread or cakes of the shop as well as a call to action button with the text of "BUY NOW" to attract customers. The home page also have summarized information regarding the bakery with a smaller call to action button that will lead them to the corresponding menu that contains more informations. At the end of the website, there is always a footer that will lead them to the designated links. The picture used is aesthetically pleasing to the eyes to maintain user's interest.
In the menu section, when you click one of the baked goods option on the side, it will expand to show you options. If you click it again, it will close the tabs. There was a second plan to make it more interactive as in if one of the baked goods option is being open, it will push the option below it down to be below the expanded options, however it didn't worked out as planned and it was set aside.
Design decisions made during development :
During the process of developing the prototype, I realized that my image placement in my proposal is horrible. It just doesn't fit the vision of website that I'm going for and made it looked weird instead. So I fixed the image placement using the columns that I had used as base and fixed the text accordingly.
Other than that, the "MENU" navigation bar is supposed to have a description of what the product is underneath the baked goods, however after some observation, those descriptions is deleted and is to be put in the baked goods' "card", that will show when the products are clicked, instead if it is to be developed further. This is to minimize user's distractions during product scrolling.
There was also a change in color palette, as the original color palette looked horrible during implementation. Multiple color palette was tried out and in the end, the colors selected was chosen one by one from each color palette to make a new color palette.
How the prototype addresses the objectives set in the redesign proposal :
1. Improved Navigation (Minimal Menu) : Compared to the original website, this prototype only have 5 menu that contains all the important information regarding the shop itself. The original website had 13 menu that will show more menu when you hover on top. It was mostly confusing to navigate the website due to the large amount of menu.
2. Improved Interactivity (Call to Action Button) : A call to action button can help users to immediately understand the purpose of the website itself. The original website had none obvious call to action button, showing the website as an informational website about the shop itself. However, in the website there is a so called online shop that when clicked only showed a white pop-up screen. The redesigned website had multiple call to action button with various size depending on the importance of the content is. For example, the "BUY NOW" call to action button is the biggest as it serves as the main purpose of the website which is as an online shop for the website itself. However, that doesn't mean information regarding the website is erased, it is just summarized and inserted into the corresponding menu which is the "ABOUT US" and the "CONTACT" menu.
3. Modernized and Minimalistic Layout : The information inside the website was check and summarized to only contain the important informations to maximize user's experience. The layout is not jam-packed with colors and text or images and the colors used is selected based on the suitability with the content of the website and the aesthetic final look. The text hierarchy is also clear with size, font and typeface differences. The image layout is arranged based on the columns template that I arranged (8 columns, 120 pixels width , 15 pixels gutter).
4. Improved Device Compatibility : This prototype is designed for desktop, however, there will be a second set of frames just for phone users. It will mainly use the same text and information, just slightly different layout. For now, this objective is yet to be seen on the current prototype.
Reflection
It was fun as it was also frustrating.
Comments
Post a Comment