Creating an online portfolio: the essential tools and resources

Newcomers to the Job Hacking blog will quickly realize that the central theme of what we focus on revolves around using an online portfolio to showcase your talents and skills, and integrating modern web analytics techniques to track and analyze data that helps us optimize our job applications. So far we’ve discussed the analytics side of things in some detail, including using UTM trackers to capture visits to your portfolio, how to segment that data, and using A/B tests to uncover the insights you need. This blog post will wind back the clock and start at step one by looking at the most common ways to create an online portfolio if you don’t already have one, or are looking to improve what you’re currently using.

Whatever type of work you’re looking for, an online portfolio is a great way to share your projects and talents with prospective employers. My immediate reaction to the word ‘portfolio’ involves images of starved art students dragging spattered canvases across a freezing city (it’s always winter at art school) and trying to trade their oil paints for cheap rolling tobacco and rusty cans of Chef Boyardee. However, those more enlightened than me have pointed out that a portfolio is really just a showcase of someone’s work, whether that be an engineering grad project, a custom designed database, an article that you published, or your collection of Calder inspired wireframe figures made from discarded coat hangars that represent man’s fragility in the face of an uncaring corporate enterprise. In short, any piece of work that you produce that showcases your talents can and should be considered as viable material for sharing.

Not all of us (including me) are professional computer programmers or web savvy enough to create an online portfolio, but the good news is that there are many options out there, ranging from easy to more challenging, for anyone who wants to learn how! Based on the old saying “Good, fast, cheap: pick two”, here are your options:

1. The easy and quick way of creating an online portfolio

Pay someone to do it for you. If time is of the essence and you don’t have any interest in learning how to code, there are plenty of paid services that will make the process quick and painless. The one I like best is Format, partly because their team is based in Toronto and I like to support local businesses, but mainly because all of their portfolios are dynamic (will display equally well on mobiles, tablets and desktops), fully customizable, and most importantly has Google Analytics and Webmaster tools support for all your data gathering needs.

Shut up and take my money picture

There’s no shame in this, if you can afford it.

If you want to shop around, 10 seconds of Googling “online portfolio builder” will give you hundreds of other options. Just make sure that whatever service you choose has analytics support built in, preferably Google Analytics, otherwise you won’t be able to practice any of the Job Hacking tips and leverage insights and exciting data.

2. The easy and cheap way of creating an online portfolio

For minimal effort, WordPress is the best way of creating a portfolio. WordPress.com will give you free hosting and a bunch of templates that you can access and easily customize without knowing a single line of code. This blog is built on WordPress and is currently running on the Sorbet theme, but there are plenty of responsive portfolio themed templates available for free that will let you upload and showcase your work effectively without it looking like a blog. WordPress also has built in analytics dashboards, and can also be integrated with Google Analytics with a bit of tweaking. If you are in any kind of communications, public relations or marketing field, WordPress has also become the de facto website/blogging service for many companies and organizations, so knowing how to use the platform would be a great skill to add to your resume.

Purity WordPress theme picture

Example of a portfolio built on WordPress

A word of warning: the customization options for the free version of WordPress are limited, and if you are picky about changing your template to have a certain look or functionality you may have to pay for their Premium package in order to make your portfolio look exactly how you want. Do your research before moving ahead, and take a good look at their plans in order to get the best choice for you.

3. The slow, cheap (and best) way of creating an online portfolio

Build one from scratch. This isn’t as hard as it sounds, even if you’ve never coded in your life! If you’re a complete newb like I was, I can’t recommend Treehouse Learning highly enough. They offer a Web Design course that teaches you absolutely everything you need to know about HTML and CSS programming, and by the end of the course you have built an online portfolio (from scratch!) that can be uploaded to the web immediately. They do charge a monthly subscription fee, but offer a free two-week trial which is long enough to complete the web design course if you’re serious about finishing it. It took me 10 days to get my first portfolio finished, but I was so happy with their courses that I decided to become a paying customer once the 14 day free trial expired.

