A case study: Redesigning rifatnajmi.com

Role
Designer, Developer
Year
2019

🤯 The Story

My old website was very slow. This is a UX case study to describe it.

GTMetrix score for my old website

As you can see, the score was not something to be proud of. Slow loading time means people are leaving my site before they could see anything on it. Google Analytics also confirms this theory.

Stats before redesign took place.

😱 The Challenge

I built this old WP theme from a premium HTML template and it was using a framework I didn’t know. It was hard for me to tweak the template so I left most of it untouched 👉🏻it led to unnecessary scripts.

It looked pretty, but it was useless 👎🏻

I couldn’t create any UX case study on my old website. I might, but I needed more time to understand the template framework. It was better for me to create one from scratch.

I also had a blog installed on a different subdomain. I didn’t remember why I did that. It was hard for me to maintain two different installs at the same time.


🧐 The Research

First thing first: understand more about the users. Google Analytics comes in handy for doing this. Yes, of course I might need to make assumptions.

Who are they?

Based on the Google Analytics for the last 12 months, almost all of them (92.34%) were within the age range of 18-34. More than half of the visitors (61.5%) were visiting my website on their desktop device. It’s safe to assume that they were visiting my website at work. Where else would you use a PC or laptop?

UX case study: knowing the user from Google Analytics

So, why did they come to my website?

I have two hypotheses: either they were looking for design references (or blog-walking) or they were looking for potential employees. Fun fact: a Google recruiter contacted me asking if my website had the most recent portfolio.

Well, I believe they were recruiters.

What are they (or you) looking for on my website? Since I put UX Designer on the hero section, I assume they were looking for case studies. Sadly, I have none (until now).

Second thing to do is to find out what makes a good UX portfolio.

Fortunately for me, there are a lot of references to learn more about it.

  1. https://www.interaction-design.org/literature/topics/ux-portfolio
  2. https://uxplanet.org/5-storytelling-tips-for-ux-portfolio-review-78217ce1f983
  3. https://www.uxpin.com/studio/blog/creating-ux-portfolio-4-dos-donts/

Based on these, what kind of problem do I need to solve?

Wait.

Let me go back for a while.


🤒 The Problem

So, I have a website showcasing my portfolio (visual portfolio, to be frank). My visitors are mostly recruiters. They didn’t find anything on my website. Also, most of job offers were coming from LinkedIn so this website was useless.

How can I better deliver my thought process to the potential recruiters while also improving my website performances (e.g. page load time)?

Problem Statement

I think that makes a really good problem statement.


🤓 The Process

These are the two problems I need to tackle:

  1. Better deliver my thought process to potential recruiters.
  2. Improving my website performances.

WordPress had just introduced Gutenberg, a built-in page builder from WP itself. I needed to understand how it worked before creating my own theme. I bought a WP theme that fulfilled my needs to study it: Gutenberg-ready and made with Bootstrap. It took me a week before I could make my own Gutenberg-ready theme.

I visited a lot of other designers’ portfolio as well as visiting the references above. It’s good to study from them because I could find the similarity and determine the patterns.

What do they have in common anyway?

  • Clean website, putting the contents first.
  • “Brand” statement on hero of the main page.
  • Well-written profile on the about page.
  • Well-structured case study.

After finding the patterns, I drew the wireframes on Sketch instantly. This kind of website might not need a complex interaction or journey so it was safe to jump-start to wireframe.

These wireframes was then converted to a self-made WP theme. I used Advanced Custom Fields Pro to help me create the Gutenberg blocks. I created a total of 6 custom blocks for my needs.

It took me 2 months, on and off, to finish the theme. I also migrate my hosting to a much better one so it would perform better.

What’s the difference between this and the old one?

Overall looks

The new website emphasize more on the content so I make it look clean.

Navigation

The old one was using hamburger menu for both the desktop and mobile version. Yes, I know it was wrong to have it on desktop.

The new one is using navbar on desktop and tabbar on mobile. PS: The tabbar is still acting weird on Mobile Safari.

Contents

The portfolio was showing all works by defaults and contributed to slow page load time. If I have 1.000 works, and it will load all of them. I decided to put a “view more” button and it will load a new set of works using AJAX.

Blogs are now included rather than having it own website. Why? The recruiters have to read my thoughts! Haha. Putting it on another website would lesser the chance of it being read.


🥳 The Results

This is how my website looks like from 2009 to now.

You can visit the old ones, but I must remind you most of the links are broken:

  1. V1 (2008-2015)
  2. V2 (2017-2019)

Validation

I haven’t validate the first problem but you can help me 😉 by being the first one to offer me a job 😉😉.

I do only have the second one on this UX case study.

I have been monitoring the Google Analytics for the past week to see how well my website performed.

UX case study: improvement on Google Analytics
One week after redesign

Let’s just focus on the Bounce Rate metric. Before the redesign, the Bounce Rate was 72.09%. The redesign able to reduce that number to 37.63%, almost half of it! 🍻

Now we’re going to see it from GTMetrix’s perspective.

UX case study: improvement on GTMetrix
Current GTMetrix score

The page loaded within 2.2 seconds, previously it took 8.7 seconds. I could also reduce the number of request to 38, almost half of it. The performance scores also improved significantly.


👨🏻‍🎓 The Learning

  1. Writing a UX case study needs a dedicated time. I should try to allocate some time to write another UX case study.
  2. Gutenberg is not that scary.
  3. Designers need to get their hands dirty. Most designers I know are not willing to understand the technical stuffs. In my current case, redesigning was not going to solve the problems if I kept using the same hosting provider. Migrating to a new one helps.
  4. Buying themes (WP, HTML, etc) is not the solution. Sometimes it gives me another problem like bloated, unnecessary features.
  5. It’s hard to design for my own self. I had so many ideas and I couldn’t settle for one easily. I wanted to have a better page transition (using barba.js) but it conflicted with many scripts. It took me a while to figure it out before scrapping the feature.