📖Portfolio - Step-by-Step Guide

Step-by-Step Portfolio Guide

Here is some information to help guide you in constructing your portfolio.

Portfolios are composed of case studies that demonstrate your projects and learning experiences throughout those projects as stories. The best-articulated case studies will generate interest from recruiters or technical leads. Let's see how to make an attractive case study.

There is no single way to do it, as there are a variety of formats and styles. However, there are best practices and a basic structure that top-rated portfolios follow.

Step 0: Platforms 💻

Choose the platform that suits you best, and make sure to open an account or create your workspace for the portfolio.

Platform	Link	Why choose it
Behance	https://www.behance.net/	Behance is a leading online platform for creative professionals to showcase their work. Free plan available.
Wix	https://es.wix.com/	A classic site builder. Has a free version.
Dribbble	https://dribbble.com/	Dribbble is a well-known platform among designers. Paid only.
Figma	https://www.figma.com/	Free version available.
Adobe Portfolio	https://portfolio.adobe.com	Simple, fast, and makes it hard to get things wrong. Not free!
Notion	https://www.notion.so/	People primarily know Notion as a versatile productivity tool. However, its flexibility also lets you adapt it for building portfolios. Free plan available.

Step 1: Portfolio Skeleton 📑

Start with levels of fidelity

Before creating your portfolio in any place or format, first, define the basic structure of the content and the outline. The outline will help you iterate several times on the structure you like most without worrying about how it will look. It's like your portfolio in low fidelity.

Here is an example structure:

• "About me": A short descriptive paragraph about who you are and a photo where your face is visible.

• Projects: Case 1, Case 2.

• Contact: Email, LinkedIn, Phone, CV.

You can be as detailed as you want at this level regarding content definition. Once you have this structure, you can start choosing formats and move to medium fidelity.

Your portfolio's medium fidelity would be a first prototype in the desired format or platform with the content placed and stock images, but without final branding. High fidelity would be that same prototype iterated with your images, resources, interactions, and final branding.

Pro Tip 🤟: Think of your portfolio as any other UX project, advancing through levels of fidelity, creating an MVP or first version of your portfolio. This mindset will allow you to progress without being paralyzed by the idea of a perfect portfolio. Remember, the portfolio is a living design, constantly changing.

Lifesaver 🆘: If you feel blocked, check your UX technical Book section on how to create the site skeleton with AI assistance.

Step 2: Build Your First Case Study 📝

Choose your projects wisely

Select projects where you had significant participation and performed tasks that impacted the final solution. It's also important to choose projects with ample information to showcase the entire process, not just a small part that doesn't tell the recruiter much about your design process.

Emotional factors are also important. Choose projects you were excited to participate in, as this sentiment will reflect in how you write the story. At the end of the day, you are the protagonist of your portfolio!

Focus on one case at a time to ensure completion.

Give your project a title

A title can motivate your reader to dive into your case study or ignore it. Catchy titles that provide context are essential for generating curiosity.

• Great 😁: User Research for Payment Gateway in Delivery Hero's Mobile App

• Basic 🙂: User Research for Delivery Hero

• Poor 😐: Delivery Hero

Base Structure for Creating Case Studies:

1. Introductory Summary of the Project

   • A brief overview of the company, project, or product.

   • Mention your role and the skills (both technical and soft) used, providing quick context for the reader.

   • It's a good idea to include the project's timeline (e.g., July 2022 - October 2022).

2. User Personas

   • Who were the users?

   • What problems, motivations, behaviors, and demographics did they have?

3. The Process

   • This is the core of your portfolio, where you detail your project.

   • Use storytelling to make the content more attractive and demonstrate your communication skills.

   • Structure: Introduction, Challenges, and Conclusion.

How to Use Storytelling for Your Case Study:

• Introduction:

  • Describe the initial situation.

  • What was your role in the team?

  • Why did this project need to happen?

  • What were the objectives and HMW (How Might We) questions that started the project?

• Challenges:

  • What challenges did you encounter?

  • Emphasize iterations, decision-making, and difficulties.

  • Mention project constraints and the evolution of the solution.

• Conclusion:

  • Describe the final solution and why it was chosen.

  • How did it improve users' lives?

  • How did the company benefit from this solution?

Pro Tip 🤟: Imagine you are a detective discovering and solving the problem like Sherlock Holmes.

Supporting Resources

• Include visual resources like journey maps, affinity maps, wireframes, prototypes, backstage photos, illustrations, or short videos.

• Ensure the images are legible and relevant, and provide links to detailed resources if necessary.

Conclusion or Learnings

• Summarize your unique analysis process and how you navigated uncertainty to find a solution.

• Adding a conclusion about your major learning during the project adds a special touch.

Step 3: Visual Style 🎨

Include Graphic Resources

• Use images, videos, gifs, illustrations, and icons to make your case study engaging.

• Ensure these resources communicate your message effectively, are of good quality, and are not too heavy.

Hierarchy of Information

• Draft the hierarchy of your case study content from general to specific.

• Use different sizes, weights, colors, and fonts to structure your content.

Document UX Resources Frequently

• Save screen captures, images, videos, and texts throughout your project to build your portfolio without starting from scratch.

• Organize these resources in a folder on Drive, for example.

Add Your Personal Touch

• Choose a color palette that represents you.

• Include a photo and a brief description in the "About Me" section.

• Simple branding that communicates who you are is sufficient.

Pro Tip 🤟: Watch a video on recommendations and tips for building your UX portfolio.

Step 4: Self-Diagnose Your Portfolio

• Use the UX technical Book section to verify everything is in place.

Step 5: Submit Your Deliverable 📥

• Upload your portfolio link.

• It doesn't have to be 100% complete to submit or for your tech interview; an MVP is sufficient.

• Continue working on it in subsequent modules, especially the last one.

---

Help us improve the content 🤩

You can leave comments here.