Interactive Design : Project 2 : Website Redesign Prototype

-

 Interactive Design : Project 2 : Website Redesign Prototype

__________________

Project 2 - Website Redesign Prototype
DING JIAQI / 0379388
Interactive Design  / Bachelor of Interactive Spatial Design 
__________________

Project 2 : Website Redesign Prototype


Fig 1.1 Introduction

Introduction:

Assignment Objective: Transform the website redesign into a functional prototype, visually showcasing design improvements and demonstrating the application of design principles and UX strategies.

Core Task: Based on the initial redesign, develop a prototype using tools such as Adobe XD and Figma. The prototype must include interactivity and key pages.

Prototype Requirements: Clickable, supporting page navigation and interaction with core elements, including button hover effects, form fields, and other interactive effects.

Required Pages: Homepage, at least one core content page, and a contact page.Usability and a realistic interactive experience must be ensured.

Submission Content: Accessible prototype; a 500-800 word electronic portfolio description.

The goal of the redesign:

My design goal was to create a clearer, more user-friendly, and more aesthetically pleasing online platform for SFACC, allowing users to accomplish their most important tasks with minimal steps. I made the overall visual design more unified and modern, such as standardizing the proportions and style of animal photos, streamlining the layout, and making the large images and buttons on the homepage clearer and more attractive. Simultaneously, I enhanced the overall user experience and accessibility, ensuring easy access for different users.

Original website link:https://www.sfanimalcare.org

Visual Reference：

Fig 2.1 Visual reference


A brief overview of the prototype:

SFACC (San Francisco Animal Care & Control) is the official animal service platform of San Francisco, providing the public with services such as pet adoption, lost-and-found searches, volunteer participation, and animal rescue. This redesign is based on the structure of the existing website, with a focus on improving information readability, streamlining user flows, and enhancing the overall visual experience.

The prototype includes four main pages, as follows:

Home Page

• A hero section for key announcements, rescue alerts, and seasonal reminders (such as “Found Kittens?”).
• A service navigation section that allows users to quickly access Adoption, Lost & Found, Wildlife, Volunteer, and other major features.
• A donation and support area that uses warm visuals and clear CTAs to encourage community participation.
• A highlights section showcasing successful adoption stories and community events.

Adoption Information Page (Adoption Info)

• A thematic banner introducing the philosophy and steps of the adoption process.
• Card-based sections explaining the “Adoption Process,” “Choosing the Right Pet,” and “Important Notes.”
• Quick-access options for different animal categories (dogs, cats, rabbits, and small animals).
• Newly added “Adoption Tips” and “FAQs” to help first-time adopters better understand the essentials.

Adoption Listing Page (Adoption Listing)

• Animal cards presented in a unified aspect ratio, showing essential details such as age, sex, and personality traits.
• Category switching options for different animal types (dogs / cats / rabbits).
• Prominent buttons such as “View Details” and “Book Appointment” to reduce user effort in finding key actions.
• A clean, consistent layout optimized for both desktop and mobile use.

Contact Us Page (Contact Us)

• A simple message form including name, contact information, inquiry type, and message content.
• An integrated map module displaying SFACC’s physical location.
• A newsletter subscription section allowing users to opt into updates.
• A warm and welcoming tone throughout the page to strengthen trust and friendliness.

  Design Direction & Experience Enhancements：

The overall website layout underwent a significant redesign to reduce the clutter present in the original site. By increasing whitespace, standardizing the grid system, and adjusting spacing between sections, the structure becomes cleaner and easier to read. Meanwhile, the color palette and UI components (buttons, cards, rounded corners) were standardized to maintain consistency across the entire site and deliver a cohesive browsing experience.


Prototype/Final Submission:

Fig 3.1 Prototype





Comments

Post a Comment

Popular posts from this blog

INTERACTIVE DESIGN: EXERCISE 1: WEBSITE ANALYSIS

-
Image
INTERACTIVE DESIGN: EXERCISE 1: WEBSITE ANALYSIS  —— Start from 3.9.2025 23.9.25-1.10.2025/Week1- Week2 Ding Jiaqi/0379388  Interactive Design/ Bachelor of interactive spatial design —— EXERCISE 1: WEBSITE ANALYSIS      1. Select Websites: Choose five (5) websites from the provided link. 2. Analyze Websites: For each selected website, review it carefully by considering: The purpose and goals of the website and whether they are effectively communicated to users. The visual design and layout, including the use of color, typography, and imagery. Functionality and usability, including navigation, forms, and interactive elements. The quality and relevance of the content, including its accuracy, clarity, and organization. The website’s performance, such as load times, responsiveness, and compatibility with different devices and browsers. Identify the strengths and weaknesses of each website and how they impact the user experience. 3. Write Reports: Write a brief repor...
Read more

Games Studies

-
Image
Ding Jiaqi/0379388 Games Studies 2/ Bachelor of interactive spatial design Week 1 Course Tasks Overview Individual Tasks:  Complete two exercises:   1. Describe a favorite game and its fun elements.   2. Explore the evolution and improvement of games. These aim to build personal skills and support group design efforts. Organize and evaluate project updates. Write a personal reflection at the end of the semester. Compile everything into a digital portfolio. Group Tasks: Create a tabletop game prototype in phases, progressing with weekly tasks. Peer evaluation of team member contributions at the end of the semester.   Course Timeline Preparation Phase (Weeks 1–4): Course introduction Learning about fun and educational elements Game experience and dynamic system design Start individual exercises Finalize game concept and begin developing the alpha version Prototype Development and Testing (Weeks 5–12): Present initial proposal and framework Conduct multiple testing roun...
Read more

Embedded System

-
Image
Ding Jiaqi/0379388 Embedded systems / Bachelor of interactive spatial design Week 1 Class Summary and Reflection In this class, I gained a deeper understanding of the integration of embedded systems and interactive spatial design. I learned that embedded systems are widely used in fields such as smart homes and industrial automation, while interactive spaces enhance user experiences through technologies like holograms, LED walls, and VR/AR. Additionally, the class provided a detailed explanation of the requirements and content of Assignment 1, helping us understand how to complete it effectively, including selecting appropriate embedded system concepts and interactive design approaches and integrating them to create an engaging interactive space. During the class discussion, we conducted a group discussion on Assignment 1, exchanging ideas and ultimately deciding on our project’s theme—conveying the concept of environmental protection. We aim to use embedded systems and interactive sp...
Read more