Interactive Design - Project 2

22/9/2025 - 2/11/2025 (Week 1 - Week 10)

Lim Yeng San (0366316)

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

Project 2

INSTRUCTIONS

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 write-up 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 referred to my website redesign proposal from Project 1 to make the prototype.

Original website: http://thelanguageofflowers.com/

Fig 1.1: Website redesign proposal

My main goal for the prototype was to condense and break up the walls of text in the original website.

Fig 1.2: The website's home page

Fig 1.3: The website's content pages

I used the desktop frame on Figma as a basis. The first draft of the home page followed the sketch in the proposal. This was later changed into the main content page.

Fig 1.4: Home page first draft

After this I applied an 8 column grid for better organization of the images. 

Fig 1.5: Main content page update

I originally wanted to include a hamburger menu but removed later on as Mr. Shamsul advised that it was not needed.

Fig 1.6: Early hamburger menu

I set different background images for each page.

Fig 1.7: Background image for the home page

Fig 1.8: Background image for the main content page

Fig 1.9: Background image for the contact page

I referred to the reference websites from the proposal for the layout of the pages.

• https://www.isadia.co.nz/pages/about-us
• https://www.bramblefloraldesign.com/services

I applied a similar layout to the home page and main content page.

Fig 1.10: Updated home page

Fig 1.11: Updated main content page

I used a display font for the title and main headings. It was later changed into a logo.

Fig 1.12: Previous logo

Fig 1.13: Current logo

I changed the header from center aligned to to be both left and right aligned. I did the same for the footer but add the contact icons on the right and copyright information at the bottom.

Fig 1.14: Header

Fig 1.15: Footer

The contact page was the most innovated one as the original website did not have any means of contact so I added placeholder contact information, newsletter and registration forms. This turns the website from an encyclopedia page to one that offers class services as well.

Fig 1.16: Contact page

Final Outcome

Link to prototype on Figma: https://www.figma.com/proto/kmmfaFlF7sMkw0NVG2QfZJ/PROJECT-2_LIM-YENG-SAN_0366316?node-id=75-346&p=f&t=UvKlLKXm07GjMeCy-1&scaling=contain&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=75%3A346

Fig 1.17: The final prototype

Write-up

Key Features

Home Page

• Hero section

Main Content

• Gallery layout

Contact Page

• Added contact information and forms

Compared to the original website, the prototype mainly features a hero section in the home page, a gallery layout and call to action elements. The home page displays a hero section to preview the other pages in the website such as the main content page, "Flower Meanings" and the contact page, "Contact Us". It also provides the external links that were previously in the original website. Next, the main content page, "Flower Meanings" dons a gallery layout that lists out the content from the original website with added pictures in an 8x8 grid. Lastly, the contact page, "Contact Us", has more call-to-action elements like newsletter and registration forms which were not present in the original website. Contact information such as placeholder social media icons, usernames, phone number and email were also added.

Design Decisions 

The design of the prototype differs a lot from the original website. A larger header and footer with navigation buttons and contact information were made for the top and bottom of each page. The home page was changed from a gallery layout to a general home page layout with a hero section. In the main content section, "Flower Meanings", a gallery format was used while both the home page and contact page had similar layouts. More interactive features like hover animations were added to the navigation bar and call-to-action buttons. Different background images were used in each page for design variety.

One of the biggest changes made was to change the original website from an encyclopedia website to both an encyclopedia and services website. The prototype was made to be informative and offer services such as registering for a newsletter and physical gardening classes. This was to make the website more interactive and engaging instead of focusing on providing information.

The prototype has changed a lot from the project proposal as the initial wireframe sketches did not plan for a home page with a hero section. A hamburger menu was also prepared during the prototype development but was removed later on due to it not being needed. Lastly, a larger variety of hover animations were planned but did not come to fruition as they were difficult to make on Figma.

Objectives Set in The Redesign Proposal Addressed

The main issue found in the original website was the lack of imagery and over reliance on text and lists. The prototype addresses this with the addition of more pictures layout change from a list format to a gallery format. The content was broken up and condensed in the prototype to be much simpler and less boring. Other than that, the prototype has a more modern visual design compared to the basic design of the original website with different background images for each page and different colour schemes. The main title of the website was made into a logo. 

The lack of interactivity in the original website was also addressed by adding hovering animations to the navigation buttons and call-to-action buttons for a better user experience.