Abbhyuday Website Design and Development

Background Information

India is plagued by a lack of decent education (especially in remote areas) and the pandemic has not made it easier for people to afford quality education. In fact, it has left people jobless, struggling to pay the bills. It’s not uncommon for students in India to attend tutoring centers, especially in high school. Owing to the pandemic, many students have returned home and are in need of quality education to continue their high school studies and prepare for college entrance exams. The client has started a remote distance learning solution so many of these students need. 

And they just got started! This project came as an interesting opportunity to explore everything from branding to user research, web design and development. 

About the project

Abbhyuday wants to make education accessible for everyone. It is hard for many adults to pay for extra tutoring classes for their children in high school and that keeps many students from excelling in academics. Although the only deliverable at this stage is a well-designed, intuitive, and fully functioning website, the client would like to build an online learning platform specifically for students from middle to low income families. 

This is a relatively extensive project where I wear many hats. The client has limited technical resources at their disposal so I’m in charge of everything from research and design to development. All the work is done remotely including user interviews and interacting with the client. 

Timeline

Research and Validation: 1 week

UX and UI Design: 2 weeks

My role

User Research, Interaction, Visual Design, Illustration, Wireframing & Development

The Goal

Design a website from the ground up that boosts up registration for an educational institution formed primarily after COVID-19 affecting in-person classes students often take to supplement their high school classes.

The Process

Research

Design

Implement

Research

Target Audience

Thinking about the target audience was crucial in this project. This service is geared towards students in small towns who would generally travel to different cities or states hundreds of miles from home to attend coaching institutes. Within that demographic, our focus was on middle and old age adults – after all, they are the ones who decide which classes their 14 or 16 years old would attend (yes, it’s a bit different over in India, especially for middle to low income families!). It was not as simple as that though. I had to keep in mind that a neat, visually appealing website would also cater to the teenagers as anyone can quickly look at the website to easily access information about the service.

User Personas

A third of the country (India) is poor. Therefore, this service is meant to come as a relief to parents in lock down (not earning money) who want their children to get access to as good a course material as they can even if they don’t have a lot of money. It’s also important to note that community and family are a huge part of one’s identity and well-being in a country like India. Keeping this in mind,  I remote interviewed people from this demographic and created two personas that would guide me as I work through both design and development of the website.

Name: Mukesh Sharma

Age: 42

Tech Savvy? No

Goal: Mukesh wants to provide his kids with the best education and get them more passionate about studies.

Pain point: Mukesh cannot afford the high tuition rates at top tutoring institutes for competitive exams. He cannot read English either which makes it difficult for him to discover places and resources.

Name: Rani Acharya

Age: 15

Tech Savvy? Yes.

Goal: Rani wants to get high grades. She lives in a town with limited educational resources so she has to figure out a way to access quality education.

Pain point: Her parents wouldn’t let her live away from home for concerns regarding safety. She also finds attending lectures online at a certain time of the day not flexible enough.

Design

Illustrations

Illustrations are a huge part of any application. We process and retain visual data better than any other data. And illustrations do just that: communicate what a service or product is all about. My illustrations went through several changes as I thought more and more about my personas. Below are two different versions of the main illustration communicating what it is the institution does. 

After completing the illustration on the left, I thought about how Mukesh would perceive it. Like I already mentioned, we know that humans process visual information almost instantly. Considering our audience, I wanted to make sure that the illustration was culturally relatable and that it instantly communicated what the service is. One obvious way I could achieve that was using clothing. 

Key takeaway: Representation is crucial in user experience!

Version 1
Version 2

I went for something similar with the second illustration but because they represent a younger generation, I wanted to keep the clothing difference subtle. (You will notice this illustration went through several changes and is very different in its current form)

Wireframing

Wireframes in this project helped set the website architecture. After confirming the amount of information required on the website from the website owner, I made final layout changes and moved on to prototyping.

Designing the home page

When designing the home page of this website, I had three goals in mind:

  • Clear navigation and clean UI (focusing on call-to-action button, highlighting the main feature: lower price of the service

  • Make the purpose of this service very clear to the user

  • Establish trust

  • Highlight fee, reiterate the plus points and direct the user to registration

Designing other pages

Through the prototype of this website, I realized that once you moved to the other webpages of this website, there was no indication that this website is about an education service. The home page had two illustrations but the rest of the website was empty. Without making it too distracting, I came up with a solution I thought would preserve the creative vibe of the service and website. 

On the left is my first attempt at keeping the user engaged through illustration. On the right is what we have now. 

Version 1
Version 2
Changing the home page

Again, my (mostly visual) design for pages in this website changed over the iterations. After making a prototype, I realized that the home page seemed disconnected to the rest of the website. To get around this design problem, I came up with a simple solution.

Version 1
Version 2

Implementation

Through the process of designing, I realized that the client wasn’t able to visualize what the website would look like through the black and white wireframes and although it acted as a good base for me to build upon, it wasn’t enough. So I coded a high-fidelity prototype for the client to add suggestions to using HTML5, CSS3, and Bootstrap. 

View Protoype