Listen to the story
How do you tackle different UX design challenges?
What’s your approach to solving problems? Give the viewer an understanding of how you work. And all of these insights should come gift-wrapped in a visually engaging, user-friendly package. The viewer should know exactly who you are and what you do within seconds of landing on your UX design portfolio. Craft a compelling headline that provides all the most important information at a glance. Be sure to include a meaningful introduction. Keep it compact yet high-impact on the home page, and then provide more detail in a dedicated “About” section. Try to inject a bit of personality into the visual design. Going through a process to solve a user problem.
For each project, explain what you did, why you did it, and what you learned as a result. When showcasing your UX design work place your process front and centre. Include screenshots of a beautiful end product, but make sure you’ve documented your process in detail first. Showcase your process, not just the finished product. Write about the methods you used, what you learned along the way, the challenges you came up against, and how you solved certain problems. Each case study should tell a complete, logical story. Visual and textual storytelling should work together to demonstrate your UX design process. Supporting your case studies with visual artifacts really brings the project to life.
Every time you work on a new design project, document your process: take screenshots of user research surveys you send out, snap photos of your wall covered in Post-it notes after a heavy brainstorming session, and keep hold of your wireframes as they progress from low to high fidelity. When it comes to adding a new case study to your portfolio, these artifacts will help you tell a logical story. For each step you go through in your case study, include a photo or screenshot of how it looked in action.
The content of a UX design portfolio
UX design portfolio should demonstrate how you identify and tackle a variety of user problems. Thoroughly framing the problem and describing your approach to solving it. UX designers are problem-solvers, so make sure your portfolio reflects that. Start each case study by framing the problem in detail, and second, frame the problem in a way that conveys empathy. Above all, think about the language you use. Don’t just state the problem; relate to it and put some emotion behind it! Refer back to the original problem throughout—even when you progress to the solution.
Your UX design portfolio should demonstrate your approach to problem-solving. Kick off each case study by framing the problem in detail, using emotive language to convey empathy. Refer back to the problem throughout. Unsolicited redesigns are an excellent way to build up your UX portfolio and demonstrate your initiative as a designer. As always, frame the problem, document your process, and tell a good story—and don’t forget to include a disclaimer.
You can demonstrate how your work brings value to the business. Set a business or product goal at the start of the case study. What do you hope your work will achieve? This is separate from the user goal, but the two should go hand in hand. Establish a few success metrics before you begin. How will you measure the impact of your work? Use your portfolio to demonstrate how you add value to the business. Set business goals and success metrics for each case study, and, where possible, include data and tangible outcomes. Selecting a handful of projects that best showcase who you are as a designer If you want to brand yourself as a versatile, adaptable designer, feature as diverse a variety of projects as possible. If you see yourself as a specialist in a certain industry, highlight the projects that demonstrate this. At the same time, don’t overwhelm the viewer. Choose a good enough variety to showcase your skillset, while keeping it minimal enough so as not to overwhelm the user. If you’ve got lots more work you want to showcase, add a separate section.
Provide plenty of background context—this works wonders when telling the story of each case study. State your role on each project. What were you commissioned to do? Where did you fit into the overall team? Listing your teammates is a nice touch; UX design is a highly collaborative field, so it’s important to demonstrate individual value while acknowledging that the end result was a team effort! Provide as much context as you can. Set the scene with a brief backstory before launching into your problem statement. This includes stating your role on the project and, if necessary, who you worked with.
Your UX design portfolio is not just a website—it’s part of your personal brand. Just like your case studies, the overall aesthetic of your portfolio should tell a story about who you are as a designer. Your portfolio website should reflect your personal brand, and visual design plays a crucial role. The best portfolios offer the full package—detailed case studies wrapped in stunning UI design and flawless UX—so aim to tick all the boxes! Keep in mind, there’s no “right” way to build a portfolio.
Every designer, recruiter, and client have a different idea about what should be featured in a UX design portfolio. Explore UX Design Portfolios How does the portfolio establish the designer’s personal brand? (What type of first impression do the designer make?)
As a designer, your personal brand is how your personality, unique skills, and values intersect with your public persona. Your brand is the first impression you make! A personal brand should clearly demonstrate who you are as a designer and what makes you interesting. Is the navigation simple and intuitive? The navigation is the way users get from page to page on a website. Users should be able to reach the homepage from any part of your site. And your navigation should lead them from one project to the next. It should also be easy for users to navigate to a contact page that includes an email address, a copy of a resume, and links to other professional social media accounts.
Does the portfolio website go beyond the template? Although a website builder’s pre-designed layouts make it easy to get started, you need to go a step further. Portfolio designers can customize their websites to align with their brand and the story they want to tell. For example, designers should remove the text that comes pre-loaded in the template and replace it with their own content. It’s also helpful to register their own domain name, so their website’s address doesn’t contain the name of the website builder. Does the portfolio website include a diversity of projects? Each portfolio should have 3-6 projects that demonstrate the designer’s skills. Note whether each portfolio contains a diversity of projects. Is the site housing the portfolio responsive? Responsive means the on-screen appearance of the website adjusts based on the user’s device.
So whether someone engages with the website on a desktop computer or mobile phone, they will have a positive experience. A portfolio showcases a designer’s work and skill in the field, as well as their understanding of UX design principles. Showcasing an understanding of design principles helps designers find work, and it’s a great way to start feeling like a member of the UX design community. Portfolios also demonstrate the designer’s skills during the job application process. These builders feature user-friendly WYSIWYG editors, offer tutorials and even some templates to start from. WYSIWYG is an acronym that means: what you see is what you get. Common website builders include Squarespace, Wix, Webflow and Google Sites. You’ll personalize your template to convey your unique style, communicate the value you bring to the UX design industry, and showcase your designs.
Choose the Right Platform for You
The website builder that best meets your unique needs: Do I know how to code, or should I use a website builder that doesn’t require coding experience? Is it a low-cost or free option? Does it offer customizable templates? Does it provide flexibility and complete control over design? Use your name in the domain to make your portfolio site professional, clear, and easily recognizable. Your portfolio is the ultimate statement of your work as a UX designer.
Plan Your Portfolio Website
Think of your portfolio as a place to show off your ability to create a great user experience! The layout of your portfolio website should highlight the most important parts of your work that you want to showcase. Aim for a clean design that makes it easy to find and move through content, especially your work samples.
List of Elements to Include in Your Portfolio Website: Name and personal logo (if you have one). Clearly list your name at the top of your portfolio website to help visitors easily identify whose work they are reviewing. If you have a personal logo, like a simple icon or a stylized version of your initials, you should consider including that alongside your name, too.
Navigation menu
Navigation is how users move from page to page on a website. Keep the navigation on your portfolio website simple and easy to follow. Your navigation titles should be clear and accurate. Work samples. The focus of your portfolio website is to highlight samples of your UX design work. Be sure to choose a layout that will let work samples shine! “About Me”. Plan to create a page on your portfolio website where visitors learn more about your interests, experiences, and passions.
Contact information
On your portfolio website, it’s helpful to provide information about how people can contact you. For example, you should provide your email address, a link to your resume, and links to your professional online profiles (like LinkedIn), so visitors can contact you about potential job opportunities. Wherever possible, try to use professional-looking naming, like an email address of [YourName]@gmail.com. You can plan to include your contact information in a number of different parts of your portfolio website, like a dedicated page or across the top, bottom, or side of your portfolio website.
Colour scheme
The colours in your portfolio can provide a more engaging user experience, and should reflect your personality and personal brand. We suggest selecting a small set of colours that work well together. Try selecting one primary colour and one accent colour that work well together. The goal of the colours is to support your content and personal brand, not distract from it. Map Your Website’s Content A quick sketch of what your portfolio website could look like can give you a better idea of the right template to use from a website builder. All you need is a pen or pencil and paper to sketch out a basic layout of important pages.
What will you include on your portfolio homepage?
What elements, if any, do you want to include together? How many pages overall will you need, and what should you title each page?
Tips For a Good Portfolio
Establish your personal brand. Your personal brand is the way in which your personality, unique skills, and values as the designer intersect with your public persona.
Tell a story
Tell a story about your design process with a beginning, middle, and end, start with an introduction of the design problem. Then in the middle, show the process you followed to complete the designs, like user research, sketches, and wireframes. Then end with an image of the polished design, and an endorsement from your client or another person whose opinion you value)
Be concise
Use minimal text to describe your work, and highlight the key insights that help inform your decisions. If you need to explain your work in more detail, add links to other pages or PDFs. Keep your navigation simple and intuitive (the navigation is the way users get from page to page on a website). Go beyond the template: Customize your website to align with your brand and the story you want to tell. You should demonstrate your design skills and provide a good user experience.
Include a diversity of projects
You should have three to six projects in your portfolio that demonstrate the range of your skills. Feature case studies. A case study leads the user through your design process, from the beginning to the end. Your portfolio should feature case studies, not just mockups of design ideas. Make sure your website is responsive (responsive means the on-screen appearance of the website adjusts based on the user’s device). Test your website. Test your website on different devices to make sure it functions properly.
A Case Study Answers These Questions: What was the problem you were trying to solve? What process did you follow? Where did you succeed or fail? What insights informed your design decisions along the way? What was the ultimate solution? Why do you feel that solution was the best? When Describing Case Studies: Include Things Like:
- The project’s name and duration Your role on the design team, including your personal contributions to the project.
- The project’s goal.
- The research that was conducted.
- The intended audience.
- Any sketches or wireframes User testing results.
- The final design.
- A conclusion about what you learned in the process.
Be careful not to share any proprietary information or break a nondisclosure agreement, if you have one. A nondisclosure agreement is a contract an employee might sign when working with a business, in which they agree not to share sensitive information, like designs in the process of being developed.
Best Practises to Start to Create Your Portfolio Website:
- Use a portfolio template option.
- Choose a layout option that’s right for you.
- Choose a URL name for your portfolio website.
As you start working on design projects, document everything that could be a potential portfolio artifact. This includes taking photos of your notes, sticky notes, wireframes, prototypes, and even you and your teammates working together.
Tips
For Documenting Your Process Before You Begin Your First Design Project: Scan anything on paper with a printer or scanner. For example, scan your written notes and paper sketches. You should avoid taking photos of paper since the quality of the photos is usually pretty low. (Note: this does not apply to clusters of sticky notes, which are easier to photograph than scan.) You can use an actual scanner or a scanner app on your phone, which allows you to take a picture of a document and turn it into a digital scan. Screenshot wireframes and prototypes. When you create designs using digital tools, like Figma and Adobe XD, capture that work.
Get permission. If you’re working on a design project for a client company, ask for their permission to showcase the project in your portfolio as early as possible. Some companies may have restrictions on what you can share publicly and have nondisclosure agreements in place for their projects, so be careful and thoughtful!
eLearningworld Europe Services
SOE PublishingLab – Develop and design Your interaQtive Books
Storyteller On Demand – Let us develop and design your interaQtive book
360 Degrees Comics – Coming soon
Opens in a new tab