Laptop view, version 5.

Website Design 5

Brief, but detailed. Scannable, but informative. Visually striking, but not overly so. The joys of creating a UX portfolio.

Version 5 focused almost exclusively on the users’ reading experience – introducing features that set this site apart from the hundreds of portfolios I’d visited since 2017. Experimenting with the UI also laid the groundwork for the acclaimed version 6 – which led to this site being one of only nine showcased by TextPattern CMS.

So what changed?

Crossed out different device view, version 4.

The post-mortem

Feedback on version 4 focused mainly on the quality of the work displayed, with various users commenting on how informative my case studies were. In line with this, analytics suggested that in the time version 4 had been live, “how & why” users had become the majority visitor group (see note).

Short case studies couldn’t have done justice to the breadth and depth of research, design consideration and decision making present in each project.

On the other hand, the main issue that I found was that the design still wasn’t fully serving the “who & what” user (see note), as they weren’t able to quickly get the information they wanted. While the previous version aimed to reveal the results of a project as soon as possible, this assumed that these visitors would read the case study.

This assumption was wrong. Rather than read, these users actually wanted to be able to scan a case study and understand what had been done.

NOTE: Version 4 introduced two main groups of case study readers – the “what & who” (people who primarily wanted to know who I was, what I’d done and what the results were), and the “how & why” (people who were interested in the design process, my thoughts and the rationale behind my decision making).

The solution

Devices, version 5.

Statistically, this design reduced the homepage bounce rate to 34% – down from nearly 80%.

But how did I get to this?

Article preview menus

The biggest change version 5 made (and the most important since the move to a CMS) was the introduction of the feature you’ll hopefully see on the left – the article preview menu.

This menu was designed to allow users to quickly skip to areas of a case study that interested them. It was also meant to give an overview of the steps I had taken to complete a project – hopefully making it easier for the “who & what” user to scan them.

But while I knew that a hyperlinked contents menu of some sort was needed for navigating, how this could be done wasn’t. For example, the solution couldn’t be a permanently fixed menu, as it would have thrown out the layout of the site.

Luckily, a chance observation while on the BBC website showed me the solution – a “sticky” menu.

Contents menu, Wikipedia. Sticky menu, BBC.
Two inspirations for the article preview menu; the contents list in a Wikipedia entry, and the sticky menu in a BBC live article. Sticky menus work by scrolling normally until they reach a pre-determined point on the screen – when they “stick” (see note).

The original plan was for all devices to have this feature – however, limits on screen space meant that this was impossible to carry out. Design focus therefore switched to what screen sizes would get it.

Site analytics were used to reveal the device resolutions of visitors, with 50% using one of three standard screen sizes.

While the website data revealed many interesting things (like 24% of visitors used a 1024×768 display), the key takeaway was that 65% of all visits came from users with screens wider than 1280px. This, and experimenting with the display of the menu, led me to pick 1330px as the minimum screen width that the article contents menu would display at.

NOTE: Internet Explorer doesn't support sticky menus, even though 98% of browsers do. Therefore, users on that browser (approx. 2% as of Jan 2019) will see a menu that scrolls normally with the page.

Smooth scrolling

With the introduction of article preview menus, greater importance needed to be given to the switch between different areas of a case study – known as “scroll behaviour”.

While the default action was to “jump” to a new portion of the page, this happened instantaneously – running the risk of users missing the change as it happened too quickly for them to register. The solution was “smooth scrolling”, a design pattern already commonly used on modern websites.

Smooth scrolling replaced instant jumping – with the aim to grab the users attention by animating the transition to a different area within an article.
Scroll behavior compatibility.
Yet again, browser compatibility made the solution more complicated than it should have been. The “scroll-behavior” CSS property could have achieved my goal, but it wasn’t supported by browsers responsible for nearly 25% of the traffic to this website.

Custom jQuery was used create the smooth scrolling effect, but also to combat the browser compatibility issue. This was also kept separate from the scripts I’d previously written, to make adding/removing the effect for specific pages simple.

Saying this, while smooth scrolling was initially exclusive to published articles, the need for interaction consistency meant it was quickly set as default across the entire site.

A UI to inspire confidence

Of course, any new version of this website isn’t complete with the obligatory redesign of the homepage!

Getting the design of this page right was critical, as this was where first impressions of me were set. However, a bounce rate of 78% (Nov 2018) suggested that the majority of users who landed on my homepage immediately left – a number that suggested room for “significant improvement”.

Previous homepage designs didn’t make users feel confident in my abilities as a designer.

The aim of the redesign was to leave a positive first interaction with my “brand” on users. To do this, I placed a larger emphasis on the imagery used on the homepage, trying to use what was already present in articles – with the hope that a “striking” look could make users feel more confident in my abilities as a designer.

Home, version 4. Home, version 5.
To make text legible, a semi-transparent gradient layer (or “scrim”) was used on images. The redesign seemed to be successful, with the bounce rate for January 2019 lowered to an outstanding 33.9%.

A new signifier to represent links was also created, with underlines replaced by arrows pointing to the right. As links encourage the user to progress, something that was familiar to most people was used to indicate this – the forward icon.

Articles in the "Website Design" series

Want to read more?