Hochschule Esslingen (University of Applied Sciences Esslingen) launched a new website two weeks ago. They finally released it into the wild long after I saw the first design draft when I was still a student. Let’s take a look at it and do some UX review.
P.S.: The 84 years in the title refers to this legendary GIF that is widely used when something takes forever to arrive.
Redesign With Familiarity
The new HS Esslingen Website: Fine, Fresh, Fierce and Familiar
Most of the time redesign feel like rebrand because clearly people behind the room don’t know the difference between those two. In the case with HS Esslingen, when you already know HS Esslingen as a brand (or as an university in this case), you know what makes HS Esslingen HS Esslingen: the bright blue color, the pinkish-red color, white color and sans-serif font-style. They incorporate a lot of rectangles and lines in their design too.
With the new redesign they use all of those elements. Even when we open the website and ask you which university website that is: you probably know it is HS Esslingen’s website just by seeing the design and all.
Reviving What’s Not Alive
Peculiarly, the login page of HS Esslingen still uses the old design
The design of the website brings a breath of fresh air. It’s still as bright as the old one but the new one feels much more alive because of the prominent usage of photos, which show emotions to the visitor of the website. Back in the old days, there was nothing much to see except text, HS Esslingen’s logo and some tiny pictures from the news sections.
If you’re wondering how ‘dead’ the old design is, you can check the login page because it still has the old design.
It’s New But It Doesn’t Mean It’s Not Dirty
UI Bug in The Navigation
It shines and it’s beautiful for sure. But it doesn’t mean it doesn’t have any flaws here and there. In this section we’ll see at least a couple of flaws that I have discovered. Disclaimer: during the launch there were some bugs that I have uncovered but did not publicly announce. And when I wrote this piece of article they already fixed it which is good. I’m not here to describe all the numerous bugs.
In the first image of this section you can see the bug in the navigation. It probably happened because I kept resizing the window and somehow it crashed. Not really a big deal since it probably will happen once in I don’t know, 5000 attempts of resizing the window?
Same element, different style
Did you know, that it is a real challenge to design for a German company since German language tends to have a very loooooooong words and use really long sentences. I always keep in mind “What will happen if this placeholder here is not wide enough for german words?”
The above page show you the same elements which displays some kind of news. On the left side the font is smaller and the title is shorter. And on the right side the font is bigger and the title is way longer. The question is why do they have different font sizes?
If the average length of the title would be very long then stick with smaller font-size. And if the average length would be kind of short then use trimming method with character ellipsis “…” for long title.
You can’t have both at the same time. I as the reader would find the different font-size to be annoying.
There are still design inconsistencies around the website that I’m just too lazy to list. Because to be honest, if you design a big website, you tend to lose the consistency. That’s one of the reasons why you need to have Design System within your company. So yeah. Let’s move to a different topic.
Sometimes size does matter
This button likes to stay wide
To be honest I haven’t visited ever single page of the new HS Esslingen website. You know how gigantic a University website can be. So I just visited the homepage and the IT faculty page.
In the IT faculty page you can find one of the buttons is not responsive. I don’t know how the Frontend developers coded the style of the buttons throughout the site, but they need to check it.
Another unresponsive button
Don’t Offer Something Your User Can’t Use
Last minute before I wanted to post this blogpost I discovered another bug in the website. If you go to the Bachelor page you will have a text field and three buttons with different colors (all of them somehow doesn’t have ‘selected’ color)
As a user, I expected to find a study program which matches the word that I typed into the field. But well. It doesn’t work. (Edit: Oh it works now)
Why is the live search there if it doesn’t work?
What does it all mean?
There is still some work for HS Esslingen new website team to do. And it is not a short list either. But as HS Esslingen graduate, I am happy to finally see the debut of the new website despite the number of flaws. But like I said many times: it is normal to have flaws. That’s what will make you great in the end.
