Project 1 - Website Redesign Proposal

 canva 

 canva 

1. Website Analysis – CAVS 55 Event Page (act.mit.edu/event/cavs-55)

1.1 Current Design Evaluation

Layout

• The page follows a standard single-column event layout: site header with navigation, then event title, dates, and descriptive text, sometimes with images in between. act.mit.edu

• Content is mostly long text blocks, with limited use of visual hierarchy (sections, cards, or clear blocks), which makes scanning harder for users who just want the basics (what / when / where / how).

• Important elements like date, time, place, program schedule are buried inside paragraphs instead of being visually highlighted (e.g., in a sidebar, box, or icons).

Color Scheme

• The page uses the MIT ACT site palette, which is mainly white background with dark text and a dark header. This is consistent with the rest of the site and feels academic and serious. act.mit.edu

• However, for a celebration event (55th anniversary of CAVS), the color scheme feels slightly understated. There is no strong event-specific accent color to give a sense of festivity or uniqueness.

Typography

• The typography is clean and readable, using web-safe or institutional fonts. Headings, body text and links are distinguishable, which supports basic readability. act.mit.edu

• But the visual hierarchy is weak:

  • Headings and subheadings are not clearly differentiated by size/weight.

  • Long paragraphs without subheadings make it tiring to read.

  • Important details (dates, speakers, locations) do not visually “pop”.

Imagery

• The event page includes images related to CAVS / ACT, but they are medium-sized and static, and do not fully convey the scope of a multi-day celebration (lectures, screenings, gatherings). act.mit.edu

• There is no strong hero banner at the top that instantly communicates “CAVS 55 – major anniversary event”.

• The images are not used as part of a structured gallery or story (e.g., past works, archives, keynote figures).

Overall Aesthetics

• Overall style is professional, academic, and minimal—appropriate for MIT but a bit too neutral for a creative, art-and-technology–focused celebration. e-flux

• The page does not visually express the identity of CAVS as an innovative, experimental art–science program. This is a missed opportunity for branding and emotional engagement.

---

1.2 User Experience (UX)

Usability & Navigation

• The global navigation bar (ACT / Events / What’s On) is clear and consistent across the site, helping users move back to other events or sections. act.mit.edu

• UX issues:

  • The key event info (What, When, Where, How) is not summarized in a quick, scannable section at the top.

  • Users must scroll and read long paragraphs to extract basic information.

  • CTAs (if any, like “View schedule” or “More info”) are not visually dominant.

Accessibility

• Text contrast (dark text on white) is good and supports basic accessibility.

• However:

  • Long unstructured text is not ideal for users with cognitive or reading difficulties.

  • It is not obvious that images are provided with meaningful alt text from the front-end.

  • There are no supportive features like “Back to top”, in-page navigation, or clear section headings for assistive technologies.

Responsiveness

• The page is responsive (as part of MIT’s modern site structure), but certain UX issues appear on smaller screens: act.mit.edu

  • Long text blocks become very tall scrolling sections on mobile.

  • Key event details are pushed further down, making it harder for mobile users to quickly understand the essentials.

  • Images stack vertically, but they don’t necessarily contribute to guiding the user or breaking content into logical chunks.

Pain Points / Areas to Improve

• Hard to quickly scan the page for:

  • “What is this event?”

  • “When and where is it?”

  • “Who is involved?”

  • “What is the daily schedule?”

• The special nature of the event (“55th anniversary”) is not highlighted strongly in design and layout.

• Lack of clear CTAs (e.g., “Explore program”, “View speakers”, “Visit CAVS collection”) reduces user engagement.

• The page feels more like a static announcement than an engaging event hub.

---

1.3 Functionality

Performance & Load Times

• As a mainly text-based page with a few images, performance should be acceptable, but:

  • If image files are not optimized/compressed, they could still impact load time, especially on mobile or slow connections.

  • No explicit lazy loading of images is visible in the basic markup preview.

Interactivity

• The page is mostly static: text and images with standard links.

• It does not include:

  • Interactive schedule or timeline

  • Embedded media (e.g., video related to CAVS history)

  • Hover interactions or micro-animations that could enhance engagement

• This makes the overall experience more “informational” than “experiential”, which is ironic for an event about advanced visual studies.

Cross-Browser / Device Compatibility

• As part of MIT’s main website, compatibility with major browsers is likely good (Chrome, Firefox, Safari, Edge). act.mit.edu

• However, without device-specific tailoring, mobile users still face the UX issues mentioned above (long scrolling, low information density at the top).

---

2. Redesign Goals

2.1 Objectives of the Redesign

1. Improve Usability and Scanability

   • Make key event information (what/when/where) immediately visible.

   • Use clear sections and headings so users can jump to what they care about.

2. Enhance Visual Appeal & Brand Alignment

   • Reflect the experimental, creative identity of CAVS while staying consistent with MIT ACT branding.

   • Use stronger visuals and color accents to create a sense of a special anniversary.

3. Strengthen User Engagement

   • Encourage users to explore the program, learn about CAVS history, and interact with related content (archives, films, etc.). act.mit.edu+1

