How We Created a Mobile-First Responsive
Website for an Ahmedabad School
Located in one of Ahmedabad’s fastest developing areas, Shivashish World School
(SWS) is a premier co-educational school which started back in the year 1994. A
charitable trust started the school with Gujarati medium but with time the school got its
CBSE affiliation and introduced English medium. In the year 2021, they went through a
major expansion and re-branding exercise, which included a completely new building,
identity design and re-doing their digital presence across website and social media.
The school wanted a total revamp of their design and branding, so one of
Ahmedabad’s best digital marketing agencies came up with a best in class
website to help them achieve a complete image makeover.
THE CLIENT’S PROBLEM
Incepted more than 28 years ago, SWS has been imparting high-quality education from
kindergarten right to high school. In 2021, they set up a new world class building for
their CBSE board, but realized that in the post-pandemic era, most parents were going
to discover them online first. Unfortunately, their existing website did not match the
scale and aesthetic of the new building. The website was also being used for two
different brands, the Gujarat Board school, called Shivashish School, and the CBSE
school, called SWS, creating confusion for the user.
Moreover, the old website had been designed primarily for the desktop, with its mobile
version created almost as an after-thought. However, a quick look at their analytics
showed that up to 90% of their unique users accessed the website through mobile
devices. All of whom were being served a sub-par experience.
The school also realized that most of the things that made them unique, such as their
pedagogy, amenities and most of all its teaching staff had to be showcased better!
SOLUTION PRESENTED BY FLORA FOUNTAIN
Since most parents were accessing the website
from a cell phone, we decided to create a mobilefirst website, a first for any school in
Ahmedabad, that was dynamic and sleek.
Modern design concepts like glassmorphism,
neumorphism, micro animations, extensive use
of swipe, and an almost app-like UI were
identified to create a modern website matching
the new identity of the school. In order to
accomplish this, we decided to design and
develop a completely new mobile-first website, which was a first for any school in
Ahmedabad.
PHASE 1: ANALYSIS
According to research, 61% of mobile users are more likely to contact a local business if
they have a mobile-friendly site. That means, more than half of the target audience,
parents, would look for schools in their locality on their phones. So on the basis of the
research conducted on their website usage and research on the new mobile web
technologies, we listed some points to work on.
1) There was a lot of information available for parents, students, and teachers. So the
information architecture of the old website needed to be fleshed out better for users to
easily navigate through the website.
2) The new website had to reflect and highlight current school values, while at the same
time showcasing the facilities and amenities of the new school building, the talents of its
students and most importantly, its teaching staff.
3) The new website had to be Search Engine optimized, or SEO optimized, to improve
the school’s reach on search engines online
4) The new website had to provide an intuitive and delightful responsive experience for
all its audience, especially those accessing it through mobile devices
5) The new website had to be created on a user-friendly CMS like so the client could edit
the content and images on their own going forward
PHASE 2: IDEATION & IMPLEMENTATION
Committing to a Mobile-first approach
After gathering and analyzing the data and noting that parents would be the target
audience and that the site should be easy for them to use, we went ahead with our
original idea to create a mobile-first website. This means that our product and design
team starts by creating wireframes and mockups for mobile first. This means thinking of
a more modular layout than a grid-based one. The modules can then be rearranged to
create layouts for desktop and mobile.
Neumorphic, Glassmorphic, Animated
The second idea was to incorporate Neumorphism, Glassmorphism and animation in
the user interface or UI. Once the wireframes were sketched, our design team created
mockups using these two effects on all the various elements that make up a website,
right from buttons and tabs, to images and navigation elements. Each page was
painstakingly mocked up so there was no room for error while coding. A document was
created for all the animation with adequate references.
To implement Neumorphism all this, the front-end team placed UI elements behind a
background in CSS, to make it seem like components such as buttons are actually
housed inside the background. For the frosted-glass effect of Glassmorphism, a blur
effect was added to the background. Contrasting and vivid colours are used in the
background to highlight the blurred transparency, giving a subtle border to the
translucent objects. For animation we relied on extensive use of jQuery’s animation
libraries.
Creating content through writing and photo & video shoot
Since we had put our heart and souls into designing and developing the website, we
realized that we would also be the best people to create content for it. We wrote SEOoptimized content using the information provided by the client, adding all relevant meta
tags and keywords on each page to target audiences in the nearby 5 km radius. Since
that is the most parents are willing to travel to send their kids to school. We also realized
the need for high quality photographs and images to bring this vision to life. So we
conducted a shoot to get the right expressions of each child and teacher for the website.
We also shot scripted videos with the children each presenting school values in an
irrepressibly cute way. We overlaid sketched illustrations on some images to give them
an element of storytelling. Finally, we added GIFs for each teacher to give the website a
fun approachable vibe.
Testing
We extensively tested this website across top 10 mobile devices used by parents, with at
least 5% of the website traffic percentage, such as Samsung Galaxy phones, Vivo, Oppo,
Google Pixel, OnePlus and Apple iPhone. In addition to this we also tested it across
popular desktop browsers such as Chrome, Firefox, Edge and Safari.
RESULT:
And viola, just like that the new website turned out to be as awesome as we had dreamt
on paper and Illustrator 🙂
Let’s take a look!
The new website highlighted the teachers and the students in a quirky and creative way,
in line with the client brief.
It showcased the history of the school in a fun and more accessible way, than the usual
text format.
And here is the highlight of the website! A 3-d globe showing the alumni of the school
spread across the world.
Want to explore this website some more? Check
it out here.
So this is how Ahmedabad got its mobile-first
school website! Time for your brand to do the
same! If your brand needs a kickass and
memorable website that works equally well on
mobile as it does on desktop, one of the best and
most thoughtful website development companies
in Ahmedabad, Flora Fountain is here for you!
Drop us an email on hello@florafountain.com or
call 9558079502!
Content source