Laptop view, version 6.

Website Design 6

This was the big one.

After over a year of iteration, applying my UX, UI, web development, information architecture and SEO knowledge, maximising the capabilities of my CMS and sorting issues on my to-do list, version 6 was born.

Hopefully, it’s here to stay.

Crossed out different device view, version 5.

The post-mortem

With version 5 focused almost exclusively on improving the reading experience, version 6 aimed to take a more general look at any issues still lingering with the design. It found two major ones;

SEO audit, before improvements.

Poor SEO potential

Code that wasn’t optimised for SEO, as well as a low level of backlinks from other sources, meant that the site was rated D for SEO.

Archive, version 5.

Unattractive landing pages

Landing pages for sections (like “work”) used the same template as the archive pages – showing users a relatively unattractive design.

The solution

Devices, version 6.

This design;

  • increased the SEO grade of this site to a B,
  • was one of only nine websites (as of Feb 2019) to be featured on the site showcase of TextPattern CMS.

So what changed?

Redesigned section landing pages

With plans to introduce the long awaited blog as part of a backlink building strategy, section landing pages became more important. As a larger proportion of traffic would be redirected to sections instead of the homepage, how these pages looked was critical for users (see note).

Sub-sections weren’t supported by my CMS, making plans for sections to link to a complete archive of its posts a major issue. While a general archive was introduced in version 4, this showed posts from every section on the site. And not being able to find a website using the same CMS doing what I required made me question if a solution was even possible.

How could archives for individual sections be created without using sub-sections?
Archive, version 5. Landing page, version 6.
Content on section landing pages was divided into two areas in version 6 (on the right); “featured”, which showed the three most recent posts to the section, and “more”, which showed the rest of the posts included in the section (limited to six per page).

The fix came by going in the opposite direction, by making the entire section an archive of the posts within it.

By doing this, and introducing pagination to the list of posts, an acceptable archive was created. As well as being the correct design pattern for the content provided, pagination also allowed me to add a conditional statement to the code.

This stated that if the user was on the first page of results, the landing page template should be shown – with the template for section archives to be shown in all other cases.

NOTE: Bounce rates (the percentage of users who only viewed one page on the site) were reduced by over half on pages with an attractive UI, something I discovered in version 5.

A UI overhaul

Redesigned section landing pages were part of a larger UI overhaul of the site. Having started to use WordPress, and taking inspiration from its template hierarchy, designs were created for the eight main types of page in use;

  • archive (used for general archives),
  • article (used for articles),
  • error (used for error pages),
  • index (used on the homepage),
  • landing (used for section landing pages),
  • list (used for search results),
  • posts (used for section archives),
  • single (used for sections without articles, like about).
Home, version 6. Landing page, version 6. Post page template, version 6. Archive, version 6. List page template, version 6. Error, version 6.
Only the templates for articles and single pages were left untouched (due to the previous version focusing on the article template design, and single pages being a “lite” version of this), with the rest being redesigned for version 6.

UI inspirations for this version came from many places, including older iterations of this site. For example, the hero design on the homepage (reintroduced for SEO keyword and code purposes) was pretty much the same as version 3 – only with better background imagery.

Thankfully, the feedback for the redesign has been overwhelmingly positive. Because of this, it’s highly likely that I won’t be making any major changes to the UI for the foreseeable future.

New sections

Version 6 introduced two new sections – one of which was this website’s long planned blog (see note).

Site structure, versions 4 and 5. Site structure, version 6.
Site structure in versions 4 & 5, compared to the initial site structure for version 6. Testing is the only part of the site that hasn’t been designed for users, but rather for me to test new features – meaning it’s also the only one that won’t be indexed by Google.

The introduction of a blog had a direct impact on the design of the new homepage. With previous versions only showing portfolio work, the new design needed to combine the articles in both sections going forwards.

The decision made was to show the three most recently published articles on the homepage. This allowed content from different sections to co-exist and promoted my recent posts, while at the same time improving SEO through a combination of keyword/code optimisation and regular updates.

As the existing SEO was relatively poor, I also took the opportunity to officially rename the portfolio section (from work, where URLs prior to version 6 still pointed), as well as calling the blog a “journal”.

NOTE: The journal is live - but a link will only be placed in the header once I've published at least five articles, as it looks a bit bare otherwise...

Still to come…

There’s still more!

Features that are still in development for this version include introducing a tagging system and social sharing for articles, as well as search boxes for the error page and header.

I’m also looking to move from opening an external mail client to embedding a contact form in the footer. This is still being worked on – but I want to address accessibility issues, as well as introducing instant error reporting before making releasing this.

Articles in the "Website Design" series

Want to read more?