Interactive Design - Project 2

-

 Interactive Design - Project 2

26/5/2025 - 16/6/2025 / Week 6 - Week 8
An Hongzheng / 0378415
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Project 2: Website Redesign Prototype
4. Feedback
    LECTURES

    Week 7

    Lecture 7

    Fig.1.1.1 The Web / (Week 4, 13/5/2025)

    Week 8 

    No Lecture
    Independent week, self-directed task to do at home. A zip file  provide and we were assigned to fix the file. (Link here)

    Week 9 

    Lecture 9
    How to do a CSS dropdown menu using Adobe Dreamweaver.
    INSTRUCTIONS
    Figure 2.1: Instruction / Week 1 (21/4/2025)

    PROJECT 2
    WEBSITE REDISGN PROTOTYPE

    Description:

    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 design principles and UX strategies effectively.

    Prototype Development:

    Interactive Prototype:

    - Develop a clickable prototype including key pages & features of the redesigned website.

    - Prototype should allow users to navigate through the site and interact with essential elements.

    Design Fidelity:

    - Choose an appropriate level of fidelity (low, medium, or high) based on the project's scope.

    - Effectively communicate the look and feel.

    Tools:

    - Use Adobe XD, Figma, Sketch, etc.

    Key Pages to Include:

    - Homepage (navigation, hero section, key content areas)

    - Core Content Page (at least ONE core pages, e.g., About Us, Services, Products)

    - Contact Page (forms/others)

    User Experience (UX) Considerations:

    - Usability (user-friendly, clear navigation, intuitive interfaces, accessible features)

    - Responsiveness (adapts to different screen sizes)

    - Interactivity (interactive elements - buttons, hover states, form fields)

    Submissions:
    - A fully functional prototype ACCESSIBLE via a SHAREABLE link / DOWNLOADABLE file
    - A brief writeup (500-800 words) outlining the key features, design decisions during development, how the prototype addresses the objectives set in the proposal.


    PROCESS IN FIGMA

    1. Set Up Project Workspace

    Frame Size W:1440px, H: 5750

    Layout Guide:
    - Column: 8
    - Width: 150
    - Gutter: 20

    Figure.3.1.1 Progression #1 / (Week 7, 3/6/2025)



    2. Created Components 
    • Buttons
    • Navigation Bar
    • Pure Text
    • LOGOS
    • POINTS & ARROWS

    Figure.3.1.2 Progression #2 / (Week 7, 3/6/2025)


    3. Imported High-quality Food images
    Steps:
    1. Save images from the original website
    2. Imported all the images into Figma
    3. Adjusted the image (exposure, contrast, saturation, etc.)

    Figure.3.1.3 Progression #3 / (Week 7, 3/6/2025)


    4. Adding Main Tilte, Pictures & Creating Shapes for general layout

    Figure.3.1.4 Progression #4 / (Week 7, 3/6/2025)


    5. Added Interaction & Detailed Text

    Figure.3.1.5 Progression #5 / (Week 7, 3/6/2025)


    6. Other Pages
    Figure.3.1.6 Progression #6 / (Week 7, 3/6/2025)

    Figure.3.1.7 Progression #7 / (Week 7, 3/6/2025)


    7. Refinement After Feedback
    Figure.3.1.8 Progression #8 / (Week 7, 3/6/2025)



    8. Final Testing & Overview
    Figure.3.1.9 Progression #9 / (Week 7, 3/6/2025)


    FINAL OUTCOME - PROTOTYPE



    Fig.3.1.10 Final Outcome - Full Page - JPEG / (Week 8, 11/6/2025)

    • Homepage - Overview Page
    • Navigation Bar
    • Apartments Page
    • About Us Page
    • Contact Page
    • Blog Page
    • Check Rates to Book Panel
    • Footer



    Key Pages

    1. Homepage

    Navigation Bar:  
    -Navigation Bar delete the sections for "RENO&DECO" and "Book". 
    "RENO&DECO" in original website is kind of confused feature, and there is no content in it.
    "Book" is a repeated feature with the following content.
    -I choose wihte coulor for a dark brown backgournd, so it can be clear and give user a sense of classical.
    - For the Font, I choose "Aboreto", it's an elegant font which is suitable for the website.

    Quick Check Rates Panel:  
    - The Quick Check Rates Panel was designed to display on the top all the time when user read and drag down or up the website page, the function for it is to be convenient for customers to check apartment information and book rooms at any time. This can also reduce the space for "book" section in a certain space in the original website.
    - The design use the theme coulor of "Eminent Logo", so it can keep the general consistency.
    - The background is a classic theme color, but with reduced transparency, the image appears more transparent and not oppressive.

    Basical Introduction: 
    - A very short and besical introduction to all 3 branches of apartmens.
    - Use a "Aboreto" font for title and subtitle, and "roboto regular" for main content so it can be clear enough for view.
    - A light purple backgroud with low transparency, so it can make the picture not monotonous while not appearing too abrupt

    Apartments:
    -Place pictures of each apartment on a rectangular card with a brief introduction and the "check rates" and "detal" functions for each apartment. 
    -The curvature of the graphic edges has been increased, which can make the website design less serious.
    -Yellow stroke for rectangles and add shadow effect, so that the white rectangles won't be mixed with the white background.
    - Applied hover interaction for "check rates" and "detal" buttons and arrows.

    A Little About Us:
    -Same design with the Introduction section.

    Contacts:
    - Include contact methods include "phone number","email" and address. 
    - Provides social media platforms for user to view.
    - A simple form for users to give feedback or other message.
    - Applied hover interaction for all social media logos, arrows, forms and images view.

    Footer:
    - Repeat of navigation var
    - Copyright included.


    2. Core Content Page - Apartments Page

    General Introduction:
    - Repeat design and information with the "Basical Introduction " at homepage.

    Apartment Detailed Information Cards (Columns/List): 
    - Similar design with the "aparments" section at homepage, but include more detail  information and bigger images view for each aprtments.
    - Include a total number of all aparments and apartments in each areas.
    - Columns and List view options.
    - All of "view all", "D'Latour", "I-SOHO", "ICON CITY", "check rates" and "detal" button and arrows. has a interactive hover function.

    Navigation Bar: 
    - Same as the homepage.

    Quick Check Rates Panel: 
    - Same as the homepage.

    Services:
    - Repeat of  "A Little About Us" section at homepage.

    Footer:
    - Social Media intercative logos above.
    - Repeat of navigation var.
    - Copyright included.

    3. Contact Page

    Navigation Bar: 
    -Same as the homepage.

    Quick Check Rates Panel: 
    -Same as the homepage.

    Contact Form: 
    - A more detailed and formal contact forms for users with light brown coulor. Applied underline stroke for each fill form section 
    - "Submit" button with hover interaction.
    - Guide text with hover interaction in forms.

    Contact Details (Phone #, email, address, Social Media):
    - Same as "contact" section at homepage's design.
    Footer: 
    - Repeat of navigation var
    - Copyright included.



    UX Considerations:

    1. Interactivity
    -Interactivity in the Eminent Real Estates website prototype enhances user engagement by allowing seamless navigation and action-taking. It includes clickable elements like “Check Rates” and “Details” buttons for apartment listings, enabling users to explore options effortlessly. The “Special Rates” dropdown and pagination (e.g., 1/1, 1/2) provide dynamic choices and content navigation, while the hero image slideshow adds a visual interactive layer. These features aim to simulate a responsive and intuitive experience, encouraging users to interact with the interface naturally.

    2. Usability
    -Usability focuses on creating an accessible and intuitive experience for users exploring the Eminent Real Estates prototype. The clean layout, with a prominent header, organized apartment listings, and a clear footer, ensures easy content discovery. Concise text under “Discover Our Apartments of Three Branches” explains the offering, supported by intuitive icons (e.g.bed, calendar, phone, email) in contact and listings. The contact form and navigation bar are designed to guide users through key actions, prioritizing clarity and simplicity to make the interface welcoming and easy to learn.

    3. Responsiveness
    -    Responsiveness ensures the prototype adapts to various devices, maintaining functionality and aesthetics. The single-column layout for apartment listings and the wide hero image are crafted to scale across screen sizes, from desktops to mobiles. Buttons and form fields are sized for touch interaction, while the navigation and footer elements are structured to reflow gracefully. This approach aims to provide a consistent and visually appealing experience, regardless of the device used to access the site.


    How the prototype addresses the objectives set in the redesign proposal:

    The redesigned Eminent Real Estates hotel website prototype effectively addresses the objectives outlined in the redesign proposal, enhancing the overall user experience and aligning with the target audience’s needs. Here’s how the prototype meets the goals:

    • Modernize Aesthetics: The prototype introduces a cohesive single-column layout with a full-width hero section featuring a high-quality cityscape image, replacing the original’s colorful LED-lit trees and generic visuals. A consistent color scheme of white backgrounds, dark gray text, and orange accents creates a professional, brand-aligned look that reflects current web trends, moving away from the original’s cluttered and inconsistent design (e.g., varied image shapes and jarring “Testimonial” orange).
    • Enhance Usability: Navigation is streamlined by trimming the menu to “Overview,” “Apartments,” “About Us,” “Contact,” and “Blog,” removing vague options like “Reno & Deco.” The booking process is simplified with a prominent “Check Rates” button and a clear header form, reducing confusion from the original’s repeated “Book Now” buttons. Apartment highlights with “Check Rates” and “Details” options provide a frictionless journey, improving accessibility to key information for travelers seeking vacation rentals.
    • Boost Accessibility: The prototype improves contrast with a white background and dark gray text, enhancing readability over the original’s dark theme with gray and colorful banners. Semantic structure is implied through organized sections, and the inclusion of alt text-friendly imagery (e.g., property photos) supports inclusivity. The layout’s adaptability to mobile devices further ensures broad usability.

    By addressing these objectives, the prototype delivers a trustworthy, easy-to-use site with appealing visuals and quick access to apartment details, effectively catering to families, solo explorers, and business visitors.


    Link:

    FEEDBACK
    - The size of content in "contact us" seciton at homepage is too big.
    - Need at least 3 pages, review the instruction on google classroom.


      Comments

      Post a Comment

      Popular posts from this blog

      Interactive Design - Exercise 1

      -
      Image
      Interactive Design - Exercise 1 21/4/2025 - 4/5/2025 / Week 1 - Week 2 An Hongzheng / 0378415 Interactive Design / Bachelor of Design in Creative Media / Taylor's University Exercise 1 TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Exercise 1: Web Analysis     3.1 Baci Baci Matera     3.2 Praxis Leandra Isler     3.3 Language Inclusion - Google Research      3.4 Altly.AI      3.5 Augment Therapy 4. Feedback 5. Reflections LECTURES Week 1 Lecture 1 INSTRUCTIONS   Figure 2.1: Instruction / Week 1 (21/4/2025) EXERCISE 1: WEB ANALYSIS Exercise 1: Choose  FIVE (5) websites  from the link given. Review the website that you've selected carefully, taking note of its  design, layout, content, and functionality . Identify the  strengths and weaknesses  of the website, and consider  how they impact the user experience . Write a brief report summarising your findings and recommendations. What To Have in...
      Read more

      Typography Task 1 / Exercises

      -
      Image
      28/09/2024 - 03/11/2024 / Week 1 - Week 4 An Hongzheng / 0378415 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1 : Exercises CATALOGUE Lectures Instruction Task 1 - Exercises Task 1 - Exercises 2 Feedback Reflections Further Reading LECTURES Week 1 : Typo_0_Introduction Typography is a fundamental aspect of design, used in various fields like animation, graphic design, and new media. It involves creating letters, typefaces, and type families, and is essential in website and app design, signage, and product packaging. Typography focuses on arranging text to enhance legibility and visual appeal, making it a skill practiced by many today. Figure 1.1.1 Examples of typography using in website design, app design, signage design, labels . Typography is the art and techniques of arranging type to make written language legible, readable and appealing when displayed.  /It is now something everybody does./ Terminology Font:a font refers to the individ...
      Read more

      Typography Task 3: Type Design and Communication

      -
      Image
      4/11/2024 - 24/11/2024 / Week 7 - Week 9 An Hongzheng / 0378415 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 3 :  Type Design and Communication CATALOGUE Lectures 2. Instructions 3. Task 3: Type Design and Communication       3.1 Research       3.2 Sketches       3.3 Identify and deconstruct references       3.4 Digitalized       3.5 FontLab       3.6 Final Outcome 4. Feedback 5. Reflection 6. Further Reading LECTURES Week 7 (Lecture 7): Mr. Vinod briefly introduced us to the content of our Task 3. We use prepared markers and grid paper to draw sketches with uppercase and lowercase letters: "h, o, b, g". We need at least three different styles. Fig.1.1.1  Deconstructed "r" Fig.1.1.2  References Fig.1.1.3  Additional reference of a writing tools Tools: 1. The broad-edge pen (flat)...
      Read more