Revitalizing Internshala Trainings’ Landing Page: A Case Study in User Experience — Part One

Allrichhayden
10 min readMar 6, 2023

--

Let me take you through the 3–4 month process of redesigning the landing page for Internshala training and reducing our bounce rate by nearly 30%.

My role & the team

As a designer at Internshala, I have been tasked with working on the edtech part of Internshala (Internshala Trainings) for over 2 years, and one of the major projects that we as a team had to take up was the revamp of our homepage.

About Internshala trainings

Internshala is a company that links students with recruiters and offers them internships and jobs. In this ecosystem, there is Internshala Trainings, an online edtech division of Internshala.

  • A large selection of skill-based courses are available through Internshala Trainings, to assist students and professionals in improving their knowledge and skills in a variety of fields.
  • The mission of our platform is to upskill learners with relevant skills so they can have success in their careers.

In this case study, we will be focusing on the redesign of our homepage, why we had to do it, and how it helped us uplift the brand in terms of relevance and discoverability.

Internshala Trainings Homepage — Before revamp

How crucial this landing page is to our business

Commonly, landing pages don’t serve major purposes for businesses. It is not the same for Internshala Trainings. The landing page for our product serves as a catalogue for two of our major offerings

Major offerings catalogue — Before revamp

Our users use this page to browse what we have to offer. It is the entry point to our business. It is one of the main sources of revenue for Internshala’s business.

Identifying & understanding problems

With millions of students visiting our homepage every month, it was crucial for us to get this right. We first observed the quantitative data to find the current issues faced, which gave us the insights that

  1. Our bounce rate (BR) was quite high (around 60% overall)
  2. The sign up rate for the courses we offered through the homepage catalogue was quite low

💡This provided us with the metrics we needed to improve.

While looking at the qualitative data we collected through our support and University relation teams we gathered more insights such as

  1. There was no trust building/reliable factor for Internshala Trainings as a brand
  2. Course discoverability was an issue (The Course catalogue was not precise)
  3. Business offerings were not being shown properly (The 2 major offerings as mentioned above)

Through this data, we had an overall grasp on what problems needed to be solved on a larger scale.

  • In addition to the fact that the landing page for our platform has grown outdated in comparison to those of our competitors.

The main objective of this redesign is to create the IST homepage in a way that talks about the IST brand itself and builds trust amongst our users.

How we approached this problem-solving:

As we had to revamp our entire page which included several key sections such as

Each of these sections had their own set of challenges, Hence we had to take a modular approach and solve them one by one, To help the reader understand our entire thought process we have divided this Case study itself into 3 different parts tackling each of these problems,

First fold of Internshala Trainings

The one you are reading shall go deeper into the though process behind the changes made to the Header & First fold of our homepage, and how it impacted our business overall

The First Fold

One of the problems we identified was that our business offerings were not clear among users

💡The business offerings & what this meant

To understand this problem, lets understand what our business offerings are. We have 2 primary business offerings,

Certification courses

Certification Cards — After revamp
  • They are short term courses lasting from 4–8 weeks
  • They are relatively inexpensive charging around ₹1,400 per course on average.

Placement Guaranteed Courses

PGC Cards — After revamp

They are longer, ranging from 4 months to 6 months

  • They are more expensive charging around 30,000 Rs per course on average and
  • They guarantee that at the end of this course, the student will be placed in an internship or job.

These are the offerings which have clear differentiation & are equally important to our business but when we observed our website we noticed there no clear indicators sharing this info upfront,

Design process and challenges

Our Design Process
  • Through this revamp, we worked on evolving the design system we had to keep our platform updated compared to our competitors which involved us reiterating and experimenting with the ways we previously use components in our platform.
  • To design this homepage, Several pages were analysed for design patterns among our competitors to come up with the best solutions for our problems. Accordingly for each module separately.
  • In order to understand how people interacted with our designs and address any flaws we discovered, numerous iterations and prototypes were built, user tested, and refined.

1. Header & dropdown menu

1.1 Bringing clear distinction through the header

Dropdown menu — Before revamp

Initially PGC and Certification courses combined in one dropdown in the header, and our second major offering was just another category in the dropdown.

Dropdown menu — Before revamp

We also checked the data and confirmed that our platform users frequently used this dropdown to navigate to our courses.

Hence in order to create a distinction between our offerings we had to separate them starting from our header,

Solution for website (desktop)
Dropdown menu — Solution for mobile

1.2 Distinguishing through dropdown

One of the offerings is charged much lower than the other, more premium option, and we had to show this distinction inside the dropdowns the same way they are distinguished in our headers

2. First fold

2.1 Sharing what our brand stands for upfront,

A problem we identified upfront was “There was no trust building/reliable factor for Internshala Trainings as a brand”

Which made sharing what our brand stands for one of our problem statements. In our current landing page,

