Agastya USA
A responsive website to drive donations for a worthy cause
Agastya International Foundation is a non-profit organisation with the aim of bringing experiential learning to children, irrespective of their social and economic background.
With a sprawling campus and country-wide impact, this organisation soon found many patrons based in the USA. With their current website outdated and cluttered, the kind people at Agastya wanted a website that could appeal to their USA-based audience and reflect their passion for education.
role
Lead Designer & Developer
duration
2 months
processes
Research, design, client relations, development
tools
Figma, Adobe After Effects, Editor X
The Brief
Agastya USA was to be a responsive website built on a no-code platform to allow the internal team to make any content changes easily.
The clients asked for the following inclusions in the design:
-
A "wheel" theme to symbolise the ongoing "movement" or "revolution" associated with the organisation.
-
A colour scheme with Agastya's logo in mind
-
The inclusion of their font, Bree Serif, to create a wholesome, consistent look with the rest of their design eco system.
Putting myself in their shoes
Before beginning the design process, I was curious to find out what Agastya was all about. I hopped on a train and visited their main campus located in Kuppam, a small town bordering the three South Indian states of Karnataka, Tamil Nadu and Andhra Pradesh.
What I saw was a campus so brilliant and exciting that anybody would get into their "zone" when surrounded by such ideas and possibilities.
Taking a look at the existing website
Empathize & Define
PROS
-
Prominent Donate button
-
Straight forward Navigation
-
Impact through imagery
CONS
-
Poor aesthetics
-
Highly cluttered
-
Inconsistent design elements
-
High cognitive load and strenuous to the eyes
-
Single page design with too much info
Information Architecture
The in-house marketing team at Agastya handed over a site-map to follow along for the design process. The one-page design was split into several different pages and sections and subsequently sorted to improve the overall navigation of the website.
Ideation
Wireframes
With a site-map in place, I decided to give the website a basic structure while the content was being doled out in bits.
With the given sections- hero, vision & mission, our work and a social media strip, I quickly placed some elements to get an idea of how the page might look.
I learnt from my liaison at the organisation that the top brass loved statistics and quantitative representations. This page wowed them in the subsequent meeting.
This was to be the second most important page after the landing page as it shows Agastya's work in depth. Ideations for the wow factor on this page took a lot of time.
With the given sections- hero, vision & mission, our work and a social media strip, I quickly placed some elements to get an idea of how the page might look.
Sketches
I was hired most importantly to make sure that the Website does NOT look generic. I put pen to paper to ideate the layouts of the most important sections:
1. The landing page (Using Imagery and key words)
2. The programs page (Inspired by the on-campus planetarium)
The Wheel Theme
To represent the momentum / revolution associated with education, the clients wanted a wheel theme. I achieved this using illustrations and rounded elements in the design.
The Final Design
Style Guide
With the colour palette, logo and heading font pre-decided, it was important to keep these in mind. The challenge now, was to find a way to blend these.
UI Design
A sky-inspired backdrop with lots of revolving elements were the base of my design. My primary goals for this design were:
- Create something that's extremely memorable and stands out from typical non-profit websites
- Meet the client brief while keeping their branding requirements in mind
- Capture the essence of the Agastya campus at Kuppam.
The landing page has gripping images and titles rotating in accordance with our wheel/momentum theme.
Nothing like numbers to create an impact and show the results of the organisation's work. The Ferris wheels are a nod to Agastya's education fairs - an Easter egg for existing patrons and the continuation of the wheel theme for new visitors.
Another of the pages that packed a punch was that of the programs. It evolved into this planet-like display from the initial sketch.
To take a look at the complete website, visit
Challenges & Impact
Challenges
-
With delayed content, the layout of the pages was shifting quite often. In an idea situation, the design process should begin only after the content is in place.
-
Often, I was overwhelmed by the animation and illustrations that were required. I had to trust my skills and bring in some of my filmmaking experience to create the animations.
-
It was my first time designing a responsive website, so a lot of time was lost in translating desktop layouts into mobile compatible ones. I now know how to create layouts that can seamlessly transition from one breakpoint to another.
Impact
-
A domain that previously had almost no traffic now has over 300 unique visitors each month.
-
The about page and programs page are the two most visited pages on the site (after the landing page, of course)
-
There were over 30 volunteer applications through the website's contact form within the first 3 months.
Client Feedback
"The design and development of our Agastya USA website was a complicated brief to implement but was understood very clearly by Sunayana since the beginning, turning our concept into reality while following our branding language.
The reason for creating this website went beyond just information dispersal, we wanted our audience to get the whole Agastya experience in one click- Sunayana delivered a highly interactive design while keeping the aesthetics minimal and the navigation simple; the user experience was appreciated by all.
In addition to the brief provided to her, she also gave us various insights and suggestions on how to turn a content-heavy site into a more audience-friendly visual language. Sunayana was very proactive in sending across various options in the graphics we used for the website and was quick to respond and implement all modifications suggested as per our feedback."
- Vagisha Thakur
Founder & CEO, Think Gudd Foundation