Literature on Interactive Design Portfolios

Here’s the entire UX literature on Interactive Design Portfolios by the Interaction Design Foundation, collated in one place:

How to Write UX/UI Design Case Studies That Boost Your Portfolio and Get You Hired

The term “case study” sounds a little boring, doesn’t it? What if, instead, it were called a “design story”? Well, that’s exactly how you should think of it! Approach your UX/UI design case studies like stories, not just a list of tasks you completed. You will not only make your portfolio easier and more enjoyable to create, but you will engage the reader and leave them wanting more. Give hiring managers structure, intrigue, and emotion as you tell your design successes. You’ll find yourself preparing to interview for your dream job in no time.

UX (user experience) design projects can be messy. Deadlines change, project goals shift, and new findings can fundamentally alter design specifications. Stories will give your past experiences form and organize your case studies. In this video, Stephen Gay, UX Design Lead for Google One, explains why you should include narrative in your UX/UI design portfolio:

Show Hide video transcript

Transcript loading…

When you arrange your experience into a meaningful sequence of events, recruiters will understand the path you took to the final product. The path is the juicy part of your case study—it shows how you make decisions, problem-solve, and work with others. Combine structure with storytelling elements like emotion and conflict, and your design stories will come to life.

The UX/UI Design Story Blueprint: How to Structure Your Case Studies

Before you begin weaving tales, it’s important to create a structure for your case studies that keeps you on track as you write.

Your case study structure has three main goals:

To showcase your design process and your solutions.
To keep the reader engaged as you guide them through your design projects.
To make it as easy as possible for busy hiring managers to navigate your case study.

Therefore, your goal is a logical, well-organized, and easy-to-navigate structure. The best way to achieve this is to follow the design process or methodology you used, such as design thinking, plus a hook and conclusion. Morgane Peng, Managing Director and Head of Design at Societe Generale CIB, explains what to include in your case study in this video:

Show Hide video transcript

Transcript loading…

A typical structure for a case study might be:

The hook
Research
Sketches and wireframing
Prototyping and iteration
Outcomes and lessons learned

Each section should include a combination of text and media (images, video, interactive elements, etc.). A good benchmark is 60%-80% text and 20%-40% media.

Depending on the message you want to convey in your case study, you might focus on one area in particular. For example, if you want to show off your UI (user interface) design skills, you might only include the prototyping and iteration section. For another project where you’re proud of the research you did, you could make this the primary section.

However, regardless of your project, you should always include two sections: the hook and the outcomes and lessons learned.

The Hook Area

The purpose of the hook is to immediately grab attention and entice the reader to read on. Your hook should convince hiring managers they’ve made the right choice by opening your case study.

To craft a hook that potential employers can’t say no to, make sure you include these elements:

The key characteristics of your project:
- The type of project, e.g., a school project, client project, hypothetical project.
- Your role, g., UX Designer, Product Designer, User Researcher, UX Writer
- Your contribution, e.g., checkout flow, search optimization, information architecture
Whether you worked solo or in a group, and how you collaborated with others.
The design approach and methodologies you used to solve challenges and why they were effective. For example, design thinking, agile, lean UX, etc.
A preview of the work, such as screens, videos, or prototypes, to capture attention early on.
An introduction, or “exposition,” that sets the scene for the rest of the case study (more on this later on).

Where your case study differs from a typical story is that you should include the results of the project before the full case study begins. Why? Hiring managers are busy people and may only have allocated five minutes to review your whole portfolio. If you show them the results first, they will be more inclined to run over their time limit and find out how you got there. Even if the project did not reach its goals, include the positive outcomes, for example, the lessons you learned or the skills you gained.

“This might sound a bit counterintuitive … but as a hiring manager, I'd rather see the results first before diving into the case study and committing 7 to 10 minutes of my life reading it. If the preview is not available, I usually just scroll down to see it and back up to start reading.”
- Morgane Peng, Managing Director and Head of Design at Societe Generale CIB

Research Area

If your case study project followed a typical design process like design thinking, then the next part of your story will likely be user research.

When you present your research and outcomes in your case study, you show that you care about research-driven, user-centered solutions. Follow these top tips when you write about your research:

Provide context, constraints, and clear research goals.
Insights are more valuable than screenshots of interview scripts or the tools you used. However, you should still include deliverables such as empathy maps, personas, and affinity diagrams to show your processes.
Organically link your research findings and explain how they informed your problem statement and design process.
Explain the reasoning behind your research methodologies and what you learned from them. Otherwise, it may seem you just ticked off research as part of a checklist.

Sketching and Wireframing Area

Sketches and wireframes demonstrate your understanding of layout concepts, UI elements, and information hierarchy. They also show your thought processes and the journey from ideas and research insights to final prototypes.

This section is your opportunity to demonstrate the core of your design process:

Armed with research insights, how do you approach solutions for your users’ problems?
How do you collaborate in a team to generate and develop ideas?
When you face a roadblock, how do you get past it?