For those who have some basic HTML skills and are just looking for a quick refresher, Codecademy is a free service that offers interactive coding lessons designed for beginners and experts alike. With the release of HTML5 and CSS3 there have been a lot of changes in web design technology and best practices, and Codecademy is a great way to quickly get up to speed with the latest updates.

Time permitting, this is the method I recommend to most people and the one I used myself in creating my portfolio. Apart from the benefit of having complete control over how your site looks and feels, basic programming is a great skill to have in almost every field out there. With more of our socializing, buying habits and entertainment sources shifting online, knowing the basics of how a web page is built and functions will give you a huge advantage in the job market. If you’re not sure whether coding is for you, sign up for a free account with Codecademy and start their HTML/CSS track. Once you feel things are going well, switching to Treehouse will ensure that you not only know how to code, but have all the tools for getting your website online.

Just remember to stick the Google Analytics tracking code into the <head> of all of your pages, otherwise you’ll miss out on a lot of juicy data.

What types of online portfolios do you like? Share examples of cool portfolios you’ve come across (or built yourself!) in the comments below for inspiration.


Note: I’m in no way affiliated with any of the products or services mentioned here, or anywhere else on the Job Hacking blog. I like to share resources that I have personally found helpful or feel are good value, but always do your own research before paying for any kind of service on the internet.

Advertisements

Segment your data: creating valuable insights for your job search

Building on the previous Job Hacking blog posts where we use UTM trackers and A/B testing techniques to track interest from potential employers in our applications, lets now look at how to configure Google Analytics to take the data we’re gathering and turn it into meaningful insights. This blog post will explain how to segment your job search data and set up custom reports that give you the information you need quickly and effectively.

You’ve tagged your links, created specific campaigns for a group of resumes and applications, and have sent them out to prospective employers. Logging into your Google Analytics account tied to your online portfolio or website, you see that you’re getting visitors – awesome! People are clicking the links, which means they’re interested in finding out more about your skills and experience. The next question is, who is checking you out?

Google Analytics default home screen

Google Analytics’ default view

At first glance, this looks great. Over 30 sessions, 26 unique visitors, nearly all of which are new visits from English speaking people (nothing against Russian speakers, but if I’m applying for jobs in Canada my applications shouldn’t be getting many visitors from overseas). On the other hand, it doesn’t show me any of the information that would be helpful to my job search, such as which employers are checking me out. To fix this, we can segment our data to show visits that originate from the geographic area of our job search campaign.

To show sessions from visits in your area, click the “+ Add Segment” outline directly underneath the Audience Overview report heading at the top of the page. Create a new segment using the Location field at the bottom of this list. Since I am applying for jobs in the Greater Toronto Area, I select City from the first drop-down menu, is one of for the second, and type in all the cities around me in the text box separated by hitting enter after each one. Hit Save, and you should see something like this:

Google Analytics segmented data view

Visits segmented by visitor location

Ah, this is better. The orange line now shows the visits from users in the specific locations I added to my segment. I can now see that most of my traffic is coming from inside the Greater Toronto Area, and therefore more relevant to my job search. Segments can be applied to any of the report views offered by Google Analytics, and are essential to understanding who is coming to your website. To read more about creating data segments, check out Google’s help page.

It’s great that I can see exactly where my visitors are located, but it still doesn’t tell me if those clicks are originating from my applications. We’ve spent a lot of time tagging our applications with UTM trackers, so lets put them to good use! Under the Acquisition section on the left menu, select the Campaigns report. Campaigns tracks visits from all clicks that have been tagged with a UTM tracker, in this case our job hunt campaign we’ve been embedding in all our resumes and cover letters.

Graph of Visits segmented by campaign

The gold: website visits by employers you’ve applied to

The primary dimension of this report is the Campaign Name field from the URL builder, which in our case is ‘Job Hunt’. Select the secondary dimension drop-down underneath, and choose Advertizing > Ad Content to add a second line that shows the Campaign Content field from the tracker, which in our case is the name of the employer (blurred out here for privacy). This is only possible if you’ve been diligent in filling out all the fields of your campaign, but the payoff is huge! I can now see exactly which companies have clicked the links to my work in my applications.

