I’ve just moved to the beautiful city of Utrecht in Holland. It feels medieval, in a cute small-town way. The idyllic cobblestone streets compliment the weaving canals. The people who call this town home are mostly students, all of which are extremely tall and jacked up on spreadable cheese & horse meat sausages. Maybe If I take on this diet I'll grow past a mere 172cm.

I've lived abroad multiple times, twice in Canada and once in New Zealand. Both times I took holiday work. Jobs in hospitality or cinemas. This time though things are different. I'm here for my career (not to say fun is banned though). It's important to take big leaps of faith in your youth before you're tied down by pets and assets.

Without a long term work visa and no dutch language skills I knew things would be a little harder than back home in my comfort zone. I like to look at it as a healthy challenge - time to grow!

After some unsuccessful job hunting for a month, I realised I needed to up my game. If I wanted the next dream job I had to make it very obvious I was the best.

I've been at the other end of the job interview process too, I can empathise with HR staff. They look at experience on paper and ask superficial questions. It's hard to know someone's skills before you work alongside them.

So I decided to make the world's best online portfolio, designed to make HR staff fall in love with me.

It needed to exhibit me in a sophisticated way. Communicate my achievements and offer an overview of my experiences. Even after I find a job I should be giving my projects the best chance of success, may as well start my Ellion Musk global domination…

With this blog post, I’m going to walk you through my creative process for creating the world’s best portfolio website. If you’ve stumbled across this page, and you’re thinking of doing the same thing you’re in the right place! just don’t go stealing my future jobs from me ok?

The first thing I did was an empathy map, those of you familiar with design thinking will know what I’m talking about. It’s a great way to figure out the most fucking blatantly obvious things you should have already known. This tool helps greatly to get inside the head of HR staff.

From this I realised a few things; HR staff basically just write ads, view candidates and pitch these candidates to management. They are under pressure from management to find and exhibit the best talent in the best light possible. So they need to write good ads, have them found by the best talent, and have assets to share with management that prove they’re the best. They already have my CV, which I could essentially write anything I like on, but it doesn’t mean I know what i’m talkin about. I realised that If I could have case studies that were on the exact topics they’re hiring for that would surely make their lives easier.

Next, I needed a project charter, to more clearly identify the vision of the world’s best portfolio website. A project charter is a high-level document that outlines the mission, vision and success criteria of a project. This process helps me to hone in on the key aspects that define value for users, in this case, that’s HR staff.

From this, I learned that highlighting my hands-on experience to HR staff is the most important aspect of the site.. Explaining what qualifications you have is simple but the challenge is conveying your experience because it’s not binary. You either have a qualification or you don’t, but when it comes to aptitude, it’s a spectrum and it’s hard for HR staff to know where you sit on that spectrum.

I realised the site also won't actually have my CV found on it, it's designed to be a CV itself. Given the only places I'll be linking to the site from are my cover letter and CV, there's no need to make this available.

Also the specification includes some risk factors, here's one I was particularly worried about; “I may not make the deadline because my girlfriend’s birthday party on Saturday that may leave me gravely hungover and trapped in a fast food & Netflix bed spiral.”.

By this stage, I knew how I was going to map the content across the site, and in turn the pages I’d need. I could finally work on the site specification & Wireframes. The specification is typically a document the designers and developers work closely together on. It outlines the pages of the site and each section of each page. Also the technical requirements of the site in terms of end-user functionality and not necessarily specific technologies. Most importantly it states the user flow for the application, which is referenced to the Wireframes and/or UI mockups. Building this document with technical staff (if you need that) will result in you knowing what the final stack might look like. This is done in conjunction with researching technology and project constraints.

So I started looking around and learning what was out there. My initial thought was medium could be a good place to start. It’s simple and has an active community. But thinking back to the mission of the site it didn’t quite fit the bill.

I wanted to make sure the site was fast and responsive. It needs to be sophisticated, clean and fast. After researching more and more I look at other major blogging platforms. Here is what I found:

wordpress.com, wordpress.org, wix, Squarespace - SLOW. I wanted to flex my webmaster muscle, I'm looking for a job in tech, so I need to show I can solve new problems with new technology and exhibit the benefits of doing so. A slow site is widely known to be a bad idea, for most use cases anyway.

After some analysis, I decided to go with the relatively new AMP HTML framework. It's pretty unconventional, it goes against the Javascript everything movement. But I wanted to learn more and I wanted to see what it takes to achieve a score of 100 on Google PageSpeed Insights. It's different from my last project completely, you can’t write your own Javascript with AMP, but they give you loads of boilerplate components that you can style to your liking. Plus there was plenty of starting templates for websites that would save me time.

By the way, speed really does matter.

"BBC has seen that they lose an additional 10% of users for every additional second it takes for their site to load"

- according to WPO stats.

For you techies out there, AMP is a framework that loads boilerplate JS asynchronoulsly, removing it from the critical path. It also only loads images in the viewport with its special img tag. Also, all CSS must be embedded in the HTML document, no calling external style sheets.

Take a look at my wireframes here.

