JPN Sarvodaya Vidyalaya: Website Design

Duration: 3 weeks • Team: Ishita, Anubhuti

On-going Project

JPN Sarvodaya Vidyalaya: Website

Duration: 3 weeks • Team: Ishita, Anubhuti

About Sarvodaya

To empower children from rural and economically weaker sections to become confident, efficient, compassionate, and capable citizens who contribute meaningfully to the society.

Jay Prakash Narayan Sarvodaya Vidyalayas are government residential schools in Uttar Pradesh, established to provide free, inclusive, and quality education to children from rural and EWS communities of the state.

To design a website for Jay Prakash Narayan Sarvodaya Vidyalaya of Uttar Pradesh.

Brief

Current Website

limited main navigation: missing key information

The current website is incomplete, not yet fully functional

Quick overview

Buttons are disconnected

Repeated text under every heading

Only button on the primary nav bar

Only CTA available is to login in the portal

focuses only on software product

User base

Prospective Parents. This group is largely from the Economically Weaker Section (EWS), may have low digital literacy, and is mobile-first.


Goal: Explore the school facilities and system through the site.

Current Students and Staff. They are existing users who are familiar with the system.


Goal: Bypass the homepage and log in to the internal software portal as quickly as possible.

PRIMARY USERS

SECONDARY USERS

Persona

Rekha, Prospective Parent

Verify Trust & Safety

Confirm "Free"

Needs simple, clear steps

A "software portal feels cold and confusing.

Technical jargon makes the process too complicated.

A lack of photos is suspicious.

Not highly technical but can use WhatsApp and browse websites.

Fluent in Hindi but not comfortable with complex English.

Rekha Sharma, a 38-year-old mother of two living in a rural-urban fringe area near Lucknow.

Background
Rekha is a homemaker. Her husband is a daily wage laborer.

PRIMARY GOAL

MINDSET

FRUSTRATIONS

CONTEXT

Hopeful but Skeptical

High Anxiety regarding her child

Wary of complex government forms

Alok, School Staff

Login ASAP

Access his module

Needs simple, clear steps

Most of the page is just clutter.

Finds the site functional for his single purpose but ignores 90% of the homepage content, which is just "noise" to him.

He is computer-literate and uses the school's management system every day.

He is not involved in web design; he is just a user of the software.

Alok Gupta, a 45-year-old school administrator or teacher at the JPN Sarvodaya Vidyalaya.

Background
Hostel Warden or Academic Coordinator.

PRIMARY GOAL

MINDSET

FRUSTRATIONS

CONTEXT

Task-Oriented & Efficient

Averse to Clutter

Skeptical, prefers established reliable processes

Competitive analysis

JPN Sarvodaya Vidyalaya, Azamgarh

A local, individual school site.

City Montessori School (CMS)

Corporate-level website for a large and well-funded private school chain.

Jawahar Navodaya Vidyalaya (JNV) Lucknow
A single school's "sub-page" within the main, standardized portal for the national Navodaya Vidyalaya Samiti (NVS).

School Websites taken

JPN Sarvodaya Vidyalaya

CMS

JNV

ALL

SWOT

Strength

Opportunity

Weakness

Threats

Clear Purpose

Not Mobile-Optimized

Local private schools with more modern sites

Local SEO

Strong brand & trust

Information Overload

Thought Leadership

Strong brand & trust

Authority & Trust

Text-heavy

Unofficial Information maybe in use

Authority & Trust

Clear CTAs

Corporate Feel

Information filter

Clear CTAs

Information focused

Confusing Navigation:"site-within-a-site"

No emotional connection

Information focused

Good Information Architecture

Good Information Architecture

Content Marketing

Contains Essential Content

Contains Essential Content

Contains Essential Content

Criteria

Visual Design & Professionalism

Primary Target Audience

Mobile-Friendliness

Navigation & UX

Key Content for Parents

Trust & Emotional Connection

Poor. Very outdated.

Prospective Parents. Clearly structured to answer parent questions.

Very Poor. Not responsive. The site is unusable on a mobile phone.

Good. The menu is simple and logical.

Basic. It has the right sections but the content is thin.

Low. Outdated looking design.

Excellent. Modern, polished, high-quality images. Builds immediate trust/

Modern, polished, high-quality Prospective Parents & Brand. Designed to attract admissions and build a repute.

Excellent. Fully responsive. The mobile experience is easy to use.

Good, but Complex. Very comprehensive. Can be overwhelming.

Excellent. A massive wealth of content: philosophy, virtual tours, campus-specific details, news, etc.

High. Professionalism and high-quality photos/videos create a strong sense of trust and aspiration.

Poor. Bureaucratic, text-heavy, and uninspiring. Feels like a government form, not a school.

Existing Stakeholders. Poorly serves new parents.

Good. The site is technically responsive, but the dense, still cluttered on mobile.

Confusing. The navigation mixes local (Lucknow) links with national (NVS portal) links.

Poor. Lacks "marketing" content. It's hard to find photos or get a "feel" for the school.

comparative analysis table

High (Trust) / Low (Emotion). The .gov.in domain gives it authority, but the site is cold.

JPNSV

CMS

Navodaya

Problem Statement

How Might We...

To redesign the website to be a simple, trustworthy, resource for prospective EWS parents, clearly communicating the school's free residential program and building a deep sense of safety and community to encourage and simplify the admission process.

make the application process feel simple and encouraging for a user on a basic mobile phone?

build trust in hostel and mess facilities?

build a sense of a caring, supportive community?

Info Architecture

User flow

Wireframes

First iteration focused on software and technology

Second iteration focuses on building trust and highlighting school facilities

Curriculum

Gallery

Archive

Routine

Admissions

Faculty

Style Guide

Colors

Type

Design system (in works)

Logo

Secondary logo used for the navigation bar along the government logos

Primary colors and gradient

Roman

Devanagari

Typeface used in website and didigtal interfaces

Typeface used in logo

#95B5C7

#2C6C90

#3D3D3D

#9D9D9D

Hind

अआइईउऊएऐओऔकखगघङचछजझञटठडढणतथदधनपफबभमयरलवशषसह

Aa

Source Sans 3

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Photos slide show of the school & school activities

School’s aims and visions

Homepage

Key benefits

informing & confirming free education and dorm

How to login, clear CTA to

guide the user to the single most important action

Gallery and news.

Photos help in trust of the campus snd facilities

Shortcut to gallery

Highlight FREE

Benefits & facilities

Gallery

Building trust

Principle’s message

Vision

CTA and guidance

View Gallery

Screens

Conventional Site Structure

Clear Value Proposition

Action-Oriented Guidance

Gallery

Hostel and Safety

Photos of hostel, mess and residential areas of the school.

Gallery includes tabs of all school and residential facilities

News section with important dates and download links will be present in all pages

Clear communication about the safety of the student

Work in progress...

Pages accessible through the primary navigation bar

Curriculum sorted according to classes

Photo focused pages for hostels, mess, sports and co-curricular

Mobile optimized layout

Create a free website with Framer, the website builder loved by startups, designers and agencies.