This is far more valuable than relying on Google Analytics’ default reporting, and a powerful source of information in your job search. Click the Shortcut button at the top of the report and the report is now available in your Shortcuts menu every time you log in.

By knowing exactly which companies are checking me out, I can see which applications are working and tailor future ones with more confidence. Next, we’ll explore how to dig deeper into our data and leverage our insights to become more proactive in our job hunt.

What kinds of segments will you use in your job search, and how will it help you improve your application process?

 

Portfolio project: Low-poly portraits

I’m slowly making my way through Avinash Kaushik’s Web Analytics 2.0, which is ‘The Book’ to read for making sense of the overwhelming amounts of data at the online marketer’s fingertips – check out his blog for hundreds of posts on getting to grips with modern web analytics.

I plan to do a write-up on the key need-to-know points when I’m finished, but in the meantime I’ve been working on a small graphic design project and wanted to share the results. The profile pic on my portfolio needed a little jazzing up, and I came across a good tutorial on how to turn a photograph into a low poly portrait. Having always wondered what I’d look like in a late 90s First-Person-Shooter, I decided to give it a go over a weekend.

Taking a fancy portrait shot I had on my hard drive, I decided to skip the annoying/unnecessary steps of combining a bunch of similar photos to create a perfect amalgamation of my face. Any minor changes would be likely lost in the low poly creation process, and it seemed to be a waste of time considering the final look I was going for.

What was not unnecessary however was the wireframe sketching process; I jumped straight into Illustrator and started with the Pen tool immediately, only to quickly realize that it was a gigantic pain in the ass without guide lines. Since using the Pen tool to add new anchor points deselects the existing paths and anchors, it’s nearly impossible to tell where to join your paths without laboriously adding a single anchor, selecting all paths on the layer, re-selecting the Pen tool then hovering around the area where you other paths are to highlight them. This is an incredibly complicated and unhelpful way of saying: don’t skip sketching your wireframe with the Brush tool in a separate layer.

Wireframe over portrait

Sketching a wireframe with the brush tool

As you can see, I end up looking like a younger, whiter MFDOOM, which is pretty cool in of itself. Then came the time-consuming part of creating a wireframe path on a separate layer using the helpful brush sketch as a guide. This ended up taking a solid three hours, so take the advice in the tutorial and brew some coffee, dig up your old Hip Hop mix tapes from the 90s and focus.

Eventually, after working your way through all of Biggy’s Ready to Die, you are finished and get to enjoy the relatively breezy process of colouring in your triangles with the Live Paint Brush and Eyedropper tools.

Low poly portrait of Ian

The final product: a low poly portrait

I ended up looking like a slightly demonic character from an RPG circa 1998. The eyes are a little scary, but the idea of an HR manager seeing this while checking out my work is amusing, so for now it’ll stay. I’ve thrown it up on my portfolio, as it fits with the low-tech theme and feel I have going there.

If you’ve got some spare time, give this tutorial a try. It’s a good way to become more familiar with Illustrator, and produces some good portraits that you can show off on your resume or website. Illustrator’s vector-based foundations really shine here, as resizing or moving the paths is so much easier than using Photoshop – no pixel distortions or loss of resolution! I’d recommend choosing photos with good contrast and shadows for maximum poly-effect, and if you scroll down the tutorial’s page people have submitted all kinds of cool examples of how you can take this one step further.

Now back to reading about macro analytics and data segmentations…

Use A/B testing to optimize your job search

A/B testing is nothing new – online marketers have been using this scientific method for years to track the effectiveness of digital campaigns and advertisements. What may be new however, is applying it to our job search in order to find the most effective resume and cover letter combo that gets employers’ attention. This blog post will show how you can optimize your job search using A/B testing in conjunction with an online portfolio, resume or website.

For our purposes, A/B testing is simply an online two-sample hypothesis test where we take two versions of similar content and track which version gets the most views, clicks, or visits. We’ve already covered how to use UTM trackers to gauge employer interest in your resume, so lets take things one step further and use that data to create an organized and optimized job search technique. The best way to explain this is to use an example, so here goes…

