Labels

Interactive Design - Project 2 Web Prototype Redesign

26/5/25 - 9/6/25 (Week 6 - Week 8)
Anggia Tsani Rachmadiyanti, (0368487)
Interactive Design / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task: Project 2: Web Redesign Prototype


 CONTENT LIST 

 LECTURE NOTES: 

Lecture 7: Box Model-Layout in CSS
  • Display Property 
    • Display is CSS's most important property for controlling layout.
    • Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline.
  • Block-Level element
    • <div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right
  • Inline element
    • <span> is the standard inline element. An inline element can wrap some text inside a paragraph.
Lecture 8: In Class Exercise



Lecture 9: In Class Exercise (making dropdown menu)




 Link of My Chosen Website : 


 Final Web (1280px) Desktop Prototype Link : 



 Module Brief 




 Project 2: Web Redesign Prototype 


 Instructions: 

The objective of this assignment is to translate your website redesign proposal into a functional prototype using Figma. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.

Requirements:

- clickable prototype that includes key pages and features of the redesigned website. 

- Key Pages: Homepage, Core Content Pages: Develop prototypes for at least two core pages (e.g., About Us, Services, Products)

- User Experience (UX) Considerations: 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.


 Work Process On Figma: 

Before starting, I watched alot of tutorials online on how to use Figma for beginners as my class section was way behind due to the amount of holidays, meaning we missed 2 classes on campus, so we had to catch up fast.

I decided on creating 5 pages (desktop version 1280px width) for the prototype redesign of my chosen website: https://www.rainbow-kennels.com/index.htm
  1. Homepage
  2. About Us 
  3. Pet Adoption
  4. Pet Boarding
  5. Contact Us
Here is the screenshot of my figma process for the 5 pages:


To create the image carousel slider with clickable arrows, I made a frame > component > add variants and connect them to each other using the Interaction tool for it to work. This required a little bit of thinking as well as sometimes it gets complicated and small errors happen.

I used the 'Interaction' tool to link pages and elements, and dragged the connection link from the button to the destined element/page. Another use of the Interaction tool was to create the Hover effect animation. 







 Project 2 - Final Working Prototype Link: 



My Prototype Width: 1280px

(Embedded View)



 (800 words) Writeup About My Prototype: 

The redesigned website prototype for Rainbow Kennels was developed with the primary objective of transforming the existing outdated interface into a modern, user-centric digital platform that reflects the professionalism and warmth of a trusted pet care provider. This redesign aligns with four core goals: to enhance visual appeal, improve usability, feedback, user interaction, experience, navigation, boost interactivity, and establish a better brand identity.

How the Prototype Meets the Redesign Objectives:

The prototype meets the redesign objectives through firstly, visual appeal: Overall design presents a fresh, modern, and pet-friendly aesthetic, replacing the dated aesthetic of the original site. Secondly, there's improved usability & navigation: The new layout simplifies user pathways, improves discoverability of services, and allows users to find information with minimal effort. Thirdly, there's increased interactivity: Engaging elements like hover effects buttons, forms, carousels, and CTAs encourage user interaction. Lastly, I improved and make clearer brand identity: Added “About Us” (Goals, Missions), testimonials and through consistent colors, fonts, imagery, and tone, the prototype shows Rainbow Kennels as a professional, caring, and trustworthy pet careprovider.
Key Features of the Prototype:
  • Simplicity: Clean sections, intuitive navigation, and clear icons, brief text, and non cluttered text and images make the site easy to understand and use. The prototype introduces a fresh layout that emphasizes simplicity and readability. White space is used to prevent visual clutter, allowing key information and CTAs to stand out.
  • Feedback: Interactive elements like button hover animations, and form responses provide immediate visual feedback. This reassures users that their actions (e.g., clicking a link or submitting a form) are working. For the ‘Contact Us’ page, “Success” message shows up once the user clicks on the Submit button. This is to ensure they are aware that their message has been delivered successfully.
  • Error Prevention: I added an Error message saying "Please fill in this field" if the person leaves a field blank in ‘Contact’ form.
  • Consistency: Typefaces, font sizes and button sizes, colors, icons, and button styles are used consistently. This strengthens brand identity and helps users navigate the site without confusion.
  • Visibility: The navigation menu is placed clearly on top in the header of all the pages. Important features, like contact info and CTAs (“Book Now,” “Get in Touch”) are clearly placed and without needing to scroll much.
  • Better navigation: A top navigation bar with clear menu enhances site simplicity, convenience and usability. There’s feedback when hovering on the buttons and links, there’s animations. Clear sectioning, footer anchor links, and a structured information hierarchy guide users smoothly from one section to the next.
  • Responsive and Device-Friendly Layout: Buttons and text are large enough for touch interaction, fonts are clear, and legible on screen.
  • Trust-Building Elements: To foster trust, reviews from happy clients are displayed in the ‘about us’ page. In the ‘About Us’ page, I added Vision, Goals and Missions so the company can be more trusted.
