A list of Exceptional Portfolios: Product Design & UX

Portfolio homepages and case study pages: the GOOD and the BAD

(Photo by Ben Kolde on Unsplash)

When it's time to create or update your Product Design or UX Portfolio, you'll want to gauge the competition, collect ideas for structure, layout, visual design and things that really stand out to help you land your dream job..

After helping many designers build job-ready portfolios, there are a few designers that I recommend for inspiration for various reasons

  1. Great structure, both on the site structure and the case study pages. Good structure helps busy recruiters and hiring managers to quickly find the information they need.
  2. Great communication - who they are and what they do has been made very clear, and/or they have mastered communicating the experience design that they have created
  3. Standing out - use of animation or visual design, perhaps having a lot of 'character'. It's important to stand out if you want to beat the crowd and land the job - I'll call this 'Bling'!

Remember to design the 'Experience' that the recruiter is having

Many applicants forget to apply the UX principles to their job application. I often find links to portfolios with friction - e.g. the link takes the viewer to a place other than the folio homepage or the mentioned case study page.

Make sure that you step through the process that the recruiter is having, open your resume/CV and check if your portfolio link can be easily found? Does it jump out or is it hidden in a lump of text? Click that link - does is open up directly to your portfolio homepage?

Have you mentioned relevant case studies in your cover letter? Do the links actually work?

Have you named your Resume/CV file with your name and job title and date? e.g. "Rachael Page - Product Designer - Feb 2024" (or a similar way)? Remember that people will store your resume and you need to make it easier for them to find it.

Have you included a way for them to contact you and get an up-to-date version?

There's a lot more that could be said, but do apply your UX principles to the experience that the hiring person is having!!!

I've broken this list up into Website pages and case study pages and good and bad examples of each - because, whilst you can learn from the best, you can also learn what not to do from the worst...

Good Portfolio Websites & Homepages

Bryn Taylor

Platform - Webflow

Type of folio - Product Design

Why it's good

Bryn has a sophisticated yet simple sense of visual design, the site is well structured and I think a recruiter would find this a joy to read since it's text minimal yet communicates quickly. The subtle animations for example on mouseovers, are on-trend yet not overwhelming - after all he's not a front-end developer! The 'Copy Email' button and slow moving logos are a nice touch. The case study pages are also great and clearly show the project essentials

He's used a special font called 'Neue Montreal' which shows intermediate to advanced Typography skill.

What could be better

In my opinion the homepage and case study page headers could be more engaging or contextual to show design accomplishment, and the text under the 'Skills' section is way too large, but really it's hard to find much that could be improved.

Good Case Study Pages

Rapchat Music App

Platform - Behance

Type of folio - Product Design (UX & UI)

Why it's good

A great example of animated video files to show the product experience and also some animated infographics (scroll down to see them)

What could be better

Noting can really be improved in terms of presentation. I read some not so great reviews about the real app on the app store, so either the coding or the design is lacking in some way.

Anna Vliss - Physio Guru

Platform - Behance

Type of folio - UX

Why it's good

Anna is a great communicator and stands out with her great sense of visual design. The Structure of this case study is also excellent. I was Anna's tutor at Career Foundry

What could be better

Other than the clickable prototype embedded into the page*, there's not much 'bling' - She could have included a video talk-through or some animation. She has a nice gif animation at the bottom, but that would have been better at the top as a header animation, since readers don't always read right down.

* I always recommend that the first screen on any clickable prototype has some automated animation which helps to 'spell it out' to the viewer that they can click around to experience the design

Dirkjan Kraan

Platform - Webflow

Type of folio - UX (Although this project is a Design System)

Why it's good

Not all is good, but the project page is simple and he clearly states the key results in the top paragraph

In another project at https://dirkjankraan.webflow.io/portfolio-pages/b2b-self-service-platform - this UX project is written in very clear language about the research he does but is still not too wordy

Examples of the Best Bling - A.K.A Grabbing Attention!!

Nil Mladin's Animated Video Talk-Throughs

Platform - Vimeo & Youtube

Type of folio - UX & UI

Why it's good

Nil' is a UX bootcamp student and in his video's he clearly shows his skill in talking through his design with great audio visual and video editing skills. Whether his concept and work are good or not, the fact that he can communicate so well is impressive and a very necessary skill in the world of Product Design and UX. These kind of videos can and should be placed high up on the case study page because they quickly give context of the project and reduce reading time for busy recruiters and hiring managers who do apparently get sick and tired of reading text (in fact I believe most don't bother at all)

Ankita Sahasrabudhe's Animated Click-Though's of Individual Feature Groups

Platform - Wix

Type of folio - UX

Why it's good

Without needing to click anything, the viewer is shown the interface and what happens as the user progresses through. Each click-through video features one specific feature.

What could be better

I think this student could be focussing on improving visual design skills right now

Bad Portfolio Websites & Homepages

Bojan Novakovic

Platform - Dribbble

Type of folio - Everything apparently

Why it's not great

This designer only uses dribble to show work, yet claims to be a product designer! Dribble only allows 'shots' which only show UI in small boxes, so product or UX design can't be communicated properly - despite that he apparently gets jobs which is another proof of what people call the 'dribbbleisation' of design

** The 'dribbbleisation' of design - This trend emphasises aesthetics and superficial visual appeal over functionality or real-world usability.

Alex Lakas

Platform - Not known, possibly hand coded in HTML

Type of folio - Everything

Why it's not great

This looks like a photographers website, not a designers website. The main thing on view are photographs and some very basic and unimpressive user interfaces.

https://www.pascalstrasche.com/#top - The visual design looks dated and nothing unique about him stands out. He calls himself a Product Designer, yet on the first (https://www.pascalstrasche.com/website-design-and-webflow-development) project he did only visual design and no user research or user testing was mentioned.

https://www.vickymarch.com/ - everything looks like a template, including the work
https://www.vickymarch.com/work/studystream - This project has little to do with UX and is mainly a visual re-design, she has not even done user research or testing, and has redone the site map based on her own opinions - this is not UX because users were never asked

https://www.ljubomirbardzic.com/ - same thing only visual design, UX not done

Bad Case Study Pages

Coming Soon

Name with link

Platform - Behance

Type of folio - UX

Image with link

Why it's not great

_______________

Looking for a Portfolio Review?

If you need to improve your portfolio, perhaps to land that dream job, send me an email...

Share this on:
DESIGN INSIGHTS (FREE)

Learn Design by Email

Learn by watching me apply key design principles
1 email per week with videos & free resources

Unsubscribe anytime. See a sample

Start Learning Right Now!

Visual Design
Principles Course

Learn to use Typography, Colour, Layout, Whitespace, Alignment and Hierarchy with a UX focus
Enrol to see free lessons

Top 50+
UX & UI Resources

Free images, icons, fonts, Illustrations, the best tutorials, books & more!
Filterable list
Yes please!

Embed a clickable prototype into any page

Show off your UX
Allow viewers to click around
your UX design

Design book

Coming Soon

All the Visual Design Principles in one book with examples. Learn, refresh or hone your design skills to create stunning designs - Available as e-book for €7.99

Leave your details to hear when it's ready!

Discuss your learning goals
...or ask a question
Book a time
Received!
A reply will be with you shortly!
Form submit error - please email info@waveweb.design instead
Artfuly logo
AboutSend an Email
Follow Wave Web Design on LinkedinFollow Artfuly on YoutubeFollow Artfuly on Tiktok
PrivacyImpressum