Internshala Trainings Homepage — Before revamp

💡Insight from Internshala

One key insight to notice here is that Internshala, our platform where we help students get internships and jobs, is the more well-known portion of our brand, and a majority of the Internshala Trainings user base comes from Internshala the platform.

  • When they enter Internshala trainings at the current stage they have no clear indicator on what it is & what we offer here.
  • One hypothesis is that user might even feel they are still in the portion of our platform where we offer internships.

Hence we had to clearly define what we did in this part of our product upfront.

Initial Ideations of our first fold — During Revamp

In the initial ideations while adding this tagline to the page had a standard layout of an image & the tagline.

2.2 Bringing both the offerings up front, and why

Going back to the underlying problems we identified at the beginning

From business offerings not being shown properly, with no clear distinction & the fact that The PGC courses catalogue was found near the bottom of our page after several scrolls.

We needed to find a way for our users to easily access the PGC course catalogue without having to scroll,

But one card in our PGC offering alone created a bias. One of our offerings was being highlighted over the other one.

💡Why should there be no bias among the offerings:

  • Lets assume, a student who might be interested in taking up a course. But their budget is less as they don’t want to spend too much money on an online course.
  • If this person is presented with a button which will make them skip the offering which provides us courses around 1000 Rs & take them to a course that charges 30,000 Rs due to the priority given it could mean disaster for the business.
  • The same scenario could play our the other way around as well. Hence we can’t create a bias to our users and let them explore both on their own

We know from data that the target audience for certification courses and PGC is not very different. Hence, we can’t differentiate the users based on target groups.

Which later evolved as this also presents a chance for us to introduce both our offerings upfront with more needed info,

Iteration of the first fold — After adding the offerings as cards with more info

✅ Helping us solve the problem we identified upfront helps us distinguish our business offerings better.

2.3 Removing redundancy & combining sections:

At the current stage, we had 2 sections at the top defining, our offerings and what our brand offers.

💡 We discovered some redundancies that could be affecting our bounce rate.

  • One metric we discovered was that many of our users bounced from the page after the first scroll.
  • It is ideal for us to show them our catalogue as high up front as possible.
  • It is best to not have any sections that don’t add value upfront.

With this in mind we figured that the image in our first fold didn’t serve any purpose other than aesthetics, hence we started exploring ideas on removing it and combining the 2 sections to solve our problem

First fold design — Website (desktop)

✅ After combining the 2 sections it created a concise layout where all the elements present on the screen had a purpose without any redundancy.

First fold design — Mobile

2.4 Ideation for auto-scroll

After usability testing, we found that users were hesitant to click the card at the top of the page, expressing a desire to explore the page, and they assumed the cards would navigate them away from the page.

We came up with a solution after going through several iterations and doing research. Which was an auto-scroll indicator icon.

✅Later we observed, returning users during the test use these heuristics to navigate to sections on the website more frequently.

3. Adding the companies section

We ideated on adding a section right below the first fold to give us credibility in order to increase user trust and reliability in our brand.

We experimented with two approaches to drive user engagement:

Ultimately, we found that highlighting potential employers resonated best with our audience, many of whom are seeking internships and jobs.

Which let us make the decision to have the Top companies section below the first fold.

Impact

Our revamp successfully addressed the issues we aimed to solve, particularly through better differentiating our offerings.

  • ✅As a result, we saw a 10% increase in user engagement with our PGC product
  • ✅A significant 30% decrease in landing page bounce rates
  • ✅These improvements have had a clear impact on our sign-up rates, driving growth across both our certification courses and PGC offerings.

End of part one

First fold design — Website (desktop)

This brings the end of the part one for this case study where we redesigned the First fold of this landing page.

Stay notified on the next part of this case study where we go through how we improved the navigation for our catalogue.

With all the other design decisions revolving around this change. To how it helped us improve our metrics.

It is one of the most interesting portions of this overall project, & we can’t wait to share it with you quite soon.

And That’s a wrap

You can view the live website here,

Through this project I learned and better understood on coordinating with product & other major stakeholders involved and how to convey your ideas better.

Through this process we also introduced the Internshala design team with several new processes including, rapid usability testing & working with heatmaps.

Thanks for reading through this case study hopefully it gave you some insights on Internshala Trainings as a product and how we made decisions aligning with the business objectives to achieve overall growth.

case study written by Allrich Hayden, You can find me on 📷Instagram and ✈️Linkedin if you have any further questions.

Find more of my works on My Website. Catch you on the next one.

You can find the LinkedIn profile of Shubham, the co-designer and writer of the upcoming second part of this case study, as well.

Team

Primary Designers, Allrich & Shubham

Overviewed by, Shivani & Himani

Product managers involved, Naman

Overviewed by Deepa

Developers involved, Raj, Robin & Hritika.

Other stakeholders include Vikram, Shadab & Sarvesh.

--

--