I’m looking for a job in the communications industry, and I’ve found four positions that I’m really excited about. The positions all have different job titles, but the responsibilities and qualifications are very similar. I’ve done my research and have only targeted companies that are looking for entry-level or recent graduate candidates (or have a history of hiring them), found jobs that are in-line with my experience and skills, and positions that are in the same industry or sector with similar responsibilities and roles*. For the science and engineering types following along, what we’re doing is establishing a control for our experiment: a set of unchanging base-line conditions to which we will apply the test.

Now for the testing, where we create two different versions of our applications for the group of jobs we’re interested in. Ideally, since all of the positions are similar, for four positions we should be able to create two versions of our resume and cover letter, since the responsibilities and skills required by all four jobs are similar. Context and common sense is key here – each application should still be tailored and tweaked to the position you are applying for. Rather, we’re taking a broader approach and creating different themes, formatting or tones and seeing which one resonates more with employers. So if I was unsure whether its better to go with a more creative, highly formatted resume or a pared-back basic one, I’d create two versions of the URL links to my portfolio/website/resume with Google’s URL builder with unique Campaign Content identifiers, like so:

1. Fancy formatted resume application links: (emphasis added)

http://www.myportfolio.com/?utm_source=application&utm_medium=email&utm_content=fancy&utm_campaign=job%20hunt

2. Basic formatted resume application links: (emphasis added)

http://www.myportfolio.com/?utm_source=application&utm_medium=email&utm_content=basic&utm_campaign=job%20hunt

ab testing graphic map

A/B testing for job postings in action

Because the UTM trackers we’ve embedded in our applications will tell us exactly which links are being clicked, we can analyze which versions (or even portions) of our applications are the most popular, or enticing enough for hiring managers to click on. Using the example above, we would see if the links in the fancy resume got more clicks than the basic version to determine which formatting style is the most effective for your job hunt.

Examples of how A/B testing can help you optimize your job search include:

  • deciding between two or more different resume formats or layouts
  • getting the right tone (formal/casual) for your cover letters and applications
  • deciding which skills or projects to highlight in your resume
  • deciding which projects to highlight on your portfolio

