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.
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:
Two way experience - a clear 'intent' without a coherent design process can lead to results that are divergent to the end user experience, which is ultimately an undesirable consequence for all parties
Flow matters - without it user interface elements can feel fragmented as opposed to contributors that play into the overall user experience
Testing and gathering feedback - design is not 'finished' once the site is deployed, it is an iterative and continuous process
Go slow before going fast - jumping straight into 'creating' and 'building' can be exhilarating, but is not necessarily productive
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.
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.
Discover
Empathise
Ideate
Prototype / implement
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.
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?
As a potential recruiter / client, I want to learn more about Julian's relevant skills / competencies, so that I can make a decision around hiring him
As a potential new friend, I want to know more about who Julian is so that I can better understand where he is coming from
As a blog reader, I want quick access to Julian's writing so that I can stay up to date
Leading to the problem statements of:
"How might we create a portfolio that is memorable?"
"How might we create a personalised website that is both useful and interesting?"
"How might we create a portal that is relevant and updated?"
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.
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.
Minimal,
memorable,
useful & interesting,
relevant
Some of the portfolio pages that stuck were by the following creators:
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.
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.
Instead of drafting the designs from scratch using HTML and CSS, I sought out a no-code platform instead. The core rationale being:
Switch the focus from development to design - while developing the original juliangoh.me website, my focus had been heavily on 'making things work' rather than 'make things that work'
Speed to Minimum-Viable-Product - building and deploying a portfolio to show others within a short timeframe is a priority
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.
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.
Next, the 'Portfolio' page was designed with a pagination feature that automatically updates with all relevant CMS content.
As of 9 January 2022, further work to be continued on building out the 'Writing' and 'About me' pages.
