Redesigning IGNOU landing page- A UI/UX case study

Link to Figma File

Introduction

Being a student of Indra Gandhi National Open University (IGNOU) myself, I have to open their website multiple times for all manner of queries.
And I couldn’t help but notice each time how hard it was to navigate through it.

It happened multiple times that I had to google something to get to that part of the website.
I knew this is a problem faced by many students and I should do something to make it better, therefore this case study came to be.

About IGNOU

The Indira Gandhi National Open University (IGNOU) is a public research university. IGNOU was established in 1985. It is run by the central government of India and is the largest university in the world with a total active enrollment of over 4 million students.

IGNOU was founded to serve the Indian population by means of distance and open education, providing quality higher education opportunities to all segments of society. It also acts as a national resource center, and serves to promote and maintain standards of distance education in India.

Problem Statement

To design a clean, simple and easy to navigate, landing page for students who are currently studying or are considering to join IGNOU

I knew the website needed a redesign, and I wanted a focus with this redesign, so I decided I would redesign the landing page as it’s the core of the website, and it was very chaotic to navigate through.

I took an approach in counter to the chaos it currently held, to design a clean, simple, and easy to navigate, landing page for students who are currently studying or are considering joining IGNOU.

The Solution

This is the final result that came of this approach, in contrast to how it was before.

The old website :

The redesigned website :

I used the primary color at 10% opacity for the background

And how this came to be ? (The Process)

I take a very simple approach to redesigning or designing solutions to the problems I want to solve.

• Firstly, I understand why the issue exists and what issues it causes for the users.
• I collect inspiration and understand how others have tackled these same issues in their solutions and if there’s anything we can borrow from them.
• Once I have an idea how others have designed their solutions, I begin working on my solutions and laying their foundation with defining a design system (Typography, colors, and button’s) that would suit my solution.
• Once my design system is in place, then I make low fidelity wire frames to see how they would look and feel on the actual screen.
• Now that I have finalized an iteration, I make it into a High fidelity screen and prototype it as well.

The Design Process used to redesign the Landing page of IGNOU

Defining the problem and pain points

The first step in the process was clearly understanding and writing down the issues faced by the students visiting the landing page.

• The landing is chaotic and confusing to navigate.
• Students had difficulty finding the options they needed to use often (e.g., courses offered, etc.)
• The landing page was not very attractive or clean, making it very less appealing to new students who had an interest in learning more about IGNOU and potentially joining it in the future.
• The way the landing page was designed, it felt very overwhelming for the new students to navigate it.

Gathering Inspiration

Now that I knew what things I have to focus on, I wanted to gather inspiration from other college landing pages and learn things from them.

I aimed for an approach that ran counter to the problem's clean, consistent, simple and accessible.

The Inspirations collected and studied in process of designing the IGNOU landing page

Defining design system

Now that I had my mental maps for the landing page, I wanted to begin designing it, which begins with defining a design system for thing’s that I’ll be using consistently throughout my process of designing the landing page.

Typography

I started with defining the typography, after much research and thought I decided I’ll be using the typeface Open Sans as the foundation of my landing page.
It’s one of the very widely used fonts, so users will feel comfortable with it.

I declared 3 sizes for each section of typography from headings to labels, and each size had 3 variations, regular, medium, and bold.

The Typeface and the Fonts used in the Landing page design system

Colors

Brand colors were one of the easier things to declare, as I used the old website as the basis for the color choices for the new one.
All the regional websites use the same color scheme, so it will be inconsistent to stray too far away from what has already been established and associated with the university.
I did however make little tweaks in order to make the contrast better and make the overall visual design better, in order to create a better experience for the users.

IGNOU established colors were used as a base for declaring brand colors

After brand colors were declared, I declared neutral and text colors as they’re very essential to the overall design of the landing page are used almost everywhere, to increase or decrease emphasis on the things.

Neutral colors have a difference of 10 pts of Luminosity between them

Text colors are plain colors without many variations or tint to them.

lastly, I defined the semantic colors for success, caution, and alert.

Semantic colors are also designed with difference of 10 pts in order to accommodate different situations.

Buttons

Now that I had the colors and typography, I used them as a basis for creating buttons for the design system. I created Primary, Secondary and Tertiary buttons and I made the left and right icons as a component property to make them easily accessible and to reduce the amount of variants I have to deal with.

All the buttons were designed with variants and component properties to reduce the variant count

Designing

Low Fidelity Prototypes

Now that I had all my foundation ready, I started working on my rough idea’s and create low fidelity wireframes.

I don’t put many details into them as they’re very rough, and I use them to form the structure of the design.

In the case of IGNOU’s landing page, I made 3 Iterations and I settled on the one that I felt was most appealing.

I felt it would be best for displaying all the features and section’s IGNOU has to offer, in order to be appealing to both new students and returning.

Low fidelity wireframes made while shaping raw idea’s that would become the final result.

The Final landing page

Once I added all the details to the low fidelity wireframe and made it into the final design for my landing page.

I do my best to build on top of the wireframes with little to no changes to the basic outlines I settled on.

However, I sometimes understand thing’s feel and look different in the final design and might need changes, so I'm always ready to modify the designs I have, whenever necessary.

The Struggles

While trying to achieve a good design and end result, I ran into multiple, roadblocks and hiccups, all of which challenged me to think of the solutions in a new way.

