Building a marketing website to reduce cognitive load
A woman looking at a MacBook smiling with a sense of relief with her hand touching her forehead
Mentorship can be what makes one successful (Image source: Unsplash)
Date
-
Context
  • Freelance
Skills
  • Website design
  • Full-stack development

iFAR - IAS For A Reason emerged as a mentorship platform with the principle "by the students, of the students and for the students" in minds. Founded in 2023, by my friend Akash Sharma, as a platform to help students overcome exam anxiety and fear with regular calls, iFAR has grown into a community of students, mentors and successful candidates.

With the rapidly changing pattern of the exam, the role of coaching institutes has become redundant in recent years. With a huge number of students wanting personalised attention and feedback, iFAR has been created to fill this gap.

Challenge

To build a website that highlights the uniqueness of iFAR's approach of mentoring instead of the coaching that other institutes focus on. Akash's goal was not to create just another IAS coaching centre, quite the opposite, in fact. Akash insisted on building something that exudes class, and highlights the quality of mentorship offered by iFAR. Any student visiting the website should feel at home. They should be conveyed all the information that they may need to make an informed decision about joining the community, mentoring under Akash's leadership, or to even pursue the toughest exam in the world to crack.

Approach

Landing page

Landing page screenshot

Starting with the landing page, I wanted to keep the visitors' cognitive load to the minimum. An IAS student already has a lot of information to hold in their head, and having another website with a bunch of information thrown at their face is borderline stressful. The image below is a screenshot of another institute offering IAS coaching. I wanted to get away from the ultra-detailed landing experience, and offer something that comforts the visitor.

A competitor's website

With a simple headline, and a couple of statistics about iFAR's successes felt just enough information to build trust. As the visitor scrolled through the landing page, they would read the testimonials presented in the form of chat bubbles: a UI familiar to students since they primarily spend time in Telegram reading articles, thus reinstating the fact that iFAR aligns to the students' needs, and not the other way around.

Scrolling a bit more revealed iFAR's most popular YouTube videos. This was intentional as it suggested to the visitor that what they are visiting right now is not a bunch of fluff. There are real people learning with iFAR, and are actively looking to be a part of the community.

About pages

Both the About pages (About Us, and About Civil Services) are designed to give as much information to the potential students as possible. It is to say, "Hey, we want you to succeed, and we want to be open to you." All the information about the Civil Services examination are up-to-date, and in-line with what the students would need to know about. It contains information about the kind of subjects they should choose, and how much weightage each subject has in the exam.

Why Mentorship page

Why mentorship page screenshot

With mentorship being a relatively new concept when it came to preparing for such an exam, it is imperative that we highlight the kind of problems that are solved by it. I chose a layout that is easy to understand, and reduces cognitive load on the reader by colour-coding the problems and solutions.

Mentorship programs

Mentorship programs screenshot

Possibly the most visited page of the website, it shows a detailed breakdown of each offering of iFAR, and helps the students make an informed decision about what to expect from iFAR. My idea was to simplify the layout in such a manner that choosing a program becomes like a cakewalk. You can see the step-by-step offering at the top, and a detailed comparison of each offering by expanding the "Compare mentorship offerings" accordion.

Adding more value than asked for

Light to dark mode and back

Knowing how their students preferred different themes during the day and night, I made the whole website change its theme depending on your system's preferences. If you were viewing the website with dark mode on, the entire website's colour scheme will change to complement your theme. And it would turn to light mode, if your system was set as such.

Tech stack

For the UI, I went with NextJS 13 and TailwindCSS and TypeScript (of course).

For the database, I went with Firestore.

For the contact forms, I went with WhatsApp APIs and custom form implementation using Tailwind Forms.

Fun fact

This website was built in less than 24 hours from start to finish. Yes, I designed, built and deployed the whole thing in less than 24 hours. Kinda proud of myself there. What do you think about it?

Website link

https://ifarias.com


Acknowledgements

Thanks, Akash, for allowing me to be creative for the website design! Hoping to work with you more and soon.

Next story
Google for Startups