Prototype Development: CAVS 55 Event Page Redesign

-

 


figma.com

Prototype Development: CAVS 55 Event Page Redesign

The objective of this prototype is to translate the CAVS 55 Event Page redesign proposal into a functional, interactive representation that demonstrates improved usability, visual hierarchy, and engagement. The prototype aims to transform the original static and text-heavy page into a dynamic event hub that clearly communicates the significance of the 55th anniversary of the Center for Advanced Visual Studies (CAVS) while supporting intuitive navigation and a more immersive user experience.

Overview of the Prototype

The interactive prototype was developed using Figma, leveraging components, auto-layout, and interactive frames to simulate realistic navigation. The prototype includes three core pages:

  1. Homepage (CAVS 55 Main Event Page)

  2. Program Page (Core Content Page)

  3. Contact Page

These pages reflect the redesign goals by presenting information in clear sections, using strong visual hierarchy, and incorporating multimedia-ready layouts that match the experimental and creative identity of CAVS.

Key Features of the Prototype

1. Redesigned Hero Section

The prototype places significant emphasis on the hero banner, which was missing from the original website. The redesigned hero section uses a large, visually striking banner featuring archive-inspired imagery connected to MIT ACT and CAVS. The “CAVS 55” title is styled as a bold H1 to immediately signal the special nature of the event, accompanied by a concise subtitle (“Celebrating 55 Years of Experimental Art + Technology”).

The hero also includes a Quick Overview Panel summarizing the essential details—What, When, Where, and Who—allowing users to understand the event at a glance. A prominent CTA (“Explore Program”) leads users to the program page.

2. Structured Information Architecture

One of the main improvements reflected in the prototype is the use of well-defined sections, addressing the issue of long, unorganized text blocks in the original design. The redesigned homepage is divided into:

  • Event Overview

  • Program & Schedule Preview

  • Speakers & Guests

  • CAVS History & Legacy

  • Related Resources & Collections

Each section uses clear H2 and H3 headings, content cards, and iconography to enhance scanability and accessibility.

On mobile screens, these sections collapse into an accordion layout for easier vertical navigation and reduced cognitive load.

3. Interactive Program Page

The Program page serves as the core content page within the prototype. Instead of long text paragraphs, the schedule is presented as an interactive accordion, allowing users to expand each day to view:

  • Event title

  • Time

  • Venue

  • Short description

This modular layout allows for faster navigation and a more intuitive understanding of the multi-day program. The design supports potential future features such as filtering by theme or event type.

4. Visual Identity & Branding Improvements

The prototype introduces a refreshed visual language that aligns with CAVS' identity as an experimental art and technology hub. Accent colors (electric blue or neon orange) highlight CTAs, section labels, and the CAVS 55 event sticker. This provides a sense of celebration and creativity while maintaining consistency with MIT ACT’s minimalist design system.

Typography follows a clear hierarchy, solving the readability problems of the original page. Important text such as dates, speakers, and event names now stand out due to size, weight, and spacing improvements.

5. Enhanced Accessibility & UX

The prototype prioritizes accessibility by using:

  • Proper heading hierarchy

  • High contrast content blocks

  • Balanced spacing

  • Bullet points for dense information

  • Descriptive alt-text placeholders

  • Logical reading order

Additionally, anchor-based navigation (Overview, Program, Guests, History) helps screen reader users and improves keyboard usability.

Mobile-specific UX improvements include reducing scrolling fatigue with collapsible sections and ensuring the hero + overview panel appear immediately without pushing key details down the page.

6. Contact Page

The Contact page includes a clean, interactive form with:

  • Name

  • Email

  • Message field

  • Submit button with hover states

This matches the academic tone while improving usability through clear labels and sufficient spacing.

Conclusion

The prototype successfully translates the redesign proposal into a functional, interactive prototype that reflects modern UX principles, stronger branding, and enhanced accessibility. It addresses key issues in the original CAVS 55 page—especially scanability, visual appeal, and engagement—while remaining adaptable for future MIT ACT events. The added structure, hierarchy, and interactivity provide a user-friendly experience suitable for students, researchers, artists, and the general public.

Comments

Post a Comment

Popular posts from this blog

Simple Personal Profile Page

-
Image
Simple Personal Profile Page: https://eloraby-task1.netlify.app/ Mohammad Oraby Hello! My name is Mohammad Oraby. I’m currently studying Software Engineering and I’m passionate about technology, design, and problem-solving. I enjoy learning new things and creating projects that can make life easier or more interesting. Outside of academics, I love exploring new places, trying different types of food, and meeting people from various cultures. I believe that every experience helps shape who we are and teaches us something valuable about the world. My Hobbies Playing Chess Watching Movies Traveling My Skills Web Development (HTML, CSS, JavaScript) Team Collaboration Creative Problem Solving Personal Profile Page after adding a little CSS:  https://mohamed-eloraby-task1.netlify.app/ Mohammad Eloraby 💻 Software Engineering Student | 🌍 Based in Kuala Lumpur | 🎯 Passionate Learner Hello! My name is  Mohammad Eloraby . I’m currently pursuing my degree in  Software Engineering ...
Read more

Final Project Website Redesign

-
Image
  CAVS 55 Website Redesign Code Folder 1. Introduction This project focuses on transforming an approved website redesign prototype into a fully functional, responsive, and accessible website. The main objective was to implement the visual and interaction design decisions made during the earlier stages of the project and bring them to life using front-end web technologies. The final outcome is a live website that accurately reflects the original Figma prototype while following best practices in web design, usability, and performance. The website was developed as a multi-page platform consisting of five main pages: ACT Home, Events, Collections, Contact, and FAQ. Each page was designed and implemented to provide a consistent user experience, intuitive navigation, and a professional visual appearance. The final website is publicly accessible via a live URL hosted on Netlify. 2. Tools and Technologies Used The development of the website relied on standard front-end web technologie...
Read more