Interactive Design: Project 2 - Website Redesign Prototype
04/06/2025 - 22/06/2025 / Week 7 - Week 9
Ye YingYing / 0364398
Interactive Design / Bachelor of Design
(Hons) in Creative Media / Taylor's University
TABLE OF CONTENTS
INSTRUCTION
Project 2 - Website Redesign Prototype
- Quick Link -
Prototype Link:https://www.figma.com/proto/21AETRY9bi3hje64kFJWag/Untitled?node-id=0-1&t=WKkmECs1oXokmmdi-1
Pages created for Project 2:
1. Home page
2. Content page (Alumni)
3. Contact page
- Working Progress -
- References
I began by researching layout references for homepage, contact page, and content page. I focused on how other websites organize text and images, especially in terms of section hierarchy, spacing, and visual flow. This helped me understand how to structure my own pages more clearly and effectively in Figma.- References
- Content Planning & Flow
Next, I reviewed the original SCHS website to decide what content I needed to include in my Figma redesign. I identified the key sections for each page, planned the overall layout structure, and listed the main content to be displayed. I also considered what type of images would support each section and how users should flow through the page for a clear and engaging experience.At this stage, I also finalized the visual identity of the redesign — including font pairing (Crimson Text for headings and Inria Sans for body text), the color for the website, and selected photographs that reflect the school’s environment and values.
Next, I worked on designing the navigation bar, which also functions as the header. On the top left, I placed the school’s logo, followed by the school’s name in both Chinese and English.
The navigation bar includes the following main items:
- Home
- About (dropdown: School Profile, Identity, Policy, Mission & Vision, Strategic Plan)
- Leadership (dropdown: Past Principals, Staff, Retired Staff )
- Board (dropdown: Constitution, Committee Guidelines, Current Board Members)
- Campus Info (dropdown: Calendar, Campus Map, School News, MakerFaire)
- Alumni
- Contact
I applied hover effects to all the interactive items in the header, where the text changes from blue to red to provide visual feedback.
For the dropdown menus, I experimented with several methods and eventually used a workaround. I added a transparent frame behind the text to create a hover-sensitive area, triggering the menu to slide down when hovered. Although the final effect wasn’t perfectly smooth, it was the best outcome I could achieve.
The footer is divided into three main content areas:
For the dropdown menus, I experimented with several methods and eventually used a workaround. I added a transparent frame behind the text to create a hover-sensitive area, triggering the menu to slide down when hovered. Although the final effect wasn’t perfectly smooth, it was the best outcome I could achieve.
- Footer
For the footer section, I used a blue background to create contrast and clearly separate it from the main content. On the top left, I placed the school’s logo and name (in both Chinese and English), maintaining consistency with the header design. The footer is divided into three main content areas:
- School Info: Includes essential contact information.
- Quick Links: Provides direct links to selected key pages like About, Admissions, and Contact, making it easy for users to navigate to important sections.
- Office Hours: Displays the school’s operating hours from Monday to Friday, and clearly states that the office is closed on weekends.
I applied hover effects to all the interactive items in the header, where the text changes from blue to red to provide visual feedback.
At the very bottom center, I added a simple credit line, acknowledging the school and the purpose of the redesign.
- Home page
At the very bottom center, I added a simple credit line, acknowledging the school and the purpose of the redesign.
I began with a hero section featuring a key headline and background image. Just below, I added a horizontal bar with Teacher Recruitment, Admissions Info, and Study Abroad Guide.
This is followed by three info blocks: Latest News, Upcoming Events, and Campus Announcements.
Next is the About the School section, where I placed a school photo on the left and key text content on the right. I ensured ample white space to enhance readability and give the layout a calm, professional tone.
I then highlighted the school’s strengths in the Academic Excellence section, showcasing top scorers in SPM and UEC.
For the Campus Map, I placed interactive pins on each building. When hovered, the pins turn from blue to red and display the building’s name.
Lastly, I added a Campus Life gallery without additional text. It displays four images in an auto-shuffling slideshow to showcase the vibrancy and everyday moments at SCHS.
Next, I designed a section for the Alumni Affairs Office, introducing its purpose and listing the key committee members. This part is divided into two balanced blocks for better clarity.
Then, I added a Sponsorship Fund section, briefly explaining its background and objective. This is followed by a donation call-to-action, where I clearly separated local and international donation methods into two distinct blocks for easy reference.
- Contact Us
This is followed by three info blocks: Latest News, Upcoming Events, and Campus Announcements.
Next is the About the School section, where I placed a school photo on the left and key text content on the right. I ensured ample white space to enhance readability and give the layout a calm, professional tone.
I then highlighted the school’s strengths in the Academic Excellence section, showcasing top scorers in SPM and UEC.
For the Campus Map, I placed interactive pins on each building. When hovered, the pins turn from blue to red and display the building’s name.
Lastly, I added a Campus Life gallery without additional text. It displays four images in an auto-shuffling slideshow to showcase the vibrancy and everyday moments at SCHS.
- Content page (Alumni)
For the Alumni page, I began with an intro section that communicates the goal of reconnecting alumni with the school, accompanied by a representative photo and sufficient white space to keep the layout clean. Next, I designed a section for the Alumni Affairs Office, introducing its purpose and listing the key committee members. This part is divided into two balanced blocks for better clarity.
Then, I added a Sponsorship Fund section, briefly explaining its background and objective. This is followed by a donation call-to-action, where I clearly separated local and international donation methods into two distinct blocks for easy reference.
The Contact page features a clean and minimal layout. I included a friendly intro line encouraging visitors to reach out.
On the right, I placed the school’s contact information, including address, phone number, email, and Facebook.
On the left, I designed a simple contact form with fields for name, email, subject, and message.
The layout is responsive and ensures that all important contact channels are easily accessible.
- Interactive Elements Overview
- 3 Pages Overview
On the right, I placed the school’s contact information, including address, phone number, email, and Facebook.
On the left, I designed a simple contact form with fields for name, email, subject, and message.
The layout is responsive and ensures that all important contact channels are easily accessible.
- Final Outcome -
One of the biggest problems with the original site was its outdated appearance and lack of visual identity. To solve this, I applied a clean and modern design approach using warm and lively colors to reflect the spirit of the school. I defined a consistent visual direction with improved typography, better color contrast, and a clear hierarchy across all pages. The goal was to visually represent the school’s excellence, values, and energy, which is something that the old design failed to communicate. To improve content organization, I simplified the site structure and clarified the information hierarchy. Each page uses a consistent layout with clearly defined sections
Prototype Highlight
- Header / Navigation Bar: A new header with a fixed position allows easy access to navigation at all times. The navigation menu is simplified, with grouped items and drop-downs clearly organized into Home, About, Leadership, Academics, Student Life, Admission, Alumni, and Contact. The use of hover effects adds interactivity, with menu items changing color on hover for better user feedback.
- Hero Section: The homepage starts with a large hero image accompanied by a bold tagline and a smaller subtitle that expresses the school’s vision. A row of call-to-action buttons (Teacher Recruitment, Admissions Info, Study Abroad Guide) sits just below the hero, giving users direct access to important sections.
- Well-Structured Content Blocks: The homepage features sections for latest news, upcoming events, and announcements in a visually balanced three-column layout. School information is clearly presented with photo-text pairing for visual harmony and white space.
- Academic Achievement Section: This section highlights students’ exam results using cards that present their names and photos. By dividing the information into SPM and UEC results, users can quickly see the academic strength of the school.
- Interactive Campus Map & Gallery: The interactive campus map includes hover-triggered pin effects that show building names, adding both functionality and engagement. A photo gallery below showcases campus life with auto-shifting images, making the page more dynamic.
- Alumni Content Page: The alumni page includes a mission-driven introduction, committee member profiles, and a sponsorship fund section with a detailed donation guide (including separate blocks for local and international methods).
- Contact Page: This page includes full school contact info, office hours, and a clean form for user messages. A friendly message encourages visitors to reach out, keeping the tone warm and welcoming.
- Footer: The footer design uses a blue background to stand out from other sections. It contains the school logo and name, contact info, quick links, office hours, and credit details, and is all organized well for easy scanning.
Improvements & Refinements
Compared to the original website, this prototype shows significant visual and structural improvements:
Compared to the original website, this prototype shows significant visual and structural improvements:
- Replaced the outdated, grey-toned interface with a warmer, more welcoming palette.
- Used two well-matched fonts (Crimson Text and Inter) to establish typographic hierarchy and personality.
- Created a stronger visual identity through better use of layout, color, and iconography.
Improved the user experience by optimizing content flow, whitespace, and interactive features.
This redesign prototype is a significant step toward modernizing the SCHS website. It not only improves usability and aesthetics but also helps the school tell its story more clearly and proudly. Through this design, I aim to show that a well-built website can do more than display information, which it can strengthen identity, build trust, and connect people.
(635 words)
CLASS EXERCISE
- Week 8 -
- Week 9 -
Absent
REFLECTION
This project was a helpful and practical experience for me. By using Figma to redesign the website of my former high school, I learned how to build a clean, organized, and user-friendly prototype from scratch. I focused on improving layout structure, visual consistency, and navigation flow.
One of the most important things I learned was how to work with frames, auto layout, and constraints to ensure that the website is responsive and well-aligned. I also practiced using components and variants to create dropdown menus and hover effects, which made the prototype more interactive and realistic. Through this redesign, I became more aware of how font choices, spacing, color, and hierarchy can affect how users understand and experience a website. I also paid attention to creating clear CTAs and balancing information across different sections.
Overall, this task helped me become more confident in using Figma and taught me how design can solve problems and improve communication.
Comments
Post a Comment