As for the sketches themselves, you may have created them rapidly while brainstorming, and unless you’re an excellent illustrator, they could be a little messy! Given this, it’s good practice to redraw your sketches for your portfolio. You want to make sure hiring managers can easily understand them and that your handwriting is clear.

Similarly, your hand-drawn wireframes should be well-presented. Even if you understand them, unaligned UI elements may appear as bad design. Redrawn sketches and wireframes also give you the opportunity to annotate and explain your design decisions. In this video, Mike Rohde, Illustrator, Teacher, and Designer, explains how to use sketches in your portfolio:

[[video:xxxx]]

Prototyping and Iteration Area

The prototype and iterations section is the penultimate section of your case study, where you showcase your final design. You’ll also tell hiring managers about the road your designs took, from sketches to high-fidelity prototypes.

The time has come to show off your final designs! Use this opportunity to showcase how your design process paid off. These are some tips to get the most out of this section:

Include both mobile and desktop prototypes in context if your design is multi-device. For example, show the mobile version to scale within a phone mockup.
Link to your prototype files to allow hiring managers to explore the design in detail.
Highlight any usability testing and the design changes you implemented based on the insights you found. This approach shows how you improve designs through iteration.

Outcomes and Lessons Learned

The outcomes and lessons from your project are arguably the most important part of your case study. Hiring managers want to see how you reflect on and grow from your experiences.

Finish your case studies with a conclusion. Did the project achieve its goals? If not, why? If yes, how? While the result is important, how you reflect on the project tells recruiters the most about you as a designer. Make sure you include the following as you write:

Include self-reflection and what you have learned to show growth and adaptability. Hiring managers want to see what you learned and how you’ve grown from a project, even if the project was not a business success.
Acknowledge your mistakes and the lessons learned from them, such as adapting complex interfaces for advanced users. Employers will trust you more when you admit your mistakes and show your ability to evolve and self-improve.

Take the Fast Lane with Our Case Study Template

You can get started on the structure of your case study right now with our free downloadable template. For each section, the template shows you what to include and presents a simple example:

Craft Case Studies That Get You Invited To Your Dream Interview

Secure form

Name Please provide your name.

We respect your privacy

Please provide a valid email address.

Get free UX design learning material every week

316,660 designers enjoy our newsletter—sure you don’t want to receive it?

The Narrative: Your Design Story

“Tell me the facts, and I’ll learn. Tell me the truth, and I’ll believe. But tell me a story, and it will live in my heart forever.”
—Native American proverb

Now that you have your structure, you can begin to thread your narrative through it. Consider the following as you write your case study stories.

Exposition

Exposition is where you set the scene of your story—it should be short, sweet, and fit into your hook. In your exposition, you should include:

The project background: Provide only as much background as necessary to understand the project's context. Introduce the client or company, the product, and anything else relevant. If it doesn’t add to the story, remove it!
The “inciting incident”: The earliest event in the story that sets it in motion. Instead of “My company tasked me with the project,” aim for “My company wanted to increase conversions to improve year-on-year sales figures, and identified our product pages as an opportunity for this.”
Your motivation: This is the most important part of the exposition. What motivated you to take on the project tells hiring managers a lot about you. For example, “I was eager to develop my user rapport skills, and this project required a lot of qualitative research.” This example shows you’re committed to growth and up for challenges.
The project goal(s): Where possible, use measurable goals so it is clear in your conclusion whether you met them or not. For example, “The project goal was to increase conversions by 1.5% and monthly revenue by 3%.”

If you are transitioning to UX/UI design from a different industry, you may need to provide a little more exposition. This additional information will help recruiters understand how your experiences relate to design. Find out more from Morgane Peng, Managing Director and Head of Design at Societe Generale CIB, on how to use your non-design experience in your design portfolio:

Show Hide video transcript

Transcript loading…

Emotion

Emotion helps readers relate to the story and imagine themselves in your shoes. An emotional account will always provide a better reading experience than a dry, factual account ever could.

However, emotion doesn’t mean melodramatic. Keep your writing professional, and don’t exaggerate the emotion. You want to engage recruiters—not perform a soap opera.

Look at the following two examples; which one is more engaging?

Factual:

The main finding was that the assumption that users shopped based on their weekly nutritional needs was invalid.

Emotional:

Our finding threw a giant wrench in the works. We realized our assumption—that users shopped based on their weekly nutritional needs—was completely wrong.

Emotion is a tremendous factor in decision making, as Susan Weinschenk, Chief Behavioral Scientist and CEO, The Team W, Inc., explains in this video:

Show Hide video transcript

Transcript loading…

Moments of Conflict

Conflict introduces problems that require a resolution. Conflict drives the story forward, creates emotional engagement, and shows character development.

Think about the challenges you faced in your project. How did you resolve them? Some examples of conflict could be:

A lack of accessibility that resulted in user complaints.
Conflicting stakeholder expectations that slowed a project down.
Differing opinions within the design team on how to move forward with a design.
Technical limitations of the product or platform that required design compromises.

