Connect with us
create a ux portfolio

Web Design

What To Include In A UX Design Portfolio Website

A UX design career is one of the most stable paths you can take. It has grown rapidly over the past decade and every major technology company was a great UX team.

But just like all designers, illustrators, and programmers, you’ll need a portfolio of UX work to land gigs. This can be tough because UX work is more about the process than the end result.

However if you follow these tips and craft a site to show off your skills you can make a portfolio that’ll have job offers lined up around the block.

UX Case Studies

The most important aspect of every UX designer’s website is the actual portfolio. But sketching wireframes, designing interface mockups, and creating animations aren’t the only tasks of a UX designer.

Instead you want to create a portfolio of case studies that prove you can take an idea from start to finish through a typical UX design process.

You can include plenty of screenshots and mockups. But you should also include the different interface styles, animation techniques, workflows, and the ideas you had for every step along the way.

The portfolio of Justin Edmund is a fantastic example of clean design with strong case studies. His school of design study explores a Carnegie Mellon redesign for parts of their website.

jedmund ux designer

Every part of the case study has its own section with a top navigation that operates like a table of contents. This way the visitor can scroll through and see exactly what Justin did for each area of the page.

A big part of UX design is studying ideas and planning them for yourself. And that’s exactly what Justin covers in his case study for this school. Screenshots and photos from other school websites demonstrate how Justin worked through the problem and how he created the final design.

The best case studios prove you can do your job by explaining your process.

Show visitors what you do by leading them through every step. Add photos to spruce up the case study and break up large blocks of text. But people care more about your decision making process over your design skills.

frances tung ux portfolio

Another incredibly talented UX designer Frances Tung builds case studies in a way that answers common questions.

For example, his study on PaintBerri explains right at the top of the page that his goal was to “uncover user needs”. This offers a specific goal with an end result that can be measured.

The case study includes plenty of visuals and the creative steps used in the process. But Frances also links to relevant content about PaintBerri including this post on the team’s journey to temporarily suspend the site.

Every great case study has a few common elements:

  • A clear goal
  • Explanations for each step
  • Thorough detail about the creative process
  • Screenshots & photos that demonstrate how the designer works

UX designers are still designers, but their tasks go far beyond Photoshop mockups.

Make sure to really study your goals and pick case studies that best showcase your talents. If you haven’t done any professional UX work then make up your own project! This is the best way to get your work noticed and to add case studies into your portfolio.

Craft A Straightforward Design

It goes without saying that a UX designer’s portfolio should have a great user experience. Although I love the irony of a UX designer running a GeoCities portfolio.

But going beyond the user experience is the accessibility of content. I think the best portfolio is clean and to the point. There shouldn't be anything in the way of people accessing your portfolio and finding information about your work.

Check out the portfolio of Simon Pan. Clean, straightforward, and a navigation that only hosts 3 links.

simon pan ux portfolio

All colors are simple and muted to fall into the background. Right from the homepage you have direct access to Simon’s portfolio case studies which take up a majority of the page. Typography is crisp and uses high contrast to draw attention.

And his case study pages are incredibly strong using wide images with smaller content columns.

A straightforward design applies to every page on the site. And I think Simon’s case studies sell this point well.

They’re easy to navigate and they really encourage the user to keep scrolling. The best design is one that keeps people on the page reading and engaged with your content.

I do have to critique one aspect of Simon’s website: the lack of prominent contact details.

You’ll find an e-mail in the site footer but nowhere else. Most people won’t want to scroll all the way down just to contact Simon, and I think adding that e-mail right under the navigation menu would do wonders.

Add this same attention to detail into your own portfolio design. Really get into the head of your visitors and think about what they’ll want to do and how you can design an experience around that.

Use Visuals To Sell

UX designers handle tasks that are largely cerebral. They do have visual components. Although solving for conversion rates, more active users, or a higher time on page requires critical thinking.

But don’t let your portfolio run amok with words. Visuals always help sell what you do and they break up all that text making it easier for people to keep reading.

zhayitongs ux design

Designer Yitong Zhang keeps his portfolio clean with a white background and dark text. The images are the only visuals and they stand out because the site is so minimalist.

Every case study on his site includes lots of images from screenshots to quick thumbnail sketches and wireframes. You’re drawn into a creative journey from start to finish where Yitong teaches you how he does product & UX design.

There is no specific type of image you must include with each study. Instead think about which visuals can help sell your skillset and best demonstrate what you do.

If you’re an expert UI animator then include plenty of animations. If you’re better at wireframing then add pics of those.

slava kim ux portfolio

Slava Kim is another skilled designer with a slightly different approach. His portfolio uses smaller photos that blend nicely into the layout.

The text and multi-column layout remain fixed while images appear sporadically throughout the page. They act more like extras rather than anchored elements. You can see this clearly on his Kassa study page.

Add visuals that best suit your case studies and keep them relevant. Good design will always sell but it’s a mix of design+content that’ll help you land gigs.

Adding A Personal Touch

If you’re creating a portfolio for yourself then you’ll want to add a personal touch.

Companies don’t hire designers, they hire people who can design. The difference is small but significant.

You want to sell yourself as a human who can work on a team and contribute value to that team. Add a small “about me” section or add a photo of yourself onto the homepage.

Christina Richardson does both and her UX design portfolio is one of the best I’ve seen.

christina richardson

The very top of the homepage includes a graphic of Christina’s journey into UX. This journey works like a visual timeline sharing her education, her skillset, and her job prospects.

One look at this page and you get a sense of personality. It’s also a clean site to use and very easy to skim. But the personal stuff isn’t meant to be skimmed, and ultimately it should drive people deeper into the site to learn more about her work.

arun pattnaiks ux designer

Another great example is the portfolio of Arun Pattnaik. It throws out the minimalist approach for a much more extravagant design.

The content is still phenomenal and that’s what really sells. Arun has a very detailed “about” section towards the bottom of the homepage with a photo of himself and information about his work history.

At a glance you can see Arun has been designing for 10+ years and worked on over 100 projects. This is the kinda stuff you want on your homepage because it grabs attention and offers valuable information at a glance.

Everyone has different levels of comfort sharing personal information. There is no right or wrong amount, but generally I find it’s better to add even a little personality into your portfolio.

Wrapping Up

A great UX design portfolio should have clear information about your work, your skillset, and yourself as a designer. It doesn’t matter how much info but it should be enough to sell yourself & your skills.

Focus on case studies and practical information. Prove that you know how to design interfaces and improve existing interfaces. With some detailed case studies and a well-crafted site you’re sure to attract attention to from your UX portfolio.

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design for web & mobile. You can see more work on his portfolio site and follow his tweets @jakerocheleau.

Click to comment

More in Web Design

To Top