Thank You, Edvin Joseph, 500094918
Alright, I do think I need to elaborate a little on why I particularly chose the MyUPES portal for this assignment. Honestly, compared to a lot of, (especially Indian) student dashboards, the UPES portal, isn’t exactly that bad (maybe even pretty good). So, initially when I was trying to find bad websites to redesign (googling “bad websites” basically), there was always this dissatisfaction in my heart. Like come on, modi.gov.in and Craigslist has noting going on for me. So, how am I gonna sit in front of my laptop doing this for hours on end if I don’t have a read connection with the website. That’s how I just decided to go with my own portal. If you’re gonna fix the world, better start from your house itself right?
Now, let’s begin with the 🐘 in the room...
There’s a lot to take in here, but first let’s ignore all the distractions, the colours, the fonts, the images or whatever this is...?
and simply just take in the layout of this whole page. A nav bar with mostly redundant links, a yellow(really?) dark mode switch with an off centered icon, a disfigured pfp, and that god awful contrast ratio in the main logo. Below that we are presented with an Ad slider. Like, why would you do that? Why do you need to show advertisements about the university to students who are already enrolled in the university? The page marker stands out too badly and beside that a notice board which blends in with the background with no seeming differentiation. And are those supposed to be clickable links? *sigh*. The biggest disappointment here is that font tho. Have you seen those Instagram/linked In design influencers? Well, there is a particular breed of these designers who are called “dribbble designers”. Devoid of any practically and UX. But there’s always one thing in common - Poppins. It seems that MyUPES couldn’t escape from this curse either. The hierarchy is good, typesizes are great but the font itself is the problem. It lacks professionalism and discipline, something necessary in a student portal used by all kinds of people. I feel like this is gonna turn into an essay, so I’ll just sum it up with this.
harsh corners
where did the
radius go?
“principle number 7, figure and ground”
this bug here
and this whole section doesn’t work either
why is this blank?
lmao these pictures
this could be better
offcentre
icons
spaces within nav links
squished up image
links are different colours

You might feel like you’ve seen this kind of a style from somewhere and you’re probably not wrong. This is the 2022 WWDC Apple Slideshow aesthetic. They too probably “inspired” it from somewhere else, but they definitely did popularize it among many designers and companies making it a “trendy” web design format. When I actually sat through the original MyUPES portal the other day, I really felt a similar style of arrangement in it. I don’t know if they were actually going for this(probably not) but I decided to stick with it and exaggerate that a little. This here, isn’t a serious attempt at redesigning the page, but is a caricature of it, of what I think it wants to be, of what it can be. Not to say that my process wasn’t serious at all though. I have tried to employ all the design principles that I know and have tried to make it a little bit better, a bit more user-friendly - both UX wise and feature wise, at least for me.


And from here👇, I shall explain myself thoroughly...

Tech Support
International Connect
Virtual Tour
Webinars
Achievers
Student Stories
Events
Gallery
Life at UPES
Map
Gandhi Jayanthi
Dussehra
Midsem exam 1st Sem/Start
Midsen exam 3rd Sem/End
Midsem exam 1st Sem/End
Diwali Break/Start
Diwali Break/End
02
05
06
15
22
24
28
October 2022
UPESCares
1800 270 7121

A 24x7 Counselling Hotline

My Library
Over 2.46 Lakhs+ e-book titles along with access to World e-Book Library

Clubs
Art & Design
Core
Member
FlyCHI
Explore Clubs
My Resources
Financial Support
Remedial Coaching
Cultural Activities
Anti-Ragging
Sports
DSW
Discipl
SEE
Health & Medical
Personal Counselling
Design & Analysis of algorithm
Due Today - Assignment 5
27/12/2022
Design & Analysis of algorithm
Due Today - Assignment 4
27/12/2022
Design & Analysis of algorithm
Overdue - Assignment 3
27/12/2022
Notifications
BlackBoard
Free Access to 3900+ global courses a single click away

Notice Board
Medal Winner List

Class commencement scheduled for B.Tech/ BA/ B.Com/ BSc/ MCA/ MSc/ Integrated BBA – MBA/ Integrated BCom - MBA/ MA/ B.Pharma/ Msc/ Integrated BSc-MSc/ Integrated B.Tech-MBA

Scholarship Policy

SRE - Requisition Formats

Counseling form for NC students

Examination Notification


8
Sap Portal
2
Feedback
Examination Notice
Student Attendance
Timetable
Payment Receipts
Percentage Letter
Fee Invoice
Welcome to UPES
Dr. Sunil Rai, VC

500094918
Edvin Joseph
my
BlackBoard
Sap
Covid-19
Help
Logout
A better card UI. This approach improves navigation and reduces the total length of the page.
As above, so below.
New notification icons and redirect buttons.
This implies
figure and ground
Go Dark

Links more emphasized with underlines and arrow icons.

UPES
Cares
New identity.
New logos.
my
Design & Analysis of algorithm
Due Today - Assignment 5
27/12/2022
Design & Analysis of algorithm
Due Today - Assignment 4
27/12/2022
Design & Analysis of algorithm
Overdue - Assignment 3
27/12/2022
Notifications
BlackBoard

Live

BlackBoard

notifications.

Red, Green &

Blue.

Oh! forgot one thing, This cute little navbar!





Compact links, only the necessary ones, and if theres are any notifications, a simple green dot will indicate it for you.


Again, the Gestalt principles are employed thoroughly in the design where it is needed, and are broken well where it is not needed.

Figure & Ground is there under the “Welcome to UPES” text on the video, and under every single floating button.

Proximity is there amidst all the text links in the Sap Portal section and in the Notifications card.

Simplicity is seen when the user perceives the whole dashboard as a single unit, the all encompassing one, rather than as multiple elements in the initial viewing.

Similarity is also seen everywhere, text, with similar structure are perceived to have the same property(such as links). The arrow buttons are all perceived to have the same property even though they’re situated in multiple cards.

Common Region is seen in every single card, where the backgrounds make a distinction between the different cards but they group all the elements within itself.

For Symmetry, well, if we are gonna force it in, it can be seen in the book icon in the library card.

Closure can be seen in the fun little circles surrounding some text. Even though not fully connected, they appear so very much.

Common Fate, although not much here, can be seen in those little chips in the My Resources card. They seem to be giving the appearance of fading away as one group.

Element Connectedness, almost all of the UI is created using boxes and lines. From the nav bar to the background check pattern. Everything is using this connectedness principles and nests elements very nicely.



By this note, I’m concluding ,my assignment. But wait! There is a mock-up below to show you how all this would look like in the real world. I think it looks alright doesn’t it?


BlackBoard
Sap
Covid-19
Help
Logout
This is my attempt at fixing the MyUPES homepage using the 12 Gestalt principles.