10 Best UX Portfolios and What We Can Learn From Them
A UX portfolio is a must for any designer in the industry. It’s your chance to present your work at its best and provide in-depth case studies that expose your creative process and reflect who you are as a designer.
Whether you’re a freelancer or are looking for a full-time job, potential clients or employers will almost always expect to see a polished UX design portfolio. Without one, they might not consider you for the position. That’s why you should take some time for introspection, harness your best web design skills and create an impressive portfolio website to showcase your work.
Translating your complex, thorough workflow into a visual format can be a challenge, especially if your work revolves solely around UX. However, there are plenty of ways to tell your story and incorporate visual assets.
For ideas on what to include in your portfolio, how to structure it and much more, take a look at this selection of UX portfolio examples, all created on Wix. Plus, we’ve added a list of best practices to take into account when creating your own UX design portfolio:
01. Sophie Brittain
Digital and branding designer Sophie Brittain has crafted an inviting, spacious design on her UX portfolio. A visual of brightly colored building blocks appears at the top of her homepage. This motif repeats throughout her portfolio, tying together the various pages and helping to define a distinct personal brand.
As you scroll down the page, you’ll notice that her website menu stays fixed to the screen, providing convenient navigation throughout her portfolio. In addition, the shift from a white background to a bright blue one on the ‘About’ page makes for a nice surprise and a refreshing browse, while remaining aligned with the rest of Sophie’s design.
Key takeaway from Sophie Brittain’s UX portfolio
Make it clear who you are and what you do. It’s likely that prospective employers and clients will be looking through dozens of UX portfolios - and yours is just one of them. That’s why you should make your field and speciality instantly explicit.
Utilize the top fold of your website to introduce yourself and briefly clarify your areas of expertise.
Sophie has done just that, stating her name and creative discipline within the field of design. With large typography and plenty of whitespace surrounding her introductory sentence, site visitors certainly won’t miss this essential piece of information. She’s also added a friendly “hello!” and a personal touch in the form of custom icons. Together, these details subtly convey her personality, while explaining who she is and what she does.
02. Lital Karni
One of the best portfolio websites, this is no doubt the work of a professional UX designer. An energetic combination of colors is the first thing you see on Lital Karni’s portfolio, making the top fold appear both sophisticated and playful.
The layout on the homepage is simple, with an organized fullscreen grid layout. Lital has carefully matched a different background to each project, while also paying attention to the overall look on the homepage.
She has also created a custom logo design that stays fixed to the screen and is conveniently linked to her homepage. Thanks to its subtle glow, the letterform logo remains visible against any background color.
Key takeaway from Lital Karni’s UX portfolio
Be easily contactable. After all, the idea of your personal website is to draw attention to your works and, ultimately, to get hired. Make it easy for employers or clients to get in touch by including all the necessary contact information in an easy-to-spot location. Consider adding your email address, phone number and links to your social channels.
In terms of where to place your contact information, there are a few possibilities: you can create a dedicated contact page or add your details to your website footer or ‘About’ page. You can also go for all of the above.
Lital has used a combination of techniques. A ‘Let’s Talk’ button is fixed to the screen as you browse through her portfolio, tempting site visitors to reach out. Clicking it will take you to a contact form at the bottom of the page. On top of this, she’s added her email, phone number and social links on her ‘About’ page, ensuring that visitors have no problem getting in touch.
03. Saloni Joshi
Product designer Saloni Joshi has gone for a straightforward structure on her UX portfolio. The spacious top fold of her homepage is dedicated to a short, introductory paragraph and links for getting in touch. Further down, you’ll find her showcased projects.
Saloni has made sure to include a thorough case study for each of her completed projects. These serve to present Saloni’s range of skills, as she walks you through her work process, starting with an overview of the project. By clearly indicating her role, the main mission and the timeline, visitors can easily understand the essence of the project.
She has also covered the key elements of any UX design process, from ideation to wireframes and prototypes, UX research and more. All of this is presented alongside images and concise, explanatory text.
Key takeaway from Saloni Joshi’s UX portfolio
Clarify your current employment status. When people are looking at your design portfolio, they’ll want to know what your current situation is. Are you a freelance designer available for job opportunities or do you have a full time job?
Saloni has included this essential information at a strategic spot - the top fold of her homepage. Prospective clients and employers can instantly see her job status, without having to search elsewhere. She’s also added a few words about her previous positions. Visitors who want to find out more can check out her CV that is conveniently linked to in the menu.
04. Priyanka Goyal
Product designer and illustrator Priyanka Goyal’s eye-catching portfolio is hard to ignore. The playful combination of the illustration and vivid orange background is balanced out by an elegant white border. This clean space makes for the perfect spot for the site’s navigation elements, such as the social bar, hamburger menu and logo.
Further down on Priyanka’s homepage, the asymmetrical layout forms an engaging experience as you scroll to view her various works. For each project, she’s chosen one key image to showcase, placed on top of a colored background. By sticking to the same style for each of these backgrounds, she’s crafted an overall cohesive look.
Key takeaway from Priyanka Goyal’s UX portfolio
Reflect your personality. Visitors to your UX portfolio are here to get to know you. Other than showing off your works and writing up an ‘About Me’ section, try to also inject your personality into the rest of your visual elements and written content.
The illustration at the top of Priyanka’s portfolio depicts her character, as does the bold color palette. She’s included a heart-warming sentence - ‘Make yourself at home, there’s some lemonade in the fridge’ - that gives us an insight into her personality.
05. Evie Cheng
Everything about UX researcher Evie Cheng’s portfolio screams professional. She’s ticked all the boxes, from her on-point introductory sentence to the straightforward website navigation and the decision to present just four of her best projects. But the most impressive aspect of her portfolio is the case studies.
As a UX researcher, Evie’s work isn’t strictly visual. However, she’s managed to showcase her projects in a thorough and engaging manner. As well as an image and title to set the tone, each case study starts off by explaining the challenge that the team was facing. Numbering each section for added clarity, Evie goes on to explain the research process, from user interviews to competitor analysis, and eventually the team’s findings and conclusions.
She presents the proposed designs alongside the originals, coupled with eloquently written explanations. To finish off, the ‘What’s More’ section indicates that the process is ongoing and that Evie has a grasp on the full lifecycle of a product, as opposed to focusing on just this one project.
Key takeaway from Evie Cheng’s UX portfolio
Include explanatory images in your case studies. While Evie is clearly also a talented writer (making sure to link to her articles in her website menu), she utilizes visuals to walk visitors through her work process. Adding descriptive images into your case studies not only makes the text more readable and inviting, but can also help site visitors better understand your process.
Evie has included “before and after” shots of the interfaces, as well as images of surveys, paper prototypes and cards that her team used throughout the research. Real photos of her and her team at work help break up the text and make the case studies feel more personal.
06. Brittney Johnson
Currently working as a product designer, Brittney Johnson is a multidisciplinary creative. Her skills in graphic design and illustration are immediately apparent in her portfolio, thanks to the animated illustration on the homepage.
Brittney employs an engaging, interactive experience to offer visitors a brief overview of her abilities straight from her homepage. When hovering over the relevant text, an image from each of her projects pops up on the other side of the screen. She has also added a hover effect that makes the text turn a different color, in relation to the background shade of each image.
In fact, Brittney uses color generously throughout her portfolio, making for a fun and memorable design. The vibrant tones also reflect her personality, adding a sense of playfulness to her highly structured website layout.
Key takeaway from Brittney Johnson’s UX portfolio
Present your process, and not just your final product. No one knows as well as UX designers how much goes into each project. The final result is just a tiny proportion of the project as a whole. On the way, there’s the extensive research, the user testing, the iterations, the prototypes, and so on.
Showcasing the full process you and your team went through will shine a light on who you are as a designer, how you make decisions and what abilities you bring to the table.
Brittney does a fantastic job of presenting her work process. While the final result is presented clearly on the right-hand side of the screen, she’s used a dropdown list to section off her process into digestible chunks. Instead of overwhelming site visitors with extensive text, this solution shows she’s considered their browsing experience. She succinctly covers everything from the initial goal, to the research, user personas, findings and, lastly, the final design.
07. Omar Alamrani
UX/UI designer Omar Alamrani has added plenty of whitespace on the top fold of his website, putting the focus on his name and the succinct, introductory sentence below. He’s also added a favicon to his website, making it stand out and easy to spot amongst other open tabs.
Each of his case studies is thorough and presented in an organized way. A progress menu on the right-hand side of the screen helps visitors navigate through, enabling them to easily get the gist of the project. He shows off his range of skills, from his ability to carry out analytical research to his UI designs.
Lastly, he’s added a section for reflection and thoughts about the future of each interface. This helps indicate to site visitors that he’s a keen learner and takes each project seriously.
Key takeaway from Omar Alamrani’s UX portfolio
Use clear microcopy. Product designers are familiar with the importance of well-written microcopy in UX. Just like the structure and design of an interface, the text also plays a huge part in helping users navigate and understand the product.
Your UX portfolio should be no different. Go for clear, to-the-point microcopy that will enable site visitors to easily understand your website and browse through it seamlessly. You can always inject a drop of humor or personality into your microcopy to help your portfolio stand out, but make sure you’re keeping it legible.
If you’d rather opt for simplicity, use clear and straightforward text like Omar has done in his website menu and contact form. This way, there’s no doubt that your audience will understand your intention.
Multidisciplinary designer Pondsuda June Saelim greets site visitors with an engaging website animation on her homepage. It not only attracts attention and distinguishes her portfolio from others, but also doubles up as a way to introduce herself.
Instead of the classic menu, Pondsuda has broken down her menu, placing each item in a separate corner. She has utilized this structure to add various hover effects on the menu items. For example, if you’re on a particular project page, hovering over the menu will open up a list of her different projects, organized into disciplines. This gives visitors a clear overview of her projects and areas of expertise.
Another nice touch is the interactive game that pops up when hovering over the ‘R’ in the menu. Visitors are invited to play around with the letters of Pondsuda’s name, making for a surprising addition to her UX portfolio.
Key takeaway from Pondsuda June Saelim’s UX portfolio
Consider adding your CV. While it’s not a must, including your design resume in your portfolio can help potential employers or clients get to know you better. You can place all the most important information there, without cluttering your website.
Pondsuda has added a link directly to her CV in her navigation menu, making it easily reachable. When creating a design portfolio, place your resume either directly on your ‘About’ page or as a downloadable file.
Instead of showcasing her works on the top fold of her website, UX designer Mathilde Amitrano has chosen to display a fullscreen video of a mountainous landscape. Together with a quote that expresses her perspective on design, she gives site visitors a peek into her character.
Mathilde has evidently considered the user experience of her website. The menu stays fixed to the top of the screen and she’s also added a ‘Back to top’ button, enabling visitors to browse through her portfolio fluidly.
Key takeaway from Mathilde Amitrano’s UX portfolio
Mention the basic details of each project. Your projects’ case studies should walk visitors through the process, but don’t forget to start off with some dry information. This can vary, but should generally include what your role was within the project, who you collaborated with, when the project took place and, of course, who the client was.
Mathilde’s in-depth case studies cover the full process, along with images, photos, graphs and other visual aids. She has made sure to clarify the timescale of each project, as well as which team members were involved and whether the project remained in the ideation phase or was carried out.
Product designer Michaella (Miki) Twersky’s portfolio has a classic look, while simultaneously conveying her unique personality.
The spacious design and large, introductory text is often seen on UX portfolios, but Miki has added her own twist to this familiar layout. Not only has she merged two different font styles together, but has also reworded a well-known phrase, urging visitors to take a second look. The comic addition on her website’s footer also serves to reflect her personality and get visitors to linger a little longer.
Finally, Miki has added a hover effect on the images on her homepage. The images are all in black-and-white, but when hovered over, they come to life using color. This helps visitors focus on the specific project they’re looking at, improving their browsing experience.
Key takeaway from Michaella Twersky’s UX portfolio
Only include your best work. Your UX portfolio is your chance to show off your best skills, which is why you should make sure to only include the projects you’re proudest of. There’s no point drawing attention to pieces you’re not keen on, or projects that don’t reflect the type of work you’d like to be doing in the future.
Michaella has included a few select projects in her portfolio. Each one is of a consistently high quality, accurately reflecting her capabilities as a designer. She has also added a ‘Cache’ section, where she shares additional projects that don’t fit under the main projects page. This shows off her full range of abilities and interests, like illustration and more conceptual pieces.
UX portfolio best practices
After drawing inspiration from fellow UX designers, it’s time to gather your takeaways and craft your own online presence. As well as taking into account essential design portfolio tips, here’s a summary of what we can learn from this selection of UX portfolio examples:
Make it instantly clear who you are and what you do.
Be easily contactable.
Clarify your current employment status.
Reflect your personality.
Include explanatory images in your case studies.
Present your process, and not just your final product.
Use clear microcopy.
Consider adding your CV.
Mention the basic details of each project.
Only include your best work.
Text Dana Meir
Featured Image Pondsuda June Saelim