Post mortem of a failed website
Onwards to the path of enlightenment.
Here goes another boring introduction into a blog post. But where’s the fun in that? A Game of Thrones style intro, however, is another matter. Lucky you, I’m right in the mood for some Game of Thrones.
Now, without further delay, here’s an introduction in the words of Jaqen H’ghar:
A man created a website. A man hopes to attract visitors to a website.
A website failed. A man tried to find out why.
*PS*
If you haven’t watched Game of Thrones, I seriously ask you to reconsider your decision. Trust me, you won’t regret it.
1. Material Design is only for Android, period
Material Design is all the rage right now. Every app on Android is rushing to deploy it. There seems to be a fear right now, that if your Android app isn’t in Material Design, it’ll flop. Heck, even some iOS apps embraced it.
In case you’re a stranger to Material Design, check out this excellent guide by Google. In simple terms, Material Design is a style guide that dictates how certain apps and websites should look and feel. It’s used most prominently in Android apps and websites.
My point is, I myself, was also taken in by this trend. I was overly eager to embrace it. I wanted to explore and implement it in my designs. Then, I made a decision that would severely impede how my work was interpreted — I designed and coded my website/portfolio entirely in Material Design.
This is a mistake that I realized too late. I was so excited at the time to finally be able to create something in Material Design.
Unfortunately, I blindly followed the trend.
At the time, Material Design wasn’t quite suited for websites. There were no Material Design Lite. All I had was a couple of frameworks, and I chose Materialize.
Due to the relatively poor documentation available then, I poorly implemented Material Design on my website. Elements that won’t work with MD were added anyway. As a result, the website feels mismatched. Sure, it was beautiful, but use it longer, and the cracks will start showing up.
Despite the vastly improved documentation on MD websites, I still think that it should only be limited to the Android universe. It should never cross that boundary.
2. It had terrible UX
UX stands for user experience. It’s different from UI, which stands for user interface. While UI centers around the elements of the application itself, UX concentrates on how the user interacts with the app/website. Both are important, but UX is arguably the favorite child.
Unfortunately, my website has terrific UI, but terrible UX. It looks gorgeous, but hard to understand. Users were confused; they didn’t know which were buttons. They interacted with things that aren’t interactive.
Based on the heatmap on the left, quite a number of users clicked on elements that weren’t interactive, such as the word “Aurora”.
Overall, it was a disaster. Most users left after thirty seconds on the website.
3. It was (sort of) responsive
To those who don’t know, “responsiveness” is the ability of a website to adapt to a mobile browser. It’s to improve the website’s readability when viewed on a mobile device.
Anyway, my website was responsive. Sort of. Some elements can adapt to a small browser window, but others, not so much. Some of the text runs off the screen. Images get resized to tiny sizes. Buttons are too small for human fingers.
See what I mean?
It’s a wonder that Google labeled it as “mobile-friendly” when I tested it during the recent Mobilegeddon.
Here’re some even more horrifying example of its “responsiveness”:
4. Slowwwww…zzz…
The most important part of a website is speed, not the UX, and certainly not the UI. Before UX and UI comes in, the website has to load, and there’s where speed plays its part. Remember this: the faster a website loads, the happier the users.
Based on KISSmetrics,
A 1 second delay in page response can result in a 7% reduction in conversions!
The average page load time of a website is 3 seconds. My website took nearly 7 seconds to load. Studies have also shown that page abandonment increased significantly after 4 seconds of waiting.
Obviously, my website wasn’t up to par. God knows how my users I’ve lost because of this. What’s worse is that over two-thirds of users abandoned my site within the first 30 seconds!
However, I do know the causes and solutions of slow page loads and I did try to solve them the best I could. Still, despite the code compression and image optimization, my page load time didn’t improve as I had hoped.
The only thing left to be done is a complete redesign.
5. Incompatibility with other browsers
I’m an avid Safari user. Now, before any of you Chrome, Firefox, or even Opera users start to scream in horror, let me explain. I think that Safari is perfectly fine for day-to-day web browsing. Sure, it lacks some features that others browsers have, but I’m pretty happy with it.
But, NEVER ever test your code only in Safari. I made this mistake, and I deeply regret it.
I don’t know how I managed to live before realizing this mistake, but I did notice it after creating my portfolio. For those who don’t know what I’m talking about, here’s a hint: websites look a lot different when viewed from other browsers. And by a lot, I mean A LOT.
As you can see above, the difference is shocking. What seems to be a rich and beautiful red in Safari is a sickly pale red/orange in Chrome.
Obviously, work needs to be done to solve this problem. And with the issues arising one by one, I decided to scrap this design and just start over.
Conclusion
I know that many people may not like the new design, or hate it even, I know that I made the right choice. I’m glad that I’m realizing and learning from my mistakes.
Now the next step is to work on a new website. The work continues.