The Climax

The climax can happen anywhere from about two-thirds of the way through a story and should be the most pivotal event. It could happen in any section of your case study; however, make sure to allow sufficient time to build up to it. If the climax happens too soon, everything after it will feel flat.

In a UX/UI design case study, you have a lot of freedom in what the climax can be. It can be a turning point, a victory, or, in some cases, a failure. However, it is important that the climax makes sense in the context of the rest of the narrative. It is followed by the “falling action,” which is where the story winds down and all conflicts are resolved.

Some examples of the climax of a UX design case study are:

The positive results of a usability test for a risky, unconventional design.
The agreement of stakeholders to implement a design after much discussion and convincing.
The discovery of a user research insight that explains a previously misunderstood low user completion rate.
The creation of an ingenious design element that solves a complex problem.

The Take Away

The best way to write a case study is to tell a story. Design stories are vessels through which recruiters can imagine a future working with you.

Structure creates familiarity and facilitates navigation. Use your design process as chapter headings and include a good balance of text and media. Include the sections that are most relevant to you or that you wish to focus on.
Storytelling helps hiring managers experience and understand exactly how you solve a design problem. Use exposition, emotion, conflict, and the climax to engage readers and make your case studies memorable.

If you enjoy the process of writing your design stories, recruiters will enjoy reading them, too. Inject color and passion into a framework that is easy to understand, and you’ll soon be getting invited to interviews!

References and Where to Learn More

Take our course to Build a Stand-out UX/UI Portfolio and Land Your Dream Job.

Learn more on how to Turn Your Non-Design Experience into Design Portfolio Gold.

Find out how to Keep Your Case Studies Confidential and Showcase Your NDA-Protected Design Work.

Incorporate Freytag’s Pyramid and Craft Compelling UX/UI Design Case Studies the Easy Way.

Discover How Aristotle’s 6 Elements of Drama Will Transform Your UX/UI Design Case Studies into Page-Turners.

Justinmind reveals case study tips from the industry in their article, How to Impress in a UX Job Interview: Recruiters & UX Managers Reveal Their Top Tips.

Images

Learn more about Interactive Design Portfolios

Take a deep dive into Interactive Design Portfolios with our course Build a Standout UX/UI Portfolio: Land Your Dream Job .

“Your portfolio is your best advocate in showing your work, your skills and your personality. It also shows not only the final outcomes but the process you took to get there and how you aligned your design decisions with the business and user needs.”

— Morgane Peng, Design Director, Societe Generale CIB

In many industries, your education, certifications and previous job roles help you get a foot in the door in the hiring process. However, in the design world, this is often not the case. Potential employers and clients want to see evidence of your skills and work and assess if they fit the job or design project in question. This is where portfolios come in.

Your portfolio is your first impression, your foot in the door—it must engage your audience and stand out against the hundreds of others they might be reviewing. Join us as we equip you with the skills and knowledge to create a portfolio that takes you one step closer to your dream career.

The Build a Standout UX/UI Portfolio: Land Your Dream Job course is taught by Morgane Peng, a designer, speaker, mentor and writer who serves as Director of Experience Design at Societe Generale CIB. With over 12 years of experience in management roles, she has reviewed thousands of design portfolios and conducted hundreds of interviews with designers. She has collated her extensive real-world knowledge into this course to teach you how to build a compelling portfolio that hiring managers will want to explore.

In lesson 1, you’ll learn the importance of portfolios and which type of portfolio you should create based on your career stage and background. You’ll discover the most significant mistakes designers make in their portfolios, the importance of content over aesthetics and why today is the best day to start documenting your design processes. This knowledge will serve as your foundation as you build your portfolio.

In lesson 2, you’ll grasp the importance of hooks in your portfolio, how to write them, and the best practices based on your career stage and target audience. You’ll learn how and why to balance your professional and personal biographies in your about me section, how to talk about your life before design and how to use tools and resources in conjunction with your creativity to create a unique and distinctive portfolio.

In lesson 3, you’ll dive into case studies—the backbone of your portfolio. You’ll learn how to plan your case studies for success and hook your reader in to learn more about your design research, sketches, prototypes and outcomes. An attractive and attention-grabbing portfolio is nothing without solid and engaging case studies that effectively communicate who you are as a designer and why employers and clients should hire you.

In lesson 4, you’ll understand the industry expectations for your portfolio and how to apply the finishing touches that illustrate your attention to detail. You’ll explore how visual design, menus and structure, landing pages, visualizations and interactive elements make your portfolio accessible, engaging and compelling. Finally, you’ll learn the tips and best practices to follow when you convert your portfolio into a presentation for interviews and pitches.

Throughout the course, you'll get practical tips to apply to your portfolio. In the "Build Your Portfolio" project, you'll create your portfolio strategy, write and test your hook, build a case study and prepare your portfolio presentation. You’ll be able to share your progress, tips and reflections with your coursemates, gain insights from the community and elevate each other’s portfolios.

All open-source articles on Interactive Design Portfolios