thanks to fellow designers who gave me feedback on my ideas and lots of designers who put their work online to inspire others, I was able to improve upon my final designs, and due to the same they took a few final iteration’s to get to their final shapes now they’re in.

These were pre-final iteration’s of the components, the solutions in next iteration’s made it into the final website.

The Changes

Now let’s talk about what I changed in the redesign, and why did I do it ? let’s walk through it together.

i) The Header

The header was the first thing that caught my eye, because it’s the starting point of every website, so it required utmost attention and detail.

on the original website, the header was simple and was sort of merged with the mixture of a carousal which had two different frames!? one was registration for students and the other was events happened at convocation.

the header in the old website has a very old school look and carousal is fighting to represent two things simultaneously

I simplified the header and added a sub-header above it for links which were on the website previously, and changed the navigation options, so it made it easier for students to look for things.

I also shifted the student login and search to a button in the header, instead of them taking up separate space as components on the website.

my goals with the new header were to give it a more clean look and manage all the links without overwhelming the user

ii) The Carousal

As I already mentioned, the old carousal was a mixture of things, so once I moved the links of registration to the navigation bar in the header, I had enough space to highlight the special event’s that took place on 26th convocation of IGNOU and that’s exactly what I did.

While designing the carousal I decided to give full attention to the event’s as I already relocated all the other links

iii) The Alerts, News and Announcements

Alerts on the original website were very open and bold, which was good as alerts are meant to be bold, but news and announcements were completely ignored and pushed into a corner, as if they weren’t important enough.
so when I redesigned them it was a bit of a struggle as I did not know how could I make them feel similar in importance while emphasizing one of them.
But I eventually I figured it out, I decided to use an alert color to emphasize the importance of alerts and highlighted the links and paired them with icon’s to show which alerts are recent.
As for news and announcements, I designed them similarly, but I used the grays and lack of shadow to de-emphasize the importance of them while given them enough room to be on par with alerts.

The old alert, news and announcement section :

Alerts, on the original website stood out as links, but news and announcements felt out of place with the map

The new alert, news and announcement section :

New Alerts not only stand out, but by contrast, news and announcements get a de-emphasized look

iv) Courses offered at IGNOU
Now we’re past the main section of the website, what follows is the things I felt should’ve been on the landing page for student’s but student’s had difficulty finding them, first of them being the courses offered at the university.

So I designed a section which let’s student’s explore the courses and then browse through courses and certificates the university provides on a new page.

All the courses at IGNOU can be divided into these five categories, and if the user is not sure, they can freely browse them as well

v) The regional centers

This is another option that was avaible on the orignal website but was hidden and was difficult for students to find, so I created an section for this to be emphezised as well.

I included an map which showed university’s regional center locations and provided a button to provide access to that section of the website (Yes there was already a page just hard to find).
Not to mention there was a map on the website but it wasn’t functional or useable.

even tho, the map used isn’t a world map, but it conveys the point that IGNOU is widespread, and allows users to look for a regional center near them

vi) Testimonials

On the orignal website there was no such place to see where can we see what the student’s has to say about the university.
Every college is doing this through their website and I felt if we’re not showing the student’s are having a positive experience, it could imply they’re having a negative one.

So, I designed a testimonials sections where I could display what students are saying, Oh.. how do I know ?, well you see I just went through websites where student’s leave reviews and just copied the reviews from there.

I made the comments made by student’s take the stage and stand out, as that’s what testimonials are for

vii) Infographics

Another very promising feature I noticed on the websites of colleges when I was collecting information and inspiration for the project was infographics about their university.
I thought to myself Does IGNOU also have them ? Yes apperently, it turns out , they’re quite impressive as well, this made me realize something that :

If you don’t put data on the website for users to see they’ll never know about it.

So, that’s what I did I included Infographics on the website of IGNOU, so people can know more about the university.

I tried several variations and in the end decided on this one as this allows highlight as well as clear communication of information

vii) The absence of the About IGNOU section

I’ve explained what I added and what is there in the new redesign, so I thought, I’ll take a minute to explain what happened to the about IGNOU section that was there on orignal website.

Well I moved that whole section to the navigation bar, so it’ll still be a option for student’s who want to learn more about the university and it’s history and mission, while not feeling they have to read wikipedia when they’re just looking to register for their next semester.

That concludes the breakdown of the indiviual ements on the website you can go back and see the final result as a just by clicking right (Here)

Or you might want to interact with the website, so here ya go !

Here’s A Prototype of the website as well, even tho I didn’t really design any navigation to new pages, you can still interact with the website and it’s micro interactions

Final thoughts

Thanks for reading ! I really appreciate it. :D

If you’re thinking, “why just the landing page ? why not the whole website ?” well to be honest, the website is a complete rabbit hole of pages and links, so sorting that many pages would be a nightmare for someone like me who is just starting out, not to mention overwhelming.

Another reason why I didn’t choose to do it, which might come across as a surprise, is they didn’t need redesigning.

Yup! that’s correct, in most pages of the website they do their function well and don’t need a redesign, because at that point I’ll be solving a fictional problem.

The reason I redesigned the landing page because i personally felt the chaos and the inaccessibility of it.

I hope that answer the question of why I only redesigned a single page and not the entire website, and I do acknowledge other designers might disagree, so please feel free to reach out to me.

I would love to speak to you about and learn more, since I have still a long way to go in solving issues.

You can find me on the following :

LinkedIn : Akashdeep Khushhal
Twitter : Akash Khushhal Ux
Email : Khushalakash@gmail.com