Younes DrissiOur work
Visit site ↗

ESAV Marrakech

Redesigning the digital presence of a school built around visual culture.

ESAV student producing a film
ESAV MarrakechDigital campus

My work went beyond redesigning pages.

It involved rethinking how prospective students discover the school, understand its programs, experience the campus remotely, navigate admissions, and ultimately decide: “This is where I want to study.”

  • Website Redesign
  • UX/UI Design
  • Frontend Development
  • Virtual Tour
  • SEO
  • Content Architecture
  • Performance
  • Maintenance
ESAV homepage on tablet
ESAV specialization page
ESAV news experience

Client

ESAV Marrakech — École Supérieure des Arts Visuels de Marrakech

My role

Product Designer & Full-Stack / Frontend Developer. Responsible for UX/UI, development, responsive implementation, content architecture, SEO, performance, the virtual campus, maintenance, and continuous improvement.

Platform

Institutional and admissions website for students interested in cinema, audiovisual production, design, and visual creation.

Scope

Website redesign, UX/UI, development, programs, admissions, virtual campus, SEO, technical maintenance, and iteration.

001 · Overview

A creative school deserves a creative digital experience.

ESAV teaches people to work with images, cinema, photography, sound, animation, illustration, communication, interiors, and storytelling. Its website could not feel like a generic university website.

For many prospective students, the screen is their first encounter with ESAV. It needed to feel visual, creative, contemporary, and alive.

ESAV Overview

002 · Business context

The website isn’t just information. It’s part of the admissions journey.

Students are not comparing features. They are imagining what they will learn, make, who will teach them, which spaces they will use, and where the education could take them.

The website needed to let students experience ESAV before becoming students.

003 · Understanding ESAV

Translate an existing culture into digital.

ESAV already had architecture, students, films, artwork, workshops, alumni, history, and a visual language. The interface needed to give those things space to speak rather than cover them with unnecessary design.

ESAV Understanding ESAV

004 · Product vision

Make the website feel like entering the school.

Don’t explain creativity when you can show it. Large imagery, student work, films, people, movement, and typography become the content; the interface becomes the frame.

The journey changes from navigation and PDFs to discover, explore, experience, understand, and apply.

005 · Information architecture

Creativity still needs structure.

Cinema & Audiovisual and Design & Création Visuelle became clear pathways, allowing students to move progressively from a broad interest toward disciplines and specializations without flattening their identity.

ESAV Information architecture

006 · Key decisions

The interface frames creativity. ESAV provides the personality.

001

Let student work sell the school

Show what people create here instead of only promising what they will learn.

002

Treat programs as journeys

Interest first, institutional structure second.

003

Make admissions impossible to miss

Move naturally from inspiration and exploration toward application.

004

Bring the campus online

Let prospective and international students explore ESAV remotely.

005

Design mobile-first discovery

Protect navigation, imagery, typography, and calls-to-action on small screens.

006

Build for evolution

Programs, events, admissions, projects, and news must keep changing without breaking the system.

007 · Virtual campus

Visit ESAV without being in Marrakech.

I created an interactive 360° tour that lets prospective students move through the physical school remotely. For someone living far away, the campus is no longer abstract.

ESAV Virtual campus

008 · Virtual experience

Exploration, not documentation.

The work combined camera placement, 360° capture, spatial transitions, navigation, image quality, performance, mobile interaction, and website integration. The building became part of the interface.

ESAV Virtual experience

009 · Program discovery

From “What does ESAV teach?” to “This is what I want to do.”

The architecture progressively increases detail: field, program, specialization, details, admission. Curiosity becomes orientation, and every page offers a meaningful next step.

ESAV Program discovery

010 · Visual system

Structure creates freedom.

Strong typography, editorial layouts, large visual surfaces, clear hierarchy, intentional whitespace, responsive grids, and controlled motion create consistency while diverse student work provides personality.

ESAV Visual system

011 · Content architecture

Different audiences. Different questions.

Prospective students, parents, international candidates, current students, professionals, and alumni enter from different places. Each page needed enough context to work as an independent landing experience.

ESAV Content architecture

012 · SEO

A beautiful school website is useless if students can’t find it.

Clear page architecture, meaningful titles, program-specific pages, structured content, performance, and responsive implementation make search discoverability part of the product—not an afterthought.

013 · Performance

Visual doesn’t have to mean slow.

Images, films, interaction, and 360° environments all compete for bandwidth. Assets became part of the system: keep the visual impact, remove unnecessary weight.

014 · Continuous evolution

Launch wasn’t the end of the project.

Admissions campaigns, programs, workshops, student work, SEO, content, and technical needs keep changing. Every architectural decision had to answer whether ESAV could keep using it tomorrow.

015 · What was delivered

A complete digital layer for the institution.

001

Website Experience

002

Program Architecture

003

Admissions Journey

004

Student Work

005

Responsive Experience

006

Virtual Campus

007

SEO

008

Performance

009

Maintenance

016 · Complete journey

From discovering ESAV to imagining yourself there.

A student sees the work, explores a path, discovers a specialization, enters the virtual campus, and moves through Marrakech from hundreds or thousands of kilometers away.

The important conclusion isn’t “This looks like a good school.” It is: “I can imagine myself here.” Then: Apply.

ESAV Complete journey

017 · Product philosophy

The best institutional website doesn’t describe the institution. It lets you experience it.

The interface doesn’t manufacture personality. It reveals what is already there. Don’t make ESAV look creative. Let people see that it is.

From institutional website to digital campus.