Design Improvements made:

For the header, I added a navigation menu bar, new logo design and CTA buttons. part from that I created a new color palette: Earthy tones were chosen to resonate with the nature theme of pet care and to provide visual calmness. Accent colors (orange & blue) highlight call-to-action buttons without overwhelming the user. Other than that, I changed the fonts to modern sans-serif clean fonts for better readability and friendliness. Bold headline font and a clean body text creates clear visual contrast. I placed paw prints on some parts of the pages to give the 'Pet' vibe and feeling to it. More images are also put. There's improved visual hierarchy: Headings, subheadings, and body text were structured to guide the eye naturally from key information to details. I made clear section breaks to improve the flow and structure. Furthermore, I added slight transitions to how the elements reveal themselves. In the footer, I placed the logo, links to all pages, address, and other info of the company as well. Inspired by: https://www.wemake.nl/ , next to the contact form I placed the image of the map on the Kennels' location which leads to Google Maps when you click on the image.

Interactivity, engagement and UI/UX:

"Get In Touch" CTA button in the homepage and the CTA “Reach Us Here” on the top right header leads directly to the Contact Page. I improved on ‘Feedback’ and interactive elements such as the hover, transitions on the buttons using the Frame, Variant and Component tools in Figma.

Another feature I added was Carousell Image Sliders with a clickable arrow button. I used carousels to showcase boarding facilities and types of dog bloodlines briefly. Moreover, a clickable "Back to Top" anchor is put in the footer so that the viewers won't have to scroll all the way up manually. Lastly, I added radio buttons in Contact Us page for clients/people to select what subject is their message going to be about.
    ---------------------------------------------------------------------------  (771 words) ----------------------------------------------------------------------------


    Screenshots of new added elements on my Figma Prototype:










     Prototype walk-through video demo: 

    Here's the recorded presentation with my voice in it explaining my final Figma Prototype:



     Feedbacks : 

    Week 9: Sir said my website prototype was good. However, I need to edit slight changes: I need to make the size of the buttons more consistent throughout. He also told me to not make the top navigation bar sticky and remove the round border around it.


     Overall Project 2 Reflection : 


    Working on Project 2 has been a valuable learning experience. This task pushed me to apply key UI/UX principles while navigating a design tool I had never used before which was Figma. It felt really scary at first since I have never been introduced to using this website before.

    Since this was my first time using Figma, I initially felt overwhelmed by its features and interface. Additionally, my class section unfortunately missed two on-campus interactive design sessions due to holidays, which made it more challenging to keep up. As a result, I had to rely heavily on self-learning, mainly through YouTube tutorials and online resources as well as online recordings shared by Mr. Shamsul, to understand how to begin and start creating pages, frames, add interactions, and design.

    Despite the challenges, I found the process engaging and creatively rewarding. I learned so much of the importance of clear navigation, simplicity in layout, and the value of interactive elements like hover states and clickable buttons in improving user experience. Designing core pages such as the Homepage and About Us taught me how important visual hierarchy and consistent UI elements are in guiding users smoothly through a website. Apart from all that, I suffered mostly on creating the Contact Us page where I had to create a working field form entry. However, after trying to experiment many ways from Youtube tutorials, I managed to do it properly. I also learnt a new way on how to make image carousel sliders that can work.

    To conclude, this prgoject not only strengthened my digital design skills but also improved my problem-solving ability and self-discipline. I'm proud that I was able to build a working, clickable prototype that includes the key features and pages, even without prior Figma experience. Going forward, I feel more confident in using Figma and applying UX strategies to create user-centered designs. I hope to improve more and apply whatever I have learnt in this project 2 onto my next project.


    SEM:

    Comments

    Post a Comment