Collaboration
UX/UI & content architecture
Alex worked with SFAI’s marketing team on the institute’s website, developing navigation and content architecture for prospective and current students.
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
Place context
- Website for San Francisco Art Institute, California Source
Alex’s contribution
Alex Dahdah · UX/UI, navigation & content architecture
Contribution
Subjects, pathways and access
The design organized academic programmes around areas of practice, placed Admission + Aid beside Academic Programs, and gave the student portal a clear route from the menu and footer.
Public record
The April 2022 website
An archived homepage records Admission + Aid in second position and Student Portal access. It preserves an intermediate version, alongside the original design studies shown here.
Process
Start with what you want to study.
Restructuring an art school’s website around discovery, guidance and access.
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 subjectTopic 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
- 01Academic Programs
- 02Admission + Aid
- 03Student Experience
- 04Events + Exhibitions
- 05About
- 06Artists + Stories
- 07Give
Academic Programs → Admission + Aid. Explore the subjects, then find application guidance, costs and financial aid.
View the original navigation captures
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
The page as a guided journey
- 01
Overview
Introduce the practice through an image and a clear account of the subject.
- 02
Study
Bring undergraduate, graduate and continuing-education pathways into the same subject context.
- 03
Spotlight
Show the practice through featured work and stories.
- 04
Faculty
Connect the subject to the people who teach it.
- 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
Photos
Two original studies of the refreshed homepage, with Academic Programs followed by Admission + Aid