The possibilities are endless, but it’s important to note that A/B testing will only be accurate if you maintain a strong control and use a sample size (ie. # of job postings) of four or more. This means that the jobs you are applying for MUST be similar in terms of responsibilities, qualifications and experience.

In real life, A/B testing in online marketing is a continuous process of tweaking and adjustments, with marketers constantly testing and improving versions of ads, campaigns and digital media in order to create content that will be widely seen and shared. Using the same approach in your job hunt will give you valuable feedback as to what’s working in your search and what’s not, allowing you to tweak your applications until you find the sweet spot. Employers who are checking out your work online are probably interested enough to call you in for in interview!

How would you use A/B testing to improve your job search?


* Real life job titles I have used for this experiment include Communications Coordinator, Community Manager, Insights Analyst, Marketing Analyst and Digital Marketing Specialist, all for small to medium sized companies looking for someone with less than 5 years of experience.

Creating a brand guide for your blog: making a logo in Adobe Illustrator

This post will showcase a quick design process for creating a simple brand guide and logo for your website or blog project. Creating a logo (or mark) is one of the best things you can do to make your blog stand out from the crowd, as well as being a great opportunity to learn or improve on your graphic design skills.

For those who think that they can’t draw or find Illustrator too complicated to use, keep reading! A month ago I’d never used Illustrator in my life, hadn’t drawn seriously since middle school, and generally felt that graphic design was an area best left to people with fancy art degrees or exotic drug habits*. Everything I’ve learned since then was thanks to Team Treehouse’s excellent tutorials; if you’re not familiar with Treehouse, it’s an e-learning service with a low monthly fee that has in-depth tutorials on everything from web and graphic design to app development and business courses. I’ll talk more about them later, but for now all you need to know is that they have a free two-week trial period which is more than enough time to complete the Illustrator basics course and get started on your own logo project.

Since this blog is in need of a shiny new logo, and my portfolio needs updating, lets kill two birds with one stone and create a brand guide for the Job Hacking blog.

Following the design process outlined in Treehouse’s Adobe Illustrator basics course, lets start with a mind-mapping exercise. This is a trendy way of saying “write down key words related to your project and extrapolate on each term.” So, I wrote down key terms that I was interested in, such as “social media”, “web design”, “communications” and so forth. Once I had three to four main words, I’d go back and start branching out from each one, until I had a page full of connecting words and themes. This is great for overcoming the “I have no idea where to even start,” stage and getting visual inspiration for the next step; sketching logos.

Brand guide sketches

Step 1: Sketching your ideas

Now for the fun bit; start drawing pictures and shapes that build on the themes you identified from the mind-map. In my case, I was focusing on the themes of this blog: data, analytics, conversations/storytelling, success, and technology/code. As you can see, this eventually turned into something kind of cool and unique. Once I’d decided on what I wanted the logo to look like, it was time to fire up Illustrator and create a digital version.

Early draft of Job Hacking logo

An early draft of the logo

I decided early on to use a monochrome orange palette: monochrome for it’s simplicity and because it was the preferred palette of most larger brands, and orange due to the strong association with established data analytics tools like Google Analytics. With the basic shape and design in place, it was time to play around with fonts, colours and refining the mark design.

Shortlist of Job Hacking logos

This took longer than all the previous steps combined.

Then I spent hours fussing over small details and driving my girlfriend crazy by asking her what she thought of each iteration. I wanted the mark to be tied visually to the text to convey the idea that technology and data can be used to tell a story with the right analysis. The final data point outside the icon with the arrow pointing up implies that success can only be achieved by thinking outside the box (yes, very deep), while the stylized H bonds the icon and text both graphically and symbolically. In the end, this is what I created:

Job HAcking official brand guide

The completed brand guide and logo for the blog

With the mark and text finalized, it didn’t take too long to create a few different sized iterations for favicons, black and white alternates and a colour guide (useful for choosing accent colours on web design projects). Export the artboard as a high quality PNG and we’re done!

To be clear, I am not a professional graphic designer and there are doubtless many improvements that could be made, but hopefully this will inspire you to try creating your own logo or start learning some Illustrator skills if you’ve never tried it before. And if there are any pros looking at this who have suggestions or advice, I’m all ears!

Ironically, I can’t use the logo or brand guide on the blog right now, since being unemployed at the moment makes it difficult to justify paying for the WordPress upgrade to access the CSS and customization options 😛 I’ve added it to the About page and my Portfolio. Hopefully I can feature it better on this blog sooner rather later. For now, I’ll patiently await a call from Jony Ive, congratulating me on my stellar work along with a job offer that will let me buy all the WordPress upgrades, as well as the fancy red car and vacation house in the Bahamas…


*I’m joking of course. I’m in awe of incredibly creative people and their design process, even more-so the ones who can earn a living from their talents. Besides, real graphic designers never earn enough money to afford exotic drugs…

How to track employer interest in your job applications

Does sending out endless resumes to employers sometimes feel like dropping small pennies into a vast abyss? You spend weeks sending out dozens of carefully tailored applications, and never hear anything back. Ever wonder if they’re even getting read?

Here’s a neat and simple trick I’ve started using in order to see if intrepid HR managers are actually checking out the applications I’m sending them. We can use Google Analytics and UTM codes to rig our resumes to create a digital breadcrumb trail that lets you see if employers are clicking links in your applications. This technique assumes that you have some kind of website or online portfolio set up with Google Analytics, and are comfortable with basic HTML coding and updates. Here’s how it’s done:

Step 1. In the body of your cover letter include a link to your online portfolio or website. I like to put the link toward the end of the cover letter after a bullet list of key assets I feel I’d provide, like so;

Key assets I’d bring to your company include:

  • Amazing asset
  • Even more amazing asset
  • Skill that highlights why I am perfect for this job

To view examples of my work mentioned above, please visit my online portfolio <insert hyperlink>.

Step 2. Now, in the hyperlink include a UTM tracker pasted directly at the end of the URL you’re linking to. For example, if your website is http://www.myportfolio.com/index.html, adding the UTM tracker will make it look something like:

http://www.myportfolio.com/index.html?utm_source=resume2&utm_medium=email&utm_campaign=job%20hunt

The code from the UTM generator is generated by Google’s URL builder tool, which is free and easy to use. Just fill in the campaign info boxes with the requested information, hit “Submit”, and the code is generated for you!

Example of using Google's URL builder

Step 2: How to fill out the URL builder fields

Step 3. You are ready to track visits to your website from people who click on that link. The results will show up on your Google Analytics account under the Acquisition > Campaigns tab, making it easy to see exactly who is clicking your links and what content they view on your websites.


How is this helpful? UTM trackers can be used on any link to an online URL, which means you can get creative with campaigns and A/B testing on your job hunt applications. If you’re sending out many resumes and not getting any interview requests, the tracking data is useful for figuring out if your cover letter or resume is the problem. If you can see that employers are clicking the links you’ve provided to your work, it at least shows that your application is being considered and that your resume is enticing enough for them to want to find out more. If however you’re not getting clicks, it may be time to rethink the wording, content or formatting of your cover letter and resume, and reconsider how to get prospective employers checking out your work and skills.

Perhaps one of the most frustrating aspects of job hunting today is the lack of feedback given to prospective candidates and job seekers. Companies are too busy, or too lazy, to send feedback or reasons for rejecting an applicant. In this type of environment, it’s easy for HR myths and hearsay to circulate as strategies for job seekers, often in the form of conflicting or flat-out bad advice. Using data in your job hunt is way to take back some control over your situation, and get some feedback on how your applications are being received. To take UTM trackers to the next level, learn how to segment your UTM data with custom reports, and how to integrate A/B testing to perfect your applications and increase your chances of getting an interview.

Obviously this method is far from perfect, so any suggestions on how to improve this would be greatly appreciated. How would you use UTM trackers or data analytics technique to help your job search?

What is Job Hacking?

You won’t find it in the dictionary, which is a relief because I was looking for a catchy title for this blog. The name is derived from the term growth hacking, which Wikipedia helpfully defines as;

“a marketing technique developed by technology startups which uses creativity, analytical thinking, and social metrics to sell products and gain exposure.

First, some back story. Back in September 2014 I was laid off from my job at an organization in Toronto. After the initial shock had worn off, I quickly set about applying to as many similar positions I could find, only to run into the same problem that everyone else under the age of 35 (and even some who are older) is having: our hyper-competitive job market post-2008.

gob-letter-throw

The traditional job hunt: throwing resumes into the sea

After many dozens of carefully tailored resumes and cover letters disappeared into the void of HR email addresses and Taleo URLs, it quickly became clear that the traditional method of sending applications to job postings wasn’t going to cut it. At the same time, I’d been using my suddenly decongested schedule to jump head first into the deep end of web design, data analytics and marketing techniques like growth hacking. It’s still an on-going process, but the more I read the more it made sense to use the techniques that many online marketing teams are creating to get their content seen on the internet to… you know, actually find a job.

So with that in mind, lets kick-start this blog project with the first, formalized and semi-official definition of the term “job hacking” (Merriam-Webster, eat your heart out):

Job Hacking

noun

1. a job search technique influenced by the practices of technology startups which uses creativity, analytical thinking, and social metrics to showcase an individual’s talents and gain exposure.

2. a career mindset and methodology for the 21st century

verb

1. the process of creating, sharing or analyzing original content in order to showcase talent or expertise


Age-old advice, wrapped in a nice <div> with some meta tags and tweets with embedded URL trackers for conversion data. For various reasons, we may be in one of the worst job markets for young people since the Second World War. The well meaning advice from older generations is largely obsolete, as evidenced by high youth unemployment, a sagging economy, and technological advances that have changed our society for better and for worse.

A new economy calls for a new approach to finding a job. I propose that job hacking is the best way to develop your career and showcase yours skills that companies value. I could be wrong, but I’m willing to find out…