Franco India
Campus
Innovation, Education and Cooperation for Global Health
€2.25M+
Funding
45+
HEIs
15+
Research Inst.
60+
Laboratories
7+
Hospitals
20+
Companies
You are reading
Franco India Campus Case Study
Scroll to explore
Thinking Layer
45+ institutions across two countries were collaborating, but there was no website that explained what the initiative even was.
Complexity doesn't have to feel complex. Good structure and visual hierarchy create clarity on their own.
A website that is now the initiative's main digital presence for 45+ institutions across two countries.
One digital identity used for student recruitment, researcher collaboration, and partner outreach.
01 / Project Overview
Building a Digital Hub for
Franco-Indian Academic Collaboration
The Franco-Indian Campus in Life Sciences for Health connects French and Indian universities for research collaboration. I designed the initiative's website, which had to make sense of 45+ higher education institutions, 60+ laboratories, 7+ hospitals, and four research consortia across two countries.
Role
UI/UX Designer
Timeline
2025
Client
Reno Platforms
Tools
Next.js, Tailwind CSS, Framer Motion, Figma
Outcome / Impact
The website launched at francoindiancampus-health.com and is now the initiative's main online presence. The layered information architecture lets visitors start broad and drill down to specific institutions or programs without getting lost.
02 / The Problem
Making 45+ institutions feel like one initiative
Dozens of French and Indian universities were collaborating under one initiative, but there was no single website that explained what it all was. The challenge: make consortia, thematic groups, programs, and partner institutions across two countries understandable to students, researchers, and administrators without overwhelming anyone.
Higher Ed Institutions
Research Laboratories
Major Consortia
Countries Connected
Content Complexity Points
Multiple institutions with different identities and branding
Cross-country collaboration requiring bilingual consideration
Multiple content types: consortia, programs, events, research
Diverse audiences: students, researchers, administrators, partners
Visual Research — Designing Across Two Cultures
Visual Balance
Neutral design language that honors both
Palette
#053c94
#0a5ed4
#eef1f0
#FFFFFF
French blue as institutional anchor
Scale
“How do you present 45 institutions across two countries without overwhelming the visitor?”
— initial design brief
Typeface
Fredoka
Aa
Strategy
Blue is neutral — it belongs to neither flag. It can represent both nations equally.
Reference
EU academic portals, Erasmus+, CNRS
Researching how to represent a bilateral academic initiative. Balancing cross-cultural sensitivity with information density across 45+ institutions.
03 / Key Insight
Complexity doesn't have to feel complex — structure creates clarity.
After mapping out the initiative's full structure, I realized the answer wasn't to simplify. It was to organize thoughtfully. Give visitors clear pathways through layered content, and the complexity takes care of itself.
The real challenge wasn't the volume of content — it was finding a visual language that could represent both French and Indian academic traditions while maintaining a cohesive identity.
— Design Research Phase
04 / Design Goal
What the design needed to achieve
Make a multi-institutional initiative feel like one coherent thing on the web.
Organize the institutional complexity
Design an information architecture that makes dozens of institutions, consortia, and programs navigable without overwhelming anyone.
Give each content level its own visual weight
Initiative, consortia, institutions, and programs each need distinct visual treatment while still feeling like parts of the same site.
Let visitors explore across institutions
Users should be able to browse connections between French and Indian universities, find programs across consortia, and see who's collaborating with whom.
Design for bilingual expansion
The design system needs to handle bilingual content down the line while staying consistent across all screen sizes.
05 / System Thinking
How the site is structured underneath
Information architecture, content hierarchy, and the user journey from landing to application.
Information Architecture
How the site content is structured hierarchically.
Content Hierarchy
Levels of content from broadest to most specific.
User Journey Map
Primary path from landing to application.
Design Progression
Problem
No unified presence
Insight
Structure creates clarity
System
Layered architecture
Experience
Unified digital campus
06 / Exploration
Early sketches and concept exploration
Testing layouts for dense institutional content. Figuring out how much to show at each level.
Hero Slider Concepts
Full-width hero with imagery carousel
Consortia Card Layouts
Hover-reveal cards for four consortia
Institution Comparison
Side-by-side French/Indian profiles
Thematic Group UI
Research area categorization and filtering
Program Listings
Academic program cards with CTAs
Event Calendar
Timeline-based event display
Consortia Directory — From Idea to Interface
How the most complex page evolved through four stages of design thinking
First Thought
Pen on napkin
Pencil Sketch
Refining the layout
Wireframe
Structure & hierarchy
Final Design
Production ready
1 → 2
Added browser framing, refined card grid from loose scribbles to structured 2×2 layout
2 → 3
Established hierarchy with search, filter pills, and consistent card anatomy
3 → 4
Applied brand identity — blue palette, real institution data, flag indicators, micro-interactions
07 / Wireframes
Low-fidelity page structure
Defining the structural hierarchy before visual design, focusing on content-first architecture for institutional pages.
Homepage
Hero, mission, consortia
Consortia Page
Institutions & research
Programs
Cards, filters, apply
Events
Calendar & timeline
Homepage — Structural Specification
08 / UI Design
Visual design system and principles
High-fidelity design decisions that balance institutional authority with modern web aesthetics.
French blue (#053c94) serves as the primary brand color, paired with clean whites and soft neutral backgrounds. Accent colors differentiate consortia without competing for attention. The palette conveys academic authority while remaining approachable.
Balancing complex multi-institutional content with generous whitespace. Each section uses progressive disclosure, showing key information upfront with expandable details for those who want deeper context. Typography scale creates clear reading hierarchy.
Hover reveals on consortia cards, comparison sliders for institutional partnerships, smooth scroll animations, and dynamic event filtering. Every interaction serves discovery and helps users understand content relationships.
Color System
#053c94
French Blue
#0a5ed4
Active Blue
#eef1f0
Neutral BG
#FFFFFF
White
#2D2D2D
Charcoal
Typography
Franco-Indian Campus
Innovation, Education, Cooperation
Body text maintains readability across complex institutional content and program descriptions.
Component Library
Live Platform
See it in action
The platform is live and is the main website for the Franco-Indian academic initiative.
Franco-Indian Campus
in Life Sciences for Health
Innovation, Education & Cooperation for Global Health
€2.25M+
Funding
45+
HEIs
60+
Labs
4
Consortia
09 / Final Experience
The full user journey
From landing on the homepage to applying for a program.
Land on Homepage
Full-width hero slider showcasing the initiative with institutional imagery. Key figures and partner logos establish credibility immediately.
Understand the Mission
Seven key objectives presented in clear hierarchy, from building sustainable cooperation to addressing global health challenges across both countries.
Explore Consortia
Interactive cards for BIOSANTEXC, SHIELD, ILIADE, and INHEALTH reveal partner institutions, research focuses, and key personnel on hover.
Discover Programs
Four academic programs with detailed curriculum information, eligibility criteria, and direct application links spanning life sciences, biotechnology, and bioinformatics.
Apply
Streamlined application process with clear deadlines, requirements, and direct links to institutional application portals for each program.
Attend Events
Browse upcoming conferences, workshops, and seminars with date filtering. Registration links and event details keep the academic community connected.
Responsive Design
Consortia Explorer
10 / Reflection
What this project taught me
Designing for 45+ institutions across two countries forced me to think differently about information architecture.
Structure is the design
For a project this complex, the information architecture IS the design. Getting the hierarchy right mattered more than any visual choice. Once the structure was solid, the rest followed.
Institutional content needs human context
Raw data about universities and programs feels cold. Adding researcher profiles, campus photography, and student testimonials turned abstract partnerships into something people could connect with.
Progressive disclosure reduces overwhelm
With 45+ institutions and 60+ labs, showing everything at once would bury visitors. Layered content (initiative overview, then consortium, then individual program) respects the user's attention.
Cross-cultural design requires sensitivity
Representing French and Indian academic traditions visually took careful balance. The blue-white color system avoids cultural bias, and the content structure gives equal weight to both educational frameworks.
What I would improve
Add a proper search system so users can find specific institutions, researchers, or programs across the whole initiative
Implement a multilingual toggle with full French and Hindi translations for broader accessibility
Build interactive data visualizations showing the network of institutional partnerships across both countries
Create personalized dashboards for different user types — students, researchers, and administrators
Next Project