How not to design a Website – Serene Air

August 27, 2017 By - Irfan Dahir | 1150

    What happens when a start-up decides to hand over their critical online landing platform to a bunch of newbies? Let’s talk about Serene Air and find out. The airline that started operations early this year with, now,  three 737-800s’ in their fleet. All those expenses must really cut it, but it seems like the CEO would plausibly have enough money to do so. I won’t bore you with those details, we’ll be berating their online platform.

     

    Normally, as a new business in 2017, you’d expect to get the attention of consumers and potential customers through the internet where everyone is connected to. We’re heading towards an age where we, developers and designers, need to optimize user experience and visual attractiveness which is practically a part of the marketing mix.

     

    An airline’s website is the focus of potential, modern customers, for example those who navigate business deals domestically and wish to settle a ticket to their destination city as soon as possible but how are they to do that if the first thing they see induces eye cancer?

     

    There’s just so may problems and issues with the website’s User Interface and User Experience that it’s beyond me who they even hired. I’ll point out a few of the many flaws.

     

    Be sure to get your hazmat suit and safety goggles on. What you may see can possible cause seizures, you have been warned. Now that’s out of the way, let’s head to their humble abode over at https://www.sereneair.com/.

    home-page

    The first thing you’d notice is the overuse of box-shadows and border-radius. It honestly feels like their web developer recently discovered it and was excited to use it everywhere.

     

    Going through their content, I realize that it’s got some quality but all that quality is being diminished by that terribly implemented web design. And if only your content had a lossy version of your actual content, the website would’ve looked crisp and nice.

     

    Border radius is the epitome of this website, it’s everywhere. Their website is based on Bootstrap and jQuery. They’ve already loaded a bunch of self-sufficient front-end frameworks yet they fail to utilize it. It’s like buying a sports car as a family car that’s never going to go beyond 40km/h. What’s the point in loading all that if you’re going to slap on your own terrible and immature design choices and not even use the fully optimized core parts?

     

    Allow me to highlight a few of their designer’s terrible life choices.

     

    Their navigation falls and icon usage falls into the category of “WTF”.

    nav

    I can’t tell you much through images, but this navigation is terribly designed and full of visual glitches. This isn’t the surprising part, you’ll find stuff like this littered everywhere on their website.

     

    For example, have a look at their registration page. Usually one would want to make lives easier and implement some social connections using the vast number of libraries available online – for free. Yet one would have to be that stubborn to ignore it and proceed to use their own lines of code to birth a half-assed piece of work.

    form

    Behold, stubborn enough to not use Bootstrap’s vanilla design that would’ve made it look much better. A broken form, with broken components with icon use that doesn’t even make sense. The female icon is used for “Gender”, the statistics icon is used for “City” and Google’s reCaptcha is now called the “Anti-Spam Code:”.

     

    Mind you, this website is certified with an SSL certificate which most likely costs more than or around $50 – yet they fail to hire a proper team that could possibly make them a much better website for the long term.

     

    Looks like an attempt to make circular borders gone wrong.

    footer

    Did you even notice that there’s a subtle hit counter (or whatever that is) at the bottom?

     

    As a web developer, do you notice anything wrong with the HTML? Because I sure do. It’s like a game of spot the mistakes, marking you out of a thousand.

     

    • Doctype and header boilerplates are written and forgotten 2 times
    • No SEO optimizations (come on, it’s simply a few meta tags!)
    • Uses HTML4

    Did I mention the HTML headers were written 2 times?

    html

    Let’s make that more than 4 times. Yes, I don’t even jest. Look at their website’s code and feel the rush of anger and hatred.

     

    They’re even using HTML4 and its depreciated properties like <center>. “How worse could this get?”, you may ask. Well, unfortunately it gets a lot worse and If I were to cover it all, we’d be going on forever.

     

    And for the cherry on the top, here’s something that’s prone to poison your aesthetics. 

    banner

    A horribly coded website, bad design, broken components, no proper file hierarchy organization, no optimization or even SEO. It just makes me wonder why in the world would they do this to themselves. At the very least, as an airline company, just slap on a premium WordPress theme and stop wasting bytes on the internet with something so abhorrent. Just hire some professionals, for your own business’ sake.

     

    With that, Happy Post-Independence week. I’m off to /r/Eyebleach.

    blog user
    Irfan Dahir

    College student living somewhere near the equator who's a coding & design enthusiast.

    Related Posts

    No Related Posts Found