January 2022

juliangoh.me

Built a personal website from scratch

Context

Client

Julian Goh

Key outcomes

Deployed juliangoh.me static site, built a medium for blogging, responsive web design

Project year

2017 - current

juliangoh.me was created as a personal project, commencing in 2017. The website was built from scratch, as an application of the HTML and CSS lessons I had learnt from the Udemy course "Build Responsive Real World Websites with HTML and CSS" by Jonas Schmedtmann.

While I am grateful that this was a tangible by-product of my first foray into front end development and a reminder of an 'aha moment' in realising the power of code in enabling self expression, the site is a good example of poor / non existant design thinking.

The primary intent, as you will see, was to build and deploy functional User Interface elements, as opposed to creating a great user experience.

Page preview

Website prior to 2022 revamp

Landing page
juliangoh.me website landing full page screenshot
'Growing up' highlight page
juliangoh.me website landing full page screenshot
'Engineering my future' highlight page
juliangoh.me website landing full page screenshot
'Engineers Without Borders' highlight page
juliangoh.me website landing full page screenshot
Blog landing page
juliangoh.me website landing full page screenshot
Individual blog post page
juliangoh.me website landing full page screenshot

The process

Landing page

In this original juliangoh.me, there was minimal effort spent on considering User Experience. While it was a great exercise for me in building functional User Interface elements, the site is definitely missing a coherent storyline that ties the elements together into an engaging experience for visitors to the site.

If I were to revamp the site today, I would consolidate most, if not all, of the information used on the landing page into an 'About me' section and instead use it as a 'minimum viable profile' of what juliangoh.me is all about.

The site's primary utility eventually just became the 'Blog landing page' - which was a segment that I created ad-hoc for my own purpose and was not a part of the Udemy course. The intent of this page was first to create a way to archive my writing and then to showcase and distribute this landing page to others.

Again, to much dismay, the focus was on utility to self as opposed to thinking about end user experience.

As evidence of this, in order to not reinvent the wheel and to get to the task of writing as soon as possible, the individual blog post themselves carry the same design language as the each of the previously created 'Growing up', 'Engineering My Future' and 'Engineers Without Borders' pages. There is also a lack of any sort of pagination, search or sort functionalities, features which would probably create a more enjoyable and accessible user experience.

Key takeaways from this project are:

My favourite component of the landing page is the 'Typer' text function which causes the heading on the hero image to appear and disappear. Integration of this feature from a development perspective was very straightforward and it created an element of interest on an otherwise static page.

Site revamp

With design thinking in mind

To create structure, a lean 'human centred design' methodology was followed. The intention here is not to go 'by the book' in design thinking but instead to develop a close connection to the potential end users of the juliangoh.me website throughout the whole process of revamping.

What is the problem you are trying to solve?

I am an experienced process engineer who is aspiring to pivot into the UI / UX space, by bringing together my curiosities in human centred design and front end development. The problem I am trying to solve is to have a portfolio of work to showcase to potential employers / clients who have no idea of who I am or what I am about.

The two primary channels I currently use are LinkedIn and Medium.com. LinkedIn, on its own, is not enough and serves primarily as an 'online resume'. Medium.com, which I currently use to write blogs, is great and built-for-purpose, but there is also more I would like to share about myself than just the blogs.

I had originally built my personal website, juliangoh.me, in 2017 and believe that revamping the site would be the right opportunity to create a space to show my work but also to document this process of re-design.

Empathise - user stories

Screenshot of sticky note brainstorm created on Miro.com

A quick braindump of the desired core functions of the site led to the central question of 'who might the end users be?' Given the information above, the 'professional contacts' and 'blog readers' were obvious as end users but there was also a 'new personal connections' category that emerged from this process.

What if, instead of social media channels, people could best learn about me and my work through the website?

Leading to the problem statements of:

This list is not complete and only scratching the surface, but taking the time to ask such questions opened up the spectrum of perspectives to look at the same problem statement.

Ideate - rapid prototypes