4. Optimize for Mobile & Accessibility

   • Ensure that mobile users see the essential info immediately.

   • Make content easier to read and navigate for all users, including those using assistive technology.

5. Modernize Technical Performance

   • Improve perceived speed through image optimization and better loading strategies.

   • Ensure smooth performance across devices and browsers.

---

2.2 Target Audience

• Primary audience

  • Students (MIT and external) interested in art, technology, and media.

  • Researchers and scholars in art, visual studies, architecture, media studies.

  • Artists and cultural practitioners connected to CAVS / ACT.

• Secondary audience

  • General public interested in MIT events.

  • Alumni and supporters of CAVS and ACT.

  • Curators, museum professionals, art historians.

How the redesign will better meet their needs:

• Students and researchers:

  • Fast access to schedule, speakers, themes, and links to related materials.

• Artists and practitioners:

  • Visual and conceptual cues that communicate the experimental nature of the event.

• General public:

  • Simple, accessible explanation of what CAVS 55 is and how to participate or learn more.

---

3. Design Proposal

3.1 Visual Design Concepts

Overall Concept:
“Celebrating 55 Years of Experimental Art + Technology” – a design that combines archive-inspired visuals (old photos, documents) with clean modern UI.

Mood Board (you can create it in Canva)

Include references like:

• Abstract visualizations of light, data, and technology.

• Archival photos from the CAVS digital collections and ACT documentation. act.mit.edu+1

• Modern minimalist layouts with bold typographic hero banners.

• Color palettes mixing:

  • Base: white, dark gray/black

  • Accent: a vivid color (e.g., electric blue or neon orange) for CAVS 55 labels and CTAs.

Visual Structure

• Hero Section (Top of Page)

  • Large hero image/banner with:

    • “CAVS 55”

    • Subtitle: “Celebrating 55 Years of the Center for Advanced Visual Studies at MIT”

    • Quick badge listing Date | Location | Program Overview.

  • One clear CTA button (e.g., “Explore Program”).

• Information Cards

  • Use cards or boxes for:

    • Event Overview

    • Program by Day (Day 1, Day 2, etc.)

    • Speakers / Guests

    • Links to collections or related events.

• Typography

  • Clear hierarchy:

    • H1: big and bold (CAVS 55)

    • H2: sections (Overview, Program, History, Guests)

    • H3: sub-sections (Day 1, Day 2, etc.)

  • Larger body text for readability.

---

3.2 UX Enhancements

1. Quick Overview Panel (Above the Fold)
   Add a concise panel right under the hero:

   • What: CAVS 55 – Four-day series of events celebrating 55 years of CAVS act.mit.edu

   • When: October 20–23, 2023

   • Where: MIT, Cambridge, MA

   • Who: Artists, researchers, alumni, and collaborators of CAVS and ACT

   • CTA: “View Full Schedule”

2. Sectioned Layout

   Break the page into clear sections with anchors:

   • Overview

   • Program & Schedule

   • Speakers & Guests

   • CAVS History & Legacy

   • Resources & Collections (linking to digital collection, related articles, etc.) act.mit.edu+1

   This allows for in-page navigation and easier scanning.

3. Program Timeline or Accordion

   • Instead of long paragraphs describing each day, use:

     • Accordion panels (expand/collapse each day), or

     • A horizontal timeline showing Day 1 → Day 4, with key events beneath.

   • Each event item can include:

     • Title

     • Time

     • Location

     • Short description

     • Link to more details (if needed).

4. Calls to Action (CTAs)

   • Add consistent CTAs throughout:

     • “Learn more about CAVS history”

     • “Enter the CAVS digital collection”

     • “Explore related ACT events” act.mit.edu+1

   This keeps users moving through content instead of just reading once and leaving.

5. Accessibility Improvements

   • Use clear headings (H1, H2, H3) for semantic structure.

   • Ensure all images have descriptive alt text.

   • Break long text into:

     • Short paragraphs

     • Bullet points

     • Highlighted key phrases (bold or pull quotes).

6. Mobile-Specific UX

   • Place the overview panel and CTAs very high on the page so mobile users get the key info without scrolling.

   • Compress content with accordions for schedule and FAQ to reduce endless scrolling.

---

3.3 Technical Considerations

1. Responsive Design

   • Use a responsive grid system (e.g., CSS flex or grid) for content cards and images.

   • Test on multiple breakpoints: mobile (360–480 px), tablet (~768 px), desktop (≥1024 px).

2. Performance Optimization

   • Compress all images using modern formats (WebP/AVIF where possible).

   • Implement lazy loading for images below the fold to improve initial load time.

   • Minimize heavy external scripts.

3. Accessibility & SEO

   • Use semantic HTML (header, main, section, footer, nav).

   • Provide descriptive page title and meta description:

     • Example: “CAVS 55 – 55th Anniversary of Center for Advanced Visual Studies | MIT ACT” act.mit.edu+1

   • Add structured data for events (Event schema) so dates and details appear nicely in search results.

4. Content Management

   • Build page with reusable components:

     • Event header

     • Schedule module

     • Speaker card

   • This allows ACT to easily reuse the design for future major events.