Brand

Project

Redesigning the way the world digitally perceives me.

Summary

My original portfolio was not getting the traction I desired. I applied my UX knowledge to identify the shortcomings which lead to this complete redesign.

Responsibilities

UX Research
Usability Testing
Wire Frames
UI Design
Art Direction
Front End Developer

First Impressions Count

It seems that a great portfolio is more important than a good resume when trying to land a career in design. It also became clear that recruiters each have a particular style that they are drawn to. I realized quickly that my portfolio wasn’t checking either of these boxes and needed a major upgrade.

Starting Point

How do I take a critical look and identify the faults in something I believe is good and am attached to? I started with my intended audience and did some User testing. I reached out to my network and my network’s network of UX designers asking if they would critique my portfolio and see if it was communicating a clear message. Turns out it wasn’t. Some of the most common feedback was:

“Why is all your text left-aligned over centered? It leaves a lot of dead space”

“Change the font to make A’s&S’s easier to read, also leading would go a long way”

“Your Images are blurry and oversized, anything in a mockup looks skewed”
“Your site isn’t responsive at all, a lot of recruiters will view this on mobile”

“Visuals matter more than explanations, add more artifacts even if they are ugly first sketches”

Research

Well, I knew the usability of my site wasn’t great, but now I had some clear direction on where to focus. Now what? Do I look for another better Wix template or do I look at what other UX designers do to make themselves stand out? I went with the latter and started looking into what made a successful UX Design Portfolio.

What I found was 3 common themes:

Introductions- All of their hero sections were “about me” pages with photos and blurbs

Minimalistic- their work was the centerpiece, no flashy backgrounds, and unnecessary photos

Trim the Fat- they only have a few very in-depth case studies; quality content over quantity

Sketches

Rapid ideation at it’s finest - what are the main components? Well the images can’t be huge, it should be primarily visuals, and it should make a firm introduction of who I am.
But what will that look like? How many pages are considered optimal?
I figured my landing page could also display and link the viewer to my case studies. What will my case studies look like? How can I make them easily scrollable; yet still convey that I have a firm grasp of the design process?
I also need an “about me” page. What is my image, what is the brand I am trying to build? What do I excel at? How can I communicate this quickly? This leads to sketching and evaluating which design concepts would be best to showcase.



Landing Page Ideas
Case Study Ideas
About Me Ideas

Wireframes

The wireframes allowed me to take all my random sketches and create a refined design that incorporates all the elements of a good portfolio showcasing who I am and the work that I have done. It allows me to start playing with copy and placement, as well as fonts.

These artifacts also allow me to share my ideas with trusted colleagues to gain feedback and make modifications. For instance, should titles be changed or have better placement, sizing, or moving images? Once I’ve had a chance to gain outside perspectives ensuring it has a good flow and layout it’s time to move to grids and colors.

Grids

Grids are extremely important to a good interface design. You have to be well aware of touchpoints, spacing, and gutters both inside and out. I started with laying out the standard 12 column webpage layout making sure the columns didn’t go past 1200px. This allows for a suitable outer gutter, keeping the main content centered and in-view. As for the vertical rhythm, I decided to keep it as a soft grid, considering there would be several different elements such as text and various sized images. I decided that a 4pt baseline would work best with the soft grid for these different elements because it allows for a little more flexibility when working with the images I had.

Mood Boards

For my mood board, I decided to go with a four colour scheme. I felt the four colours make it dynamic but not overpowering and continue the overall minimalistic look. A lot of this was done using the Coolers app. Coolers applies artificial intelligence to mix and match colours. I knew I wanted a dark theme for my website so I started with the off-black background and built around that. In UI I prefer a maximum of 4 colors.

Coding

There were two motives to learn how to code. One is that it is a valuable asset when applying for a UX Design role. Knowing how to code gives you an understanding of what the developers' restrictions will be when you pass your design along. It helps you know what is possible and what isn’t so you can work that into your designs. Knowing the possibilities and limitations and designing around them streamlines the overall process. The other motivation to learn to code was that it allowed me to be truly free with the layout of my website and no longer limited to design templates. It was an extremely rewarding and satisfying process, and I can now add proficiency in HTML and CSS to my list of skills.

Recap

What were the overall challenges? First off, being told my old portfolio sucked was a bit of a hard pill to swallow, but I appreciated the constructive criticism. I believe in working and reworking things until they are perfect. The biggest hurdle in the redesign was learning to code. My industrial design background and UX design experience have made the user testing and redesign process relatively easy. It took me about two weeks and 3 complete restarts before I could get the code to do what I wanted it to do. The biggest takeaway is that if you are passionate about achieving something and willing to learn from your mistakes you can conquer your goals.