My web portfolio was outdated, and its design and content quality didn’t accurately reflect my current abilities. The project aimed to redesign my portfolio and supplementary materials to showcase my current skill level.
I reviewed YouTube videos, articles and any information I could find online about what makes a good or bad web portfolio. The result was a massive list of tips, tricks and pain points I'd discovered.
I interviewed Matt Dunn, an Innovation Consultant at Supercharge who regularly reviews applications, including portfolios from designers.
I found a listing for a Product Designer position online and noted the basic requirements. I then reviewed 40 portfolios (including mine) as quickly as possible, as if I were hiring for that position, to see if the applicants met the position's requirements.
I wanted to see...
This method helped me understand the user's mindset and review portfolios with a new perspective. Instead of being wowed by fancy animations and visual design, I focused on determining if the user met the position requirements. I was frustrated when I couldn't find the information I needed. It illuminated pain points and helped me identify opportunities to improve user experience.
These research methods revealed many pain points portfolios, including mine, suffered from. I grouped the pain points into categories and positively reframed them using the How Might We method.
The insight gathered from the research phase helped me to define the challenge differently.
Create a website that a recruiter with no design knowledge could skim in under a minute to discover who I am, what I do, my work, my design process, my work experience and how to contact me.
The deliverables of this project are listed below...
The portfolio reviewer's golden path to get the most value from the experience is below...
I created assessment criteria as a method for helping me to select the most promising ideas to develop further.
I took the HMWs collected in the research phase and used brainstorming and sketching to create as many design solutions as possible. I then used the assessment criteria to select the best ideas to take forward.
My first step was to create a new brand identity to give my designs a more mature and professional look and feel. The visual language includes neutral and muted colours, square shapes, all-caps text, huge text contrasted with tiny text, border lines, bullet points and encircled alphanumerics.
I then began to work on the website design. I chose to have two main pages, a work page and an about page. I chose this page setup because it’s what users are used to. I decided not to have a contact page to simplify the website even further, instead opting to have contact options in the header and footer.
The work page is the landing page that users first arrive at when they open the website. I created the designs with responsiveness in mind.
Breaking down the landing page design, we have the fixed header at the top, which is visible on any page. My name is displayed on the left so that users can always see whose website they’re on. On the right, we have the work and about links, the primary contact CTA and the background music button. The background music button is only visible in Chrome on a desktop.
To ensure contacting me is easy, the contact button displays my email and a copy icon; on hover, "Click to copy" appears as a mouse tooltip. When the button is selected, a toast informs the user that my email has been copied to the user's clipboard. The user can then paste my email into whatever email provider they want. How to pronounce my name also appears when you hover over my name on the left.
The first thing the user sees on the landing page is my name in massive letters; that’s on purpose, so people know who I am and what this website is about; it’s about me and my work. They then see a section which includes a gif of myself, hero text and a button that points the user to where the selected projects are.
I included the gif of myself to add some personality to the site and to give the user an idea of who I am and what I look like. The user can hover over it on a desktop to get the animation to play.
I included the last updated information and the location information to add some personality to the site.
The projects are visible above the fold to make their location obvious. The thumbnails are laid out on the page so the user can compare them quickly as they’re all visible on the screen at the same time; they display the title of the project, the project type, what my role was, and it also teases a bit of the project information.
I displayed all this information to help the user select a project that’s most relevant to them. I designed the project thumbnails to show the final design in context and animated it on hover to accurately represent the project.
The footer includes my contact email in massive lettering, with the click-to-copy interaction and toast. The footer also includes a back-to-top button, social links, and my signature and typeface to give it a personal touch.
I designed the case studies to be skimmable. The quick links at the top of the page make it easy to scroll to the page's main sections, including the final designs, and give the user an idea of my design process.
To make the case study easy to read, I try to be succinct and use a lot of headlines. I write at most 1-2 paragraphs in each section. I keep paragraphs to a maximum of 3-5 sentences and have 9-12 words per line. Additionally, I use visuals as often as possible. I've included a clear challenge definition section to ensure that the case studies show the problem I'm solving.
People can see a picture of myself on the About page to understand who I am. What I do, the tools I use, my experience and education, and additional training are listed. To give some personality, I’ve also included a song I’ve been listening to and a game I’ve been playing.
I built the site you’re using now in Webflow, a no-code website builder, but I did use some custom Javascript to create things like the toast interaction and the live location updates. I used After Effects to make the hero text animation and Photoshop to create the gif of myself.
I also created a new CV, cover letter and social mastheads using the new visual identity that I’d made.
I used mockups to display the site in context on a Macbook and mobile.
