Design UX/UI

MBSC Observatory

Design UX/UI pour université d'entrepreneuriat et innovation en Arabie Saoudite

Client Prince Mohammed Bin Salman College
Durée 6 semaines
Année 2024
Rôle UX/UI Designer
Adobe XD UI Design UX Research Wireframing Prototyping Design System

MBSC Observatory - Homepage Design

Aperçu du projet

MBSC Observatory est le site institutionnel du Prince Mohammed Bin Salman College, une université en Arabie Saoudite dédiée à l'entrepreneuriat, l'innovation durable et le soutien aux entreprises familiales. Le projet consiste en la conception complète de l'expérience utilisateur et de l'interface visuelle sur Adobe XD.

Le design propose une identité visuelle moderne et professionnelle avec une palette de couleurs institutionnelles (bleu marine, rouge, beige), une structure claire présentant les services de l'observatoire (innovation, recherche, écosystème), des sections "About", "Partners", "Knowledge Delivery", "Services", "News & Blog", et un système de navigation fluide. L'accent est mis sur la crédibilité académique et l'innovation entrepreneuriale avec des visuels de qualité montrant étudiants, professeurs et partenaires (KPMG, autres).

15+
Écrans designés
100%
Adobe XD
6
Sections principales
3
Itérations design

Le Défi

  • Créer une identité visuelle institutionnelle moderne pour une université saoudienne
  • Allier crédibilité académique et innovation entrepreneuriale dans le design
  • Présenter clairement les multiples services de l'observatoire (innovation, recherche, écosystème)
  • Structurer une architecture d'information complexe avec 6+ sections principales
  • Créer une expérience utilisateur fluide pour 3 cibles : étudiants, entreprises, partenaires
  • Respecter les codes culturels et visuels du contexte saoudien/arabe

La Solution

  • Hero section impactant avec slogan "The Rise of a Collective Impact Initiative" et CTA "Discover"
  • Palette institutionnelle : bleu marine (#0A2463), rouge (#E41E31), beige/crème pour chaleur
  • Section "About The MBSC Observatory" avec photo de groupe et mission clairement énoncée
  • 4 cards visuelles "Explore Our Ecosystem" présentant innovation landscape et centres de recherche
  • Section "News & Blog" avec 3 articles en cards et photos professionnelles
  • Vidéo hero avec overlay "Innovation begins with a vision; together, we turn that vision into reality"
  • Footer complet avec logo, navigation, réseaux sociaux et coordonnées
  • Design system cohérent : typographie claire, espaces généreux, hiérarchie visuelle forte

Processus de design UX/UI

01

Research & Benchmark

Analyse universités saoudiennes concurrentes, benchmark sites académiques internationaux, compréhension culture locale et codes visuels arabes, définition des 3 personas (étudiants/entreprises/partenaires).

02

Architecture & Wireframes

Définition arborescence site (6 sections principales), wireframes basse fidélité des pages clés, user flows pour parcours étudiants et entreprises, validation structure avec client.

03

Identité Visuelle

Création palette couleurs institutionnelle (bleu marine, rouge, beige), sélection typographie (lisibilité maximale), définition style photographique (professionnelle, diverse, inspirante), mood board validation.

04

Maquettes Haute Fidélité

Design complet homepage sur Adobe XD, création composants réutilisables, design 15+ écrans (about, services, news, contact), intégration vraies photos et contenus, animations micro-interactions.

05

Prototype & Handoff

Prototype interactif Adobe XD avec transitions, tests utilisabilité avec 5 personnes, ajustements basés sur feedback, documentation design system complet, handoff aux développeurs avec specs.

Éléments de design clés

Identité institutionnelle

Palette bleu marine (#0A2463) + rouge (#E41E31) + beige crème pour crédibilité académique et modernité

Grille structurée

Layout 12 colonnes avec espaces généreux, sections bien délimitées, hiérarchie visuelle claire

Hero Section impactant

Slogan puissant "The Rise of a Collective Impact Initiative" avec photo groupe dynamique et CTA rouge

Cards visuelles

4 cards "Explore Ecosystem" avec photos qualité et CTA "Discover" pour navigation intuitive

Vidéo hero intégrée

Section vidéo avec overlay texte inspirant et play button centré pour engagement maximum

Design System complet

Composants réutilisables (boutons, cards, navigation), typographie cohérente, spacing system 8px

"
Le design proposé capture parfaitement notre vision d'innovation et d'entrepreneuriat. L'identité visuelle est à la fois institutionnelle et moderne, reflétant notre ambition de devenir un hub d'innovation majeur en Arabie Saoudite. Les maquettes Adobe XD ont été validées rapidement et ont facilité le développement.
MBSC Observatory Prince Mohammed Bin Salman College - Arabie Saoudite

Besoin d'un design UX/UI pour votre projet ?

Créons ensemble une identité visuelle moderne et des maquettes professionnelles