NM

For the 6th iteration of my personal website, I had a pretty clear vision for what I wanted this site to achieve. The quantitative and qualitative research from the prior sites were used to construct a clear requirements list. Since launching this iteration in 2017, I have continued to make incremental improvements to better serve visitors and my business needs.

CompanyPersonal Project
PlatformWeb
RoleUX/UI Designer
Front-End Developer
ToolsFigma
Zeplin
VS Code
Jira
Git

Problem

Nick is a busy design professional who needs a reliable and feature rich portfolio because his content publishing needs are always changing.

Research

Back in 2012 I jumped into web design with my first online portfolio (1.0) using Google Sites. It was pretty simple and helped land my first Graphic Design internship. The following year I got hooked on blogging and content creation with Blogger. From there I started learning more about SEO and utilizing analytics data to inform decision making.

With the subsequent evolutions of my portfolio site, I consistently noticed in the data that most visitors only stopped by to checkout who I was and leave. Engagement was pretty low and the site would sit idle most of the time. This had me thinking about other ways to bring organic traffic to drive more engagement. I knew from my time as a content blogger that well written, relevant content can bring in great organic search traffic. With competition for the first page of Google for “Nick Murphy” at an all time high, the blog was a great strategy to boost the site’s search ranking.

The previous iteration (5.0) was a fully custom portfolio site that had bespoke case studies complete with animations. While this site provided a unique storytelling experience, and an Awwwards award, it was time-consuming to update and maintain. I knew this current iteration would need to have a timeless design and well constructed theme to free my time for other projects.

Requirements

Based on research, the following product requirements were set:

  1. Custom theming
  2. Timeless design, allowing content to take center stage
  3. Blogging capabilities
  4. Mature CMS platform

With these requirements in mind, I analyzed CMS platforms for the next iteration. Below is a comparison of the final 3:

CMSKirbyGhostWordPress
Maturity (Years)5313
TypeFlat FileDatabaseDatabase
Custom Theming
Content Pages
Blogging
Self Hosting
Managed Hosting
– Circa 2016

Kirby interest me for how lightweight and simple it was. Being a flat file CMS there were fewer security concerns. Ghost was the new CMS on the block at the time with their 1.0 getting ready for release. I really liked this CMS for the straightforward interface and progressive architecture. WordPress being an established platform with in detail documentation was the strongest candidate. In the interest of not risking the build on a new or experimental platform, I choose WordPress.

Prior Iterations

The new site design was informed by prior iterations of this site. Below are screenshots showing the evolution of the homepage from 2012 to 2016.

Design

Naturally the site branding is an extension of my personal identity, utilizing a grey scale color pallet with a vibrant green for primary actions. Typography is set in Helvetica Neue, supplied by Linotype. Each page was responsively designed to scale beautifully between device types.

This current iteration (6.0) was originally designed in Sketch. Making use of symbols to reuse elements. I have started the process of converting the Sketch file into a Figma file with components. Utilizing Zeplin to export from Figma has really helped with implementation speed.

Engineering

WordPress has great open source support and I was able to use the barebones s_theme as a starting point for development. Setting up a local dev environment to build and test the theme locally before deployment. Since launching in 2017, I have continued to iterate on this theme to deliver a better experience. Below are Google Lighthouse performance metrics for desktop:

July 2019October 2021December 2021Delta
Performance91%90%99%9%
Accessibility62%79%79%17%
Best Practices86%100%100%14%
SEO92%83%83%-9%
NotesBaselineServer and content styling updatesMigrated from self hosting to managed hosting
– Google Lighthouse metrics at update milestones

Results

Through the year 2021, the current iteration of the site has delivered the follow averages in relation to the prior iteration:

+0:56

Time On Page

+0:18

Session Duration

-9.56%

Bounce Rate

Thoughts

Designing and developing this site has been a great platform for learning new tools and technologies. The WordPress platform has continued to meet my needs and their team has delivered some great product updates. Particularly with the content block editor that has made case studies like this a breeze to build out.

Looking forward I am continuing to update the theme for WordPress’ platform updates. To improve the Accessibility score and speed up development, I am starting to build a design system for the site. How this will be implemented in code is still a work in progress.