SFAI

About the work

User experience and information architecture for the San Francisco Art Institute website, developed with its marketing team. Academic programs are organized by area of study, with Admission + Aid alongside them and clearer routes for prospective and current students. Original studies and an archived website show the navigation’s development.

Medium
UX/UI & information architecture
Year
2022

Alex’s contribution

Alex Dahdah · UX/UI, navigation & content architecture

SFAI · UX case study · 2022

Start with what
you want to study.

Restructuring an art school’s website around discovery, guidance and access.

The work connected subjects, degree pathways and student life through a clearer information architecture. Navigation gave prospective students a route from exploring a practice to understanding how to apply, while the student portal served internal news and access.

01

Navigation & wayfinding

A clearer way into the school.

Academic Programs moved to the beginning of the main navigation. Admission + Aid followed immediately, keeping the next practical step close to exploration.

Earlier structure

Begin with a degree category.

Degree Programs
Undergraduate ProgramsGraduate Programs

The earlier menu divided program discovery into undergraduate and graduate routes.

Refreshed direction

Begin with a subject.

Academic Programs
FilmPaintingPhotographyAnd other practices
Degree pathways within each subject

Topic pages brought the options together around the practice a visitor wanted to explore.

Explanatory diagrams redrawn from the original navigation and Academic Programs plans.

The refreshed main navigation

  1. 01Academic Programs
  2. 02Admission + Aid
  3. 03Student Experience
  4. 04Events + Exhibitions
  5. 05About
  6. 06Artists + Stories
  7. 07Give

Academic Programs → Admission + Aid. Explore the subjects, then find application guidance, costs and financial aid.

View the original navigation captures

Earlier SFAI Degree Programs menu leading to Undergraduate Programs, Graduate Programs and Faculty.
Original artifactEarlier Degree Programs flyout, preserved in the project files.
Refreshed SFAI navigation: Academic Programs, Admission + Aid, Student Experience, Events + Exhibitions, About, Artists + Stories, Give.
Original artifactRefreshed navigation from the original plan. Admission + Aid is second.
02

Topic-led content architecture

One subject. A complete picture.

A subject page became a place to understand the practice, compare study pathways, meet faculty and explore the surrounding student experience.

Eleven areas of practice

  • Studio Art
  • Art + Technology
  • Film
  • New Genres
  • Painting
  • Photography
  • Printmaking
  • Sculpture
  • Art, Place + Public Studies
  • History + Theory of Contemporary Art
  • Exhibition + Museum Studies
Original Film subject page connecting a programme overview, degree pathways and related resources.
Original artifactThe original Film page brings the subject overview and degree pathways together.

The page as a guided journey

  1. 01

    Overview

    Introduce the practice through an image and a clear account of the subject.

  2. 02

    Study

    Bring undergraduate, graduate and continuing-education pathways into the same subject context.

  3. 03

    Spotlight

    Show the practice through featured work and stories.

  4. 04

    Faculty

    Connect the subject to the people who teach it.

  5. 05

    Experience

    Continue into studios, the library, exhibitions and other useful resources.

Content sequence summarized from the original Academic Programs plan.

03

Student experience & access

Make the useful things findable.

The architecture supported different reasons for visiting: discovering the school, finding practical guidance, following its public life, or returning for everyday student information.

Prospective students

Admission + Aid

Application routes, portfolio guidance, visiting the campus, tuition and financial aid.

  • Apply Now
  • Request Info
  • Visit Campus
  • Tuition + Financial Aid

Life at SFAI

Student Experience

Library, studio facilities, exhibition spaces, academic resources and opportunities to participate.

  • Library + Research
  • Studio Facilities
  • Exhibition Spaces
  • Academic Resources

Public discovery

Events, exhibitions & stories

Clearer destinations for exhibitions and the calendar, alongside a place for stories about the school’s community and practice.

  • Events Calendar
  • Exhibitions
  • Lecture Series
  • Artists + Stories

For current students

A student portal
with a clear place.

An entry point for internal news and access, reachable from Student Experience and the footer. Public discovery and recurring student tasks each had an identifiable route.

Student ExperienceFooter
Student Portal
Internal newsStudent access

Functional diagram redrawn for this case study.

Original material & context

Plans, interface studies
and the public site.

The case study connects the navigation plan, subject-page content architecture and original interface studies. Its labeled diagrams explain the decisions behind those artifacts.

The archived homepage from 2 April 2022 records Admission + Aid in second position and Student Portal links in the menu and footer. It captures an intermediate state of the site.

View the archived SFAI homepage
Navigation & page plans
The original navigation and Academic Programs documents establish the subject structure, visitor routes and page sequence.
Design artifacts
The homepage, menu and Film-page images show the original interface work.
Public archive
The April 2022 capture records an intermediate state. Its program flyout still uses degree links, and its stories section is labeled SFAI Stories.

Credits

Inquire about this work