Redesigning an existing website

This article represents my own opinions.

This writing is mostly for me to organize my thoughts before I just jump into working on this project and making sure I build something that I don’t feel ashamed to share. I will continuously update this as this project progresses.

At first, I need to think about reasons to redesign.

  • It looks outdated and not very user friendly
  • This site is getting to the point that everything is so messy(files and data in DB) which makes it almost impossible to make small changes
  • No one actually knows what’s going on with a site
  • There are always room for improvement ;)

Beside improving visual attraction and user experience, I noticed that we really need a better system to maintain the site. Since this site was built many years ago and multiple people have worked on it without having a proper development environment, things got very messy and hitting the point when nobody wants to work on it because unpredictable result on changes you will make.

I want to list out the goals we want to achieve on new design.

Of course, the ultimate goal is to have better performance(Better conversion rate in our case) and these are the list of things I think we should do to achieve that goal.

  • Visual improvement to give better impression to users to engage with site’s features and content
  • Improve usability and accessibility to make it easy for users to accomplish tasks and find information they need
  • I also want to make sure the new design will be implemented on the proper system that is scalable and easy to maintain.

How am I going to work on this?

I need to go through the data and figure out what works and what does not work and improve design base on that and of course lot of researches.

  • Wireframe and design
  • Covert it to HTML pages
  • Adapt it with DB and technologies we are going to use

Here is the home page of existing site.

Existing home page

One of the biggest challenge was to getting a wireframe and located the content as we want to present to get the better conversion. Since we don’t have a dedicated user experience researcher, I had to work with limited data we have on the existing site.

My main focus on new design was making sure it gives good first impression to people to make them engage with content. I noticed about 9% of people interact with the map on the top of the page and half of them were returned to the map after scanning through the entire page(Latest 30 days of data from Inspectlet). It tells me that we need something that can attract people and make them to engage with content or features on the site by first sight.

I also wanted to make sure I implement better usage of white space that will make it easy to read and find information people look for.

As you can see, existing site design is heavily based on text. In order for me to give it a new attractive modern look, this has to loose some weights. I cut down lots of text from the page and only kept the space for ones that we really need. That only contains information that people will look for and make it easier them to scanning through the page.

Although, I removed lots of text from the existing home page, I made sure new design has links to access all those content we had.

The content of the new design is not reviewed by content guy but here is my first design draft.

New home page design mock up

Personally don’t believe that there are absolute rules on visual design but I can definitely utilize some data from previous A/B tests that showed the one worked better than the others.

I decided to implement lead-in form in the main banner area with strong copywriting and attractive image and most importantly making sure they all work together. Users will have to select the year of the vehicle and that will take them to the page has a rest of the form. In our experience with this specific form, it worked better than having an entire form on the main page.

I also reorganized content in a new layout with better white spaces that will make the entire page easy to scan and find information.

Sub pages (Yes, it is a sub page)

Existing website actually just have one layout for all sub pages and the home page. All other pages just look like below page regardless of what content it has or what features it offer.

It really needs some customization depends of the content or features of the page. I ended up one more layout to the new site design that can be used on the page that we want people to focus on one thing.

New sub page designs(App page and two content pages)
Mobile version mockup

I kept the existing layout(one in the middle) that actually performs well on most of sub pages but added one more layout to serve application page and the page with content that we really want people to read.

We had data that shows better performing on one column layout with clickable form so I didn’t really have to heritage much to make this decision to implement that. Below is the comparison between existing site’s application page and one column with clickable form page. You can see the bounce rate went down 25.57% and conversion rate went up 69.07%.

Since our main goal is to get the app converted, I wanted to make sure that people always find an way to engage with application wherever they are on the site. However on application page, I removed all other thing that does not help people to fill out the app.

After getting design mock ups for all pages, I put all them into Invision to present. Using Invision allows me to present design mock up more effectively then just sending out image files and trying to explain how everything works.

It seems like I will have to come up with another article about how am I going to implement this new design on a better system. If I don’t get too lazy :)

As I mentioned before, I wrote this entirely on my perspective. Please feel free to share your thoughts and make comments. So we can all be a better designer ;)