Redesigning My UX Portfolio


Normally when creating my portfolio design, I do it in a rush because there is an interesting opportunity on the horizon. This time, I decided to redesign my portfolio when I wasn’t under any pressure. I’m lucky enough to have capacity to spend time experimenting, and try to create something that shows off my work and also reflects my personality.

Portfolio Design

A lot of the time, my portfolio design ends up looking drab and uninspiring. The majority of the work I do is flows, wireframes and sketches, and not finished interfaces. This is fine for other UX designers. For hiring managers, product managers and even some inexperienced designers, they may not fully understand what they are looking at.

Make your portfolio accessible. Your portfolio is a presentation, and presentation is key.

Presentation Is Key

Remember that it’s possible the people who are looking at your work might not have design experience. They might be managers, product owners, CEOs of a new startup, or even designers with just a very small amount of experience. In cases such as these, you need to spell it out. Think of your portfolio design as a presentation of your career and a reflection of your personality.


There has been a lot of discussion about the “dribbblisation of design” lately. Making things look great on Dribbble does not provide any value to your users or the company you work for. It just makes you look good.

But sometimes you need to look good. For this reason, I decided to embrace dribbblisation. This time, I wanted the projects to shine, so I began with the end in mind.

1. Begin with the End In Mind

The biggest problem I have when creating the homepage of my portfolio is that I end up using concept mockups for most of the projects. It looked completely uninspiring and boring, and this time I wanted to spend time making the thumbnails look great.

For the homepage of my portfolio, I started by creating a layout in Sketch. I used thumbnails I found on Dribbble and began arranging and cropping the images. When I got the balance right, I used those shots to inform the thumbnails that I created with my own work.

This helped me get around using concept mock-ups for every single thumbnail. These thumbnails also helped inspire the banner for each project, and were a great source of inspiration for the portfolio design.

The projects I work on usually take months, and some go on for years. I really want the product mangers to click on them to find out about each project. Below is a screenshot of the layout I went for.

2. Present The Material In an Interesting Way

Something I am guilty of is just grabbing a HTML layout, and designing my portfolio in the browser. While this can be fine, I wanted this new portfolio design to have something more to it.

The focus here is presentation. Present the work that you spent so long doing in a way that shows what a great designer you are.

For some of my projects, this is a bit tricky.

I once built a multi-touch TUIO interface. The problem is that the interface wasn’t the part I spent most of the project doing. I spent most of my time building a wooden box, adding perspex for the surface area, creating a Processing application and reading the interaction of the user. So while the end result didn’t look very exciting, it took months of work and many sleepless nights to get this working, and I was very proud of it. The end result was not exactly “Dribbble worthy”; but I still want to include it in my portfolio.

The question is – how would I make a multi-touch TUIO interface look good? The majority of the content for this project is photographs of projectors connected to laptops which are connected to a playstation eye camera. I created a blue banner that included symbols to illustrate what the project was, and used concentric circles to indicate a touch-screen project.

Presenting Wireframes

In previous versions of my portfolio, I embedded rows of jpgs of wireframes without much thought to the presentation.

For my new portfolio, I placed them on a brightly coloured background and they instantly looked better.

The problem with this is that some people will just throw some wireframes on their portfolio without explaining what is happening. Explain what the problem is, and show the process you took to solve it. I’ve written about documenting your design decisions – because just having wireframes is not enough.


3. Experiment with Different Layouts

Using a coloured background for wireframes makes them look better, but even that technique can start to look boring after a while. To get around this, I started arranging wireframes in different ways.

I spent a bit of time in Sketch, playing with the arrangement of the wireframes and adding shapes and stripes of colour to the background. This instantly made the wireframes stand out so much better. By just spending an extra few hours in Sketch on each project, things really started to look so much more exciting.


So that’s it – those are the steps I took to improve the design of my portfolio. Once again, this work doesn’t add value to the users of my products. All it does is lend a visual aesthetic that anyone – designer, manager or executive – can understand.

Think of your portfolio as a presentation, and make it the best presentation anyone has ever seen.

If you have any special tricks or ideas for adding a project to your portfolio, I would love to hear about it. Contact me on Twitter and let me know.



You may also like