Instead of directly going narrow and jumping into solution mode on Figma, I had decided to go broad by casting a net out into the internet for inspiration. Based on prior experiences, I knew what a basic website could look like - but I was curious about how things could be different. Sticking true to the words of Austin Kleon, I stole like an artist in search of designs out there in the world that aligned with the guiding principles as determined previously.

Guiding principles

Minimal,
memorable,
useful & interesting,
relevant

Some of the portfolio pages that stuck were by the following creators:

Figma sketches / initial wireframes
Screenshot of Figma sketches

The hero image section has a very basic navigation bar, with the brand logo isolated to the top left and 3 navigation links located to the top right - 'portfolio', 'writing' and 'about me'.

The pagination element on the right hand side of the hero image was originally created to occupy the white space and was designed as some sort of image slider to highlight particular articles from the 'writing' section. This element was later discarded within the first initial prototype builds of the hero section, as the introduction and subheading text turned out to be more than enough.

To the left hand side of the hero image, that is an initial draft of a visual 'timeline' to contain the content from the 'writing' section and was intended to have a horizontally scrolling feature that users would immediately access from the hero image - to essentially "scroll back in time".

Again, it was during the first initial prototype builds that this design turned out to be overly complicated, in addition to being non-intuitive to typical user scrolling behaviour. Due to violating the 'minimal' and 'relevant' principles, this design was parked in the meantime.

The remaining of the home page consists of a 'portfolio' and 'about me' showcase segments, intended to be concise while being impactful. To not overload the user with information, but to tempt them to delve deeper.

Screenshot of Figma sketchesScreenshot of Figma sketches

The following images show examples of what the 'writing' page might look like, heavily inspired by the design style on Medium.com as well as a print magazine layout inspired by Standart magazine.

Screenshot of Medium.com profile page

https://medium.com/@julian.goh

Screenshot of image of the inside of a Standart magazine

https://loremnotipsum.com/wp-content/uploads/2020/06/loremnotipsum_standart-magazine_issue19_03.jpg

Screenshot of Figma sketchesScreenshot of Figma sketchesScreenshot of Figma sketches

Prototype / implement

Instead of drafting the designs from scratch using HTML and CSS, I sought out a no-code platform instead. The core rationale being:

During this search, I found Webflow.com and committed to learning the platform through their free '2021 Design Portfolio Course' and built a fully functional portfolio website within 3 days from 30 December 2021 - 1 January 2022.

The course turned out to be incredibly well produced and engaging, including tutorials on a number of sophisticated techniques. I was deeply impressed by how rapid the build process was - there were many moments where I was left thinking to myself, "to build this from scratch would take me.. days."

Starting from 4 January 2022, I started drafting a site based on the Figma wireframes.

The initial conception was a template provided through Webflow. I liked the minimal / monochrome design, and thought that this would be a good baseline to build up from.

Screenshot of base Webflow.com portfolio template

By January 7, the site was built to this design, fully responsive across desktop, tablet and mobile.

The highlights for me include the "Why the pivot?" button link that opens up a Medium article in a new tab and the 'Capabilities' section directly underneath the hero headline.

I believe these elements help to quickly establish the credibility required to backup the first impression created from the headline content. To reinforce this even further, I created the 'Resume' quicklink to be accessible from the 'Capabilities' segment itself.

The 'Portfolio' segment utilises the power of Webflow's Content Management System (CMS) to automatically showcase 3 selected projects while providing users the option of further exploring the rest of the content through the 'Show more' button at the bottom.

The 'Contact me' segment has been removed entirely, with the preferred means of communication through any of the social channels available through the footer.

Note that the monochrome colour palette and lack of a hero image continues as a work in progress.

Screenshot of Webflow landing page (work in progress)

Next, the 'Portfolio' page was designed with a pagination feature that automatically updates with all relevant CMS content.

Screenshot of Webflow Portfolio page (work in progress)

As of 9 January 2022, further work to be continued on building out the 'Writing' and 'About me' pages.

Bicycle icon (from (https://www.flaticon.com/authors/smalllikeart)