Interactive Design Project 2 - Websites Redesign Prototype

 Student ID : 0379395

Name : HE KEHUA

Dev Mode Link:https://www.figma.com/design/KhDe89OPNMJqcn3LVzh4xr/Taylor?node-id=0-1&m=dev&t=AIwh4r56ubRw8CKw-1

Prototype Link:https://www.figma.com/proto/KhDe89OPNMJqcn3LVzh4xr/Taylor?node-id=0-1&t=AIwh4r56ubRw8CKw-1

A brief write-up

In the first part of the analysis, I mainly dissected the problems of Taylor’s University’s official website from the perspectives of navigation, information structure, and visual consistency. In the second part, the Prototype stage, I truly transferred those ideas from paper to Figma. This process was more challenging than I imagined and made me realize that “interaction design” is not just about drawing beautiful interfaces, but about seamlessly integrating experience, content, and visuals.

When creating the Homepage, I spent a lot of time thinking about the “first impression.” Because the existing website has so much content, users easily experience visual fatigue and struggle to identify the key points. Therefore, I reorganized the information hierarchy, using the Hero Banner as the core attraction, retaining only a concise and powerful title, along with a clear CTA button, hoping to prevent users from being overwhelmed upon entering. I personally prefer a design approach with breathing room, so I used more white space to make the interface appear more modern, lighter, and more in line with Taylor’s emphasis on youthfulness and prestige.

For the Core Page, I chose "About" as the prototype because it truly reflects the school's value and positioning, and is the entry point most important to new students and parents. I presented the content in a modular way, breaking down the large amount of text into several easily readable sections, such as "Why Taylor's," "University Vision," and "Campus Experience." To avoid the page looking like a wall of text, I visually added columns, icons, and image-text sections, and used font size and color contrast to enhance hierarchy. Creating this page made me realize a very practical issue: when there's a lot of content, simply pursuing aesthetics is useless; the way information is organized is key to whether users can easily find the answers.

 The Contact Page went relatively smoothly and left a deep impression on me. The original contact page had a lot of information, but real users probably only want to complete one thing: fill out a form. Therefore, I significantly reduced visual clutter, leaving only the most basic Name, Email, and Message input areas, and adding a lightweight hover state and click feedback. Although it's a prototype and can't be actually submitted, these small interactions make the whole experience more realistic and demonstrate my emphasis on usability.

 During the entire prototype development process, I discovered that many ideas that "sounded reasonable" in the proposal stage revealed problems when it came to actually creating the interface. For example, I originally planned to add many subcategories to the navigation bar, thinking it would make the information more complete. However, after creating the prototype, I immediately realized that too many options made it difficult for users to know where to start. I later deleted half of them, making the primary navigation more concise and focused. This made me understand even more why "less is more" is so important in interaction design.

 The biggest takeaway for me from this prototype-making experience was truly understanding the interconnectedness of UX and UI. You can't just consider "looks good" or "usability" in isolation; both must be considered in conjunction with the user flow. For example, the CTA on the homepage, the information segmentation on the About page, and the form layout on the Contact page were all finalized after repeated adjustments.

 Overall, I believe this prototype already captures the core ideas I envisioned for the Taylor’s website redesign: a clearer navigation structure, a more comfortable visual rhythm, and a more modern and user-friendly overall feel. While there are still many areas for improvement, this process has truly given me a better understanding of how a complete website is built step-by-step from "concept" to "experience," and it has also given me more confidence for future professional projects.

Demo video：https://drive.google.com/file/d/1H_L-46mmo5umjdgj9t8pXIHpv5ugmSfN/view?usp=sharing