I found a template I liked! It's called Lune over at amp.dev. So I used Chrome’s inspect element to change the html of the theme I was interested in then took screenshots.

With these screenshots as a base, I could easily change the look and feel until I was happy in figma.

Excuse the Australian Lorem Ipsum called “bogan Ipsum”. Couldn’t resist.

By this point I had everything scoped and designed it was time to organise my week! Not sure why, but this is my favorite step. I would need to be well organised if I was going to get this done in under a week so I could continue applying for jobs.

Here was my team from left to right; Frontend Developer - Elliot Chapple, High Five Specialist - Elliot Chapple, QA - Elliot Chapple, Marketer - Elliot Chapple & project manager - Elliot Chapple.

Personally, I like Airtable for Agile planning. It’s not too bulky yet still very flexible! It's at least good for missions without bigger teams needing to collaborate.

First I went through and made a backlog of all the tasks i’d done to date (basically just all the previous steps in this post), compiled them into a sprint (which was actually 3 full days of work) then assigned each of these story points. I use the Fibonacci sequence to size tasks. I find it best for managing risk. This is because bigger user stories are often less similar to each other in size, compared to smaller user stories, purely because bigger tasks have more risks and unknowns. So I assigned each task either 1, 2, 3, 5, 8, 13 or 21.

Next, I went through my specification document and created a set of user stories to take the project to completion. Next, I found a user story that I thought would be a “medium” sized story, and I gave it a score of 8 points. I then used paired comparison to work through all the other stories giving the story the same scores; 1, 2, 3, 5, 8, 13 or 21 in reference to this “medium” sized task. If they were probably bigger than 21 points, I would disaggregate them and break it into multiple smaller stories.

Looking at the past sprint I’d completed 49 story points over 3 days. My goal was to have the site finished by Friday midday, which at the time of writing this is 4 1/2 days away… at a velocity of 16 points per day, I could complete 72 story points, but the sprint backlog was 92 points.… So I had to make some choices, It was time to prioritise the sprint backlog. The two factors to consider when prioritising any backlog are risk and value, with “risk” being uncertainty & “value” being what the user of the site would experience as making their life better. When it comes to risk, I didn’t have experience with the AMP framework, which I outlined in my project charter as well. So the goal is to tackle these stories early in the project. Next, I moved the tasks that were for HR personas higher in the list.

Now I had my prioritised backlog I could move the user stories back into the product backlog that I didn’t think I could complete. I made a call early with this process, that I would have to forego a CMS to get this up by Friday. This meant I’d have to manually set up new pages, but with a goal to have only a handful of posts to launch with it was ok. Now, I was left with 76 story points for my sprint… I decided it was doable! A little above the 72 I was aiming for but missing the deadline had no real-world consequences.

The last thing I did was make a Kanban view in Airtable. This was going to be my main working view. Meaning my flavor of Agile for this project is ScrumBan

Sometimes it felt like going back to the dark ages.. An almost basic html multi-page application with no hopes of writing my own custom javascript. At least CSS has come a really long way in the last 5 years. Also luckily AMP offers probably just enough boilerplate components to keep me happy; modal lightboxes, social sharers, sidebar menus, analytics plugins, carousels, google sheets viewers, time and date formatters and so on. Basically, you don’t get to implement any of your own JS, just connect the styling with what is already offered through these boilerplates (at the time of writing this post anyway).

When it comes to CSS you can forget about including style sheets separately, all CSS is served inline, saving multiple resource requests and well, you guessed it, saving time too… This makes for a sore scrolling hand when your CSS doc is 2000 lines long.

Most CSS is supported but the only frustrating unsupported feature that I really missed was background-image. If you want to float some text over an image, or you want to just centre an image, hide any overflow and let its size depending on the device then you’re going to need to find another way. All images must be loaded with the <amp-img /> mark up with the width and height defined at the outset. Images are the enemy to load times, so AMP has strict enforcement over this.

I even added me as a “Person” with the new JSON-LD markup. This will hopefully give me a little bit of an edge in SEO. I found this great resource to help me put it all together

As it was a simple application, and it was a one-man team, I stuck with User Acceptance Testing (using the site as a normal user would) on my local environment, then exploratory testing in production.

Also, my project would come way under budget, thanks to Netlify’s free hosting and Cloudflare’s free SSL certificates I can not pay a cent to get this thing up!

A/B testing is all about asking good questions. I wanted to start simple. My design is very much flat & monochrome. I wanted to know if giving the Call to Actions a little more flare could change results. This test will be a long one, not a huge amount of traffic will be on my site. Either way, let’s set it up and check back in later!

Here’s my first experiment.

It's lightning fast, It's beautiful (maybe I'm just a doting father). It's to the point. It's SEO rich. Now I just need content!

It's always fun to work on projects and learn new things. It what interests me about tech roles most. I miss working in a team, but none the less it's still fun seeing your project up and running!

If you want any of the templates from this case study then I've put them all in a Google Drive folder for you to use on your own projects. Happy creating and don't hesitate to email me if you have any questions or just want to say hi!