Dear Maybank: This is what your new website should look like, and why

After 3 months Maybank secretly launched their newly designed website, it is still not launch completely. I’m super frustrated because I use Maybank2u a lot, and I’m really ashamed that one of Malaysia’s biggest banking service provider is destroying its image on the web. Read about the launching disaster from V.Kugantharan’s blog and Danny Foo.

As a proud Malaysian web designer and developer, I’ve decided to redesign Maybank2u.com.my and hopefully my voice will be heard.

Why the new design is still failing

1. Speed

It’s toooooooooooooo slow.

Please please please remove that page-fade-in animation. It’s killing me. We want to get our stuff done quickly online. Not to sit there and stare at the gray background till the animation fades in. This fading is the biggest mistake of this redesign. To whoever in the Maybank web team that still decided to keep this fading animation, you are missing out something incredible; the illusion of speed. In short, it’s actually better to show users how the page is loading second by second and trick the user’s perception that the page is actually working and keep the user busy.

Some time back, Marrissa Mayer of Google said that an additional delay of 0.5 seconds to page load time caused a 20% drop in traffic. You do the math. Also, Matt Cutts of Google Search Team said that faster website got better SEO ranking. So, put ‘speed’ on top of your to-do list. Check out how this bunch of crazy folks spent a week making their project load extremely fast.

Furthermore, the new design should really go through an optimization round. Combining and minifying 10 stylesheets and 22 javascripts. Replacing the 13 images on the footer into a single image sprite will help a little too.

Tips: CSS shadows jammed up lower cpu machine or device while scrolling.

2. Design

Horizontal scrolling ftw! Oh, wait, it’s not even working on my mouse scroll. Wtf. Getting inspiration from the new Myspace is good, but at least make it scrollable. Not all users are using portable devices. Putting bet on touch-control alone is risky. Plus, you have iPhone, iPad, Android and Windows Phone app. You just only need a mobile web app.

Then comes the mega gigantic universal blackhole dropdown navigation. When I click the dropdown, I’m like ‘WOW’, this is shit. So bad I got lost instantly. Just like the mega gigantic universal blackhole that sucking me into the unknown world. And again, no mouse scroll to the right section. Also, please speed up the slide down animation on this poor dropdown.

But, you know, the design is actually good. I love the colors and boxes. Ok, I lied. Doh. The first time I see the new design, I love the fresh look, then it rots so fast that it can set a brand new category of world record for ‘fastest rotting website’. Hey, congratulation in advance. The rotting reason is that, the overall experience is just terribly terrible.

To be honest thou, I do like the big reading font size. And respect the Maybank web team’s bravery for taking on a complete overhaul redesign challenge.

3. Trust

The new design launched so sudden, I fell off from my chair. Erm… I hope that’s funny. Well, not really funny now.

People saved their hard earned money in Maybank, using Maybank2u to perform their banking activities. What would you think those people’s reaction when one day, the whole website is different? Will they key in their credentials? Something to think about. To make it worst, the server went roller coaster on launching day. That double up people’s insecurity towards Maybank2u. Oops, someone forgot to do server stress test.

On the design wise, it is important for a banking website to have maximum clarity. A sense of clean, secure and transparent design is crucial. The use of box-shadows, text-shadows, gradients and contrast have to be carefully crafted. To achieve clarity, remove most of the shadows. Gradients are fine, but keep it minimum and subtle. Contrast between reading text and background need to be on a clear cut. With what the new design have now, it got too much hey hey hey. Sorry, I mean blurred lines.

Trust is a hard earned relationship. Don’t take it lightly.

With all these barriers, it’s unlikely the new design will be completely replace the existing website. And please do not force it. It will only make it worst.

Keep it real

Yes. Maybank is a bank. Bank’s user target group is anyone with money. That’s a hugemongous group with all sort of demographic.

So, how do we design a website that basically serves everyone?

We keep it real.
Real simple.
Real intuitive.
Real direct web architecture.

Here’s how to keep it simple.

From top to bottom, it has to be comfortable and requires little learning curve. You must be saying now, “That’s easy. We are too awesome to be build such low creativity website. We want to build the next frontier of online banking experience”. Bah, I hope that’s not what you really thinking now or else I’ll Chuck Norris roundhouse kick your brain out to the Milky Way.

Here’s an example. Do you think Apple iMac is simple? It is. It is dead simple. But it’s dead hard to built such brilliant masterpiece. They solved many of my PC problems and Maybank should focus on this point of view, solving people’s problem. Not go all creative on navigating using touch-control. Think about how to reduce user clicks in performing certain tasks. I had a great experience talking to Maybank customer service. Use those care and put it in the new website. Put more creativity into these and people will gradually gain trust in online banking through Maybank2u. Keep real customer’s experience in mind.

I might get the user target group wrongly. Undoubtedly, Maybank got website analytics and I’m open for discussion.

Responsive design

This deserves a section by itself, because I don’t get it.

If I’m not guessing wrongly, this new design took 3 years plus to finish. (It’s written 2001-11 in your footer). 3 years ago, tablet is getting it’s spotlight and everyone is getting it. The web world picked up too. Responsive design was introduced and it was cool to have website built that way. 3 years after, now, websites are expected to be tablet supported and you will be Lord Voldemort if you don’t support it. So the new Maybank website has it and it’s cool. What I don’t get it is that, the new design seems to focus way too much on tablet and mobile rather than desktop.

After much digging into the new design codings, I thought it has a better experience on tablet or mobile. I was wrong. It is the same unsatisfactory I had with the desktop version. The fading really kills it. I often get nothing but the gray background. And scrolling the new website on my iPad 2 is frightful. Luckily my quad core phone is a smooth sailing but not everyone is lucky to have it.

So, I honestly think that the new website got the responsive design unfitting.

My secret ingredient for Maybank new design

Experience trap.

Build an amazing, trust worthy, conformable and fast website. Show to users that you have thought everything for their best benefits and guide them throughout the whole process. When all these established, the experience trap kicks in. Users will feel that they are being taken care of and will continue using it. And when they start using other banking website, where it doesn’t perform the same level of awesomeness as you do, you won and you got yourself a user trapped. They’ll keep coming back for more. Why would so many iPhone users don’t even want to try other phone, and some even go extreme to change their PC to Mac?

This is experience trap. Use it, and claim back that Bank of the Year award from AmBank.

Why am I doing this

I’m here to help.

For the past 5 years working in the web design industry, I’m proud to say that I have became a better web designer and developer under a bunch of inspiring mentors. And now, giving out all I can to show to the world that, we, Malaysians, can design kickass websites. And it’s sad to see that my favourite local bank self destructed with their new website design.

A designer, Shaza Hakim of Stampede Design has a creative burst week and redesigned Maybank2u back in May 2013. I actually like the account overview screen but might want to tone down the ‘current balance’. I don’t want my colleagues to see my pathetic balance while passing by my workplace. =(

So, without further ado, my Maybank2u.com.my redesign.

Homepage
Full size 2.3MB