INTERACTIVE DESIGN (PROJECT 2): Website Redesign Prototype

Fig. 1. Bobert 6b from TAWOG
INTERACTIVE DESIGN (PROJECT 2): WEBSITE REDESIGN PROTOTYPE

–––

15/10/2025 - 01/11/2025 (Week 7 - Week 10)
Irdhina binti Mazli Sham (0366894)
Interactive Design - Bachelor of Design in Creative Media - Taylors University
Project 2: Website Redesign Prototype



TABLE OF CONTENTS:

  1. Lecture
  2. Project 2
  3. Reflection

LECTURE

Week 8



PROJECT 2

For Project 2, we were required to create a prototype of how the final website redesign would look, based on the previous assignment, which was the proposal. The prototype should include at least five pages in total, including the home, (minimum one) content and contact page. 

The softwares we could use to create this prototype includes Figma and AdobeXD, which was the software I used as I found it easier to understand and navigate.


Fig. 2. Adobe XD screenshot (initial)

Initially, I followed my original idea of the website being something that is stylised and interactive while still conveying the information needed in a more organised manner compared to the original website. However, the prototype progress got rejected last minute, which caused me needing to redo and readjust most of the design presented.

Fig. 2. Adobe XD screenshot (initial)
After getting help from my sister, who was also involved in making websites, she suggested ways for me to improve on the prototype without fully wasting what little design I had. This included using Adobe Illustrator to do some of the elements since the software allows me to directly copy paste from Illustrator to XD.

Fig. 3. Adobe Illustrator screenshot

Fig. 4. Adobe XD screenshot (readjusted)


After looking back on my proposal, I found certain things lacking such as the composition, colours and typefaces. To amend these mistakes, I changed some of the elements to better suit the appearance of a website while still retaining the original idea with the help of suggestions from others. My redesign website consists of five main pages with some branching out to smaller details:

  • Landing Page: Contains New Arrival Products alongside the date of the update as well as a start on exploring broad plant categories (Frost-Tolerant, Tropical & Mediterranean, Miscellaneous)
  • About Page: Contains a carousel image of how the place would look alongside a brief description on the business itself, including what they sell as well as where they are based.
  • Explore Page: Starts with a broader category for users to look through (Frost-Tolerant, Tropical & Mediterranean, Miscellaneous) followed by smaller categories that would go under specific groups. Once the user clicks onto one of the smaller categories, they would be met with specific species alongside a photo (if possible) and brief notes on its care such as the frost-tolerance level.
  • Gallery Page: Similar to the original website where the photos are separated by specific groups but with more organisation on size and placement.
  • Contact Page: Contains a map on the business location alongside the address, phone number and e-mail. Additionally, a form is included that would be used to make enquiries or for ordering products. To make sorting easier, users would have to tick an option on whether their request is an enquiry or order.
I started off with a logo for the website since the original did not have one. A logo would help in a business being more recognisable as well as making it easier for the business to be applied on promotional materials such as posters or social media. Additionally, a logo can be part of a website's identity, which I tried to incorporate by having a design similar to a potted plant. As for the colours, I chose an off-white background with a combination of greens to be aligned with the website's theme being nature. Additionally, an accent of yellow was used alongside different hues of green to break the monotony as well as avoiding the website from looking dull or muddy. Most of the colours are chosen from the footer illustration with minor tweaks. As for the typeface, I decided to use two instead of three different typefaces as I feel it would be more consistent and cleaner. Rather than changing the typeface between heading and subheading, I instead decided to use the font Negto with different sizes and colours to differentiate the two. As for the body text, I decided to use Futura as it has a variety of styles to choose from, which can be useful for highlighting keywords. Since the original design consisted of buttons that was filled on the main page with little organisation, I decided to change the approach by having certain buttons designed differently with some based on the hierarchy (ie. explore page) following size and colour. The main buttons on the landing page leading to certain categories are designed based on potted plants to better suit the nature theme of the website and idea. Additionally, the buttons were made to have a hover effect to make it obvious to the users that they are clickable rather than just text in a box. Since the purpose of the website was to look through and order plants, I decided to slightly alter the enquiry form to include options on whether it is an enquiry or order. This would allow easier organisation and avoid cluttering, thus making it easier to reply to enquiries/orders since they would be kept separate.
Final Prototype: https://xd.adobe.com/view/83ef5261-182d-4991-8cb1-7b2f8f978235-d6bc/?fullscreen&hints=off





REFLECTION

This assignment consisted of making a prototype that would have the look and feel of our finalised website. I admit I struggled with creating the prototype quite a bit, especially considering the original website provided no base information such as the about and history. Thus, I had to make one for the website alongside its logo. The final result can definitely be better and I will try to improve on it for the actual final product. In terms of the software, I had trouble using Figma so I resigned myself to using AdobeXD, which wasn't exactly the best move considering it is technically an abandoned software by Adobe but somehow, I managed to make it work which is a relief.

Comments

Post a Comment