Website Design 4

With a “to-do” list that had grown over the last three months through a combination of personal and guerrilla usability tests, I decided to take two weeks to sort the issues version 3 had.

So what changed in version 4 of my site?

The post-mortem

With the switch to a CMS and the introduction of case studies being the major themes of version 3, most issues with the site were related to these issues. They included;

Encyclopedic case studies

The case studies included on the website were an exhaustive list of every step I’d taken in a project. This made them too long, with analytics and tests showing only the most motivated users finishing a post.

Frequent error pages

Due to the large amount of redesigns the site had gone through in the last year, many search engine links now directed to areas that no longer existed.

Inconsistency on very wide screens

Areas of the homepage were coded to take a certain percentage of a screen’s size – which meant that the layout could break on very wide screens, like XL desktops or TVs.

Inconsistent target sizing

Certain buttons, including links on the homepage and in the “related articles” area, were sometimes too small for users to select easily.

The solution

This redesign;

• increased the average time spent reading a project by 60%,
• led to the highest monthly traffic in the history of the site.

But what did I do to achieve this?

Articles written with you in mind

Who visits a personal website?

The question I’d asked while designing version 3 – but the wrong one. Deconstructing this gave a better list of points to examine;

• Why would a user visit a personal website?
• What information are they looking to find?
• What do they want to achieve?
• What are they going to do afterwards?
• How is a user going to find the site?
• How long are they willing to spend on a page?

Talking to designers, department heads and recruiters answered these questions, and identified two main groups of user – the “who & what” in one camp (people who primarily wanted to know who I was, what I’d done and what the results were) with the “how & why” tribe in the other (people who were interested in the design process, my thoughts and the rationale behind my decision making).

Analytics suggested that “who & what” users were the bulk of my audience – but version 3 hadn’t been designed with them in mind.

Case studies in version 3 were a “report-like”, in-depth explanation of the design process in chronological order, with results only being revealed at the end. This was the wrong approach – to fulfill users needs, I needed to make their job easier, which meant making case studies easier to digest. I’d assumed that the user would be motivated enough to read a complete project, but analytics indicated I had an maximum of around 40 seconds.

For readability, every case study in version 4 was shorter than its version 3 equivalent.

Four key changes were made;

• case studies were written in a “story-like” style, with embedded prototypes to engage the user more,
• results were revealed as early as possible, because the main focus of the case studies was the process,
• quotes and image captions were used to show key points and thoughts,
• the language used was kept simple, to build trust.

Redesigned homepage

I’d realised after release that the layout could sometimes break on very wide screens. With over two-thirds of visitors to the site using desktops however, this was a problem that needed to be immediately addressed.

To achieve consistency across all desktop devices, the height of each project link (previously a percentage of screen size), wasn’t set. Instead, this height would vary depending on the amount of content inside.

Having seen various users click outside the linked area during guerrilla usability tests, the entire project was now made clickable (instead of having to press a button). To further signify a link, the entire project grew larger by 10% when hovered over on desktop screens – with this clearly noticeable change designed to immediately catch the user’s attention.

While this feedback loop was used across the desktop version of the site, classic signifiers (e.g. underlining to indicate links) were used for the mobile version.

Redesigned “related articles” area

There’s a rule in UX called Fitts’ Law; it basically says the longer the distance to and smaller the size of a “target”, such as a button, the longer it takes to select it. With buttons on the smallest screens only having a height of 40px (the recommended absolute minimum), and having seen users sometimes struggle, a redesign made sense.

Two existing designs were merged together to achieve this; the card style previously used for some lists, and hover styling now present on links on the homepage. With underlining only used to represent links on the site, it was appropriate to remove the hover styles for mobile devices.

By reusing certain design patterns across the site, interface consistency began to appear.

URL redirection

The large amounts of redesigns in the past year had wreaked havoc with search engine results. With articles constantly being moved between different sections of the site, a way to always end up at the correct destination was needed.

The answer was to predict which URLs could produce error screens, and redirect these to a live article. Three cases were found;

• links from search engines
• articles that were renamed
• articles that were moved to a different section

By performing a quick SEO audit on the site, I was able to identify the “dead” links and redirect them to live articles. The same was done with every URL that had been assigned to an article in the past.

Anticipating mistakes meant I could design solutions that prevented the problem from occurring in the first place.

New sections

Running a heuristic evaluation flagged a key problem – error pages didn’t suggest a solution to a user’s problem.

To fix this, a link to a newly created archive section (which contained every article that was live on the site) was given. This was a halfway fix however, as a search bar would have been more effective at pointing the user to what they were looking for.

This, along with other features such as a blog, will be included in a future version of the site.

Articles in the "Website Design" series

• Previous site designs
• Website Design 1: The First One
• Website Design 2: The One That Fixed The First One
• Website Design 3: The One That Moved To A CMS
• Website Design 4: The One That Did User Research
• Website Design 5: The One That Defined The Article Reading Experience
• Website Design 6: The One That Got Showcased By Fixing The UI