Laptop view, version 3.

Website Design 3

A design so large it took five months to fully complete. A design so ambitious I had to learn SASS just to code it. A design so complex I had to change hosting providers just to publish it.

So what changed in version 3 of my website?

Crossed out different device view, version 2.

The post-mortem

Having started to study UX during the build phase of version 2, its design flaws immediately became clear.

Poor information architecture

All relevant information (about, work, contact) had been compressed into one page. While most portfolio site templates also did this, it wasn’t the best solution the site as there was no clear website structure. It also limited SEO opportunities.

Sustainability

The existing site took too long to edit; partially because each HTML file had to edited every time a change was made, but also because the site’s stylesheets were becoming unmanageable. This would only get worse as site grew.

Irrelevant footer links

Out of four links, only LinkedIn gave users more relevant information about me. The links to my Facebook and Instagram were especially unhelpful, as these accounts weren’t regularly updated.

Badly presented projects

Previous versions of the site copied a summary from a university submission, with a link to the full paper. I hadn’t put in any effort on my part, instead giving the user the tools and expecting them to do what I wanted instead.

Would the casual user download and read a 3000 word essay?

Could these problems be solved? Was it possible to build a scalable and sustainable website that solved the issues of the previous version?

The solution

Different device views, version 3.

So what major changes were made?

Moving to a CMS

By far the biggest change made in version 3 was the move to a content management system (CMS).

TextPattern articles page.
Moving to a CMS also cut site maintenance times, increased security, and made it easier to make design changes.

Most large websites use a CMS. They allow users to quickly create, edit and publish web pages without (in most cases) needing to now how to code; because the CMS automatically generates this. And while I wanted to code as much of my site as possible, I didn’t want to spend days making small changes.

With one main wish for a CMS (clean source code) but no idea what to select, I reached out to the creators of portfolio websites I liked that met this requirement. A recommendation from Jon Hicks (the graphic designer behind the logos for Firefox and MailChimp) led me to choose TextPattern.

Same information, new layout

While the previous version of the site had the information required, it wasn’t set out well. Only two sections existed; the homepage (which included my work, bio and contact information), and pages for each individual project.

While this design was present in many of the example sites and templates that I’d seen, I felt that it would be clearer for the user (and easier to code!), if each section was separated. This change would also make it easier to add new sections as the site expanded.

Site structure, version 2. Site structure, version 3.
The site structure for version 2 on the left, with the revised site structure used in version 3 on the right.

This structure of the website was revised to a more “hierarchical” model with three main sub-sections; “about”, “work” and “contact”. A blog was originally scheduled to be added once enough material had been written, but this was eventually included in version 6 instead.

A more consistent experience

Three variations of the site existed for version 2 (mobile, tablet and laptop/desktop versions). However, the mobile version looked completely different from the tablet and laptop/desktop versions, as the navigation bar was at the top instead of to the left.

Why had I done this? It looked different.

It made no sense for “personal preference” to prevail over logical reasoning.

By changing to a navigation bar that was always at the top, the site now had consistency across all devices. As well as reducing the amount of code, this change meant that only two variations had to be designed – as the site would now look the same on tablets as it did on laptop/desktop screens.

Article view, version 2.
By removing left hand navigation bars, the markup needed to generate this view was no longer needed – making designing and coding page templates quicker going forward.

It also seemed better if the user always knew where they were when they read the URL of the site. Thanks to the new site structure, a “section/title” pattern was adopted; this displayed the name of the section the user was in, before the name of the article that they were reading.

New footer links

With footer links in version 2 not providing more information about me or my work, the majority of the links included in version 1 were reintroduced (Dribbble, GitHub and LinkedIn). A fourth link was still needed though – but what could be included?

Footer links, version 2.
The footer links included in version 2 didn’t give any more information about me or my work, as well as linking to sites that I rarely updated.

The solution for this came from solving a separate problem. While the original plan was for version 3 to include a blog, creating a library of good posts would take time. And getting these to rank well on Google would take even longer.

The answer to that was to include a link to an external blogging site – something that could help with SEO by creating backlinks, but at the same time allowing me to slowly build a comprehensive list of articles. I ended up linking to Medium, one of the biggest online publishing platforms in the world.

Articles in the "Website Design" series

Want to read more?