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?
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.
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.
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.
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.
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.
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
- 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