design case study portfolio

• mindful design
• student success
• product design
• ui/ux design
• watch me work
• design careers
• design inspiration

10 Exceptional Product Design Portfolios with Case Study Breakdowns

After working with many designers throughout my own career and helping many more build their job-ready portfolios, there are a few designers that I keep coming back to for inspiration and some that are inspiring a new generation of UI/UX and Product Designers to enter the field.

I've chosen 10 of our favorite UI/UX and Product Designers—a colorful tapestry of digital product architects that have evolved from graphic designers, marketers, architects, engineers and everything in-between. Their unique backgrounds and journey bring something special to our industry and illustrate how we can all do more meaningful, interesting and impactful work:

There are 10 things in particular that make these 10 designers really stand out:

• They have each honed their craft from the bottom up (whether having gone through a traditional academic program, an online course like DesignerUp , or being self-taught).
• They are all at different stages of their careers (some newly minted and others seasoned veterans).
• They continue to learn, grow, push the envelope, document and share their genuine experiences.
• They each hail from a different background (and sometimes non-design industry) that informs who they are and what they work on as a designer.
• Their evolution is apparent in their work.
• They are passionate about the problems they solve and find joy in connecting with the users they serve.
• They are transparent about their processes, thoughtful in their communication about it and not afraid to show what worked and what didn't.
• They have focused portfolios that reveal their unique point of view as a designer.
• They are a diverse group of designers from different cultural, gender and socio-economic backgrounds.
• They have so much to teach us all about design and how to use it to express authenticity and to understand and help others do the same.

Case Study Format:   http://simonpan.com/work/uber/

• The Challenge
• Early Insights
• Reframing the Problem
• The Redesign
• Design Strategy

“In a city as busy as San Francisco, over $1 million was wasted per week because of problematic pickups.”

Madeline Wukusick

Madeline is a graduate of our DesignerUp Product Design course. She was able to create an incredible portfolio working through our curriculum, blended with her background in graphic and data design that set her up for immediate success landing professional design roles.

Case Study Format:

• The Observed Problem
• The Research
• In the Insights
• The proposed How Might We Statements
• Lean Canvas and Product Strategy
• Business Requirements
• The Solutions and MVP Features
• Things that could be improved

"Thanks for helping me work through these iterations—it's been tremendously helpful! You have such a knack for fine-tuning and teasing out subtle themes that I hadn't noticed before. From these comments, I have a better sense of some of my growth areas to work on and ways in which to push myself. It also helped me realize that I am most interested in hybrid roles, or at least roles with a strong visual component. Really grateful to have discovered this course :-)" - Madeline

Not an Italian mobster; Johny Vino is an engineers' designer. I've been a long time admirer of his work every since his mind-blowing animations and micro-interactions arrested me mid Dribbble scroll many years ago. He is a thoughtful, meticulous designer that understands how to align user and business goals all while transmuting conventional interaction patterns into something that is altogether transcendent yet familiar.

Case Study Format: https://johnyvino.com/

Process, Goal and Task Oriented that varies with each project

• What he worked on
• What he aim to accomplish
• Business Goals
• Representation of complex data
• Integration

Humans are not perfect. I like to apply 3 principles to ever product I design to help me focus on that. Fitt's Law, Mimicry, Aesthetic Usability Effect

Steph Parrott

Steph is a product designer based in Toronto. Currently working on Plantd and most recently at Square in San Francisco.

Case Study Format: https://www.stephparrott.com/plantd/

• Roles and Process
• App Overview
• Feature proposal
• Design to Development
• Looking to the future and what's next

"As someone who hasn’t eaten meat in almost 20 years, I’m highly motivated to put in the work to find plant-based options, but for those starting to dabble, how can we except them to do the same?" - Steph

Tom is the co-founder of the community and event series Design Club , and an investor & advisor to Bricklane . He currently works  own clients, helping invent, design, and launch new ventures. Before that he held design leadership roles at fashion and fintech startups, and was as a senior designer at a global agency. Case Study Format: http://tom.pe/gc-dashboard.html

• Summary of the problem space, challenges, project and contribution
• Goal and Problem
• Design Principles applied
• Proposed solution and representation of dashboard and data
• Design frameworks used
• Future considerations

"The problem here is that by trying to create something for everyone, we risked helping no one. Avoiding the design equivelant of an identity crisis became a big focus of mine. I'd do this by finding ways to inject a point of view into the product. By knowing what it wasn't, as well as what it was." - Tom Petty

Want to create an incredible portfolio like these full of amazing case studies to get you hired? Enroll in our Product Design Course today!

Garett MacGillivray

Much like myself and other designers of a particular generation, Aussie/Canadian Garett MacGillivray has been around the block and through the evolution of graphic designer, web design, UI/UX Designers and now landed squarely as a full stack Product Designer.

Case Study Format: https://aucadian.com.au/project/goloop

• Exploration and Ideation
• Component Library
• B2B product interface

I've had many labels throughout my career in the digital industry. It's safe to say that I enjoy crafting digital experiences.

Elise is a Bay Area designer that jumped to the bay from NYU. She comes from an advertising and marketing background and has fine tuned her communication skills and processes vast knowledge of the tech and digital product industry has a whole having been on the broadcasting and marketing side of things.

Case Study Format: http://www.elisefu.com/work-komeeda/

• Impact/Metrics
• User testing
• User research
• Information Architecture
• Implementation
• Major Findings
• Formal User Testing

I was driven to design because I felt excited and rewarding to learn about people’s goals and desires, help them solve problems and make their lives easier.

Latiesha Caston

Latisha is a User Experience Designer passionate about holistic, accessible, and inclusive design, based in Seattle.

Case Study Format: https://www.latieshacaston.com/veggie-grill-online-ordering-experience

• The Problem
• The High-level Goal
• The approach
• Pain Points
• Optimizing flow and improving architecture
• Interaction model breakdown
• Looking to the future

"Our high level goal was to design a holistic order-ahead experience that keeps the core of what we've built, while delivering on opportunities, addressing pain points, and setting the stage for the future." - Latisha

Karolis Kosas

Having recently joined the amazing design team at Stripe as a Product designer, Karolis's portfolio is clean and minimal and his case studies really understand the mental model of the user, getting into their heads and revealing the friction points they are feeling and how he can insert a solution that improves on the experience with compromising the soul of the designer.

Case Study Format: http://karoliskosas.com/cinemaclub/

• prototyping
• Built the product from zero

Visual communication is a self-sufficient organism capable of adapting and evolving based on the input of multiple sources.Acting in such context, the designer is an initiator, establishing methods and boundaries for the system to establish itself as an independent entity.

Rohit Singh

One of o ur very own graduates ! Rohit Singh is an up and coming product designer with a focus on helping early-stage startups and new businesses blossom.

Rohit outlines his process for creating an MVP for his digital product from scratch, which serves as a sort of physical and virtual library for the poorest class of India.

Case Study Format: https://work.khadush.in/booksite-an-online-physical-book-sharing-platform/

• Inspiration
• User Interviews
• Lean Canvas
• Visual Design
• Final Words

I specialize in helping early stage startups validate their riskiest assumptions using leading design methods

After analyzing all of these case studies and working with 100s of designers in our product design course to get them ready for the job application process, we've created our own tried-and-true templates to make it easy for designers to replicate the successful format and structure of these top portfolios using Notion .

Each of these amazing portfolios tells the story of the product designer, their evolution, their process and shows what they bring to the world. But it's not easy doing what they do or knowing exactly how to show and tell who you are as designer. Having a solid design education and getting feedback from the design community is the best way to ensure that your work is up to par and being presented in a way the shows your skills and your worth.

Have a look at our partners' advice over at Pathrise on building a strong UX design portfolio .

The best design resources, in your inbox

Tips, tricks, articles and freebies. It's all happening in the DesignerUp Newsletter. View the archives →

We'll only send the occasional email and promise not to spam.

© Copyright 2022 DesignerUp. All Rights Reserved.

A Space for Creative Growth

How to write case studies for your design portfolio

A good case study on your design portfolio is a great way to make it stand out. Here’s how to get it right

Illustration: Yali Ziv

• Jul 13, 2020

Putting a work process into words might cause some to break out in a light sweat, but just like the rest of a design portfolio , a case study is a chance to shine. The key to approaching such a task is by realizing that crafting the perfect case study isn’t that different from any other design work you do.

Here’s everything you need to know about writing good case studies, from how to structure them visually, to which details to include and more.

What is a design case study?

In a nutshell, the main aim of a case study is to tell the story of a specific project of yours. The text you write can put your design work into context and make it more fully understandable. Integrating images with text, a case study outlines the most important details of the process, from the brief you were given, to how you approached the task, to the final result. Incorporating case studies into your portfolio helps give potential clients or employers a look into how you work, what you’re good at and what your thought process is.

When making your online design portfolio, note that not every project requires a full case study. You can pick the projects you’re proudest of, giving you the chance to highlight your skills and explain what made the design so successful. Now that we’re on the same page, here’s our best advice:

Include the relevant details

To make sure you’ve covered all the relevant information, here’s a checklist of the main details to include. Note that these aren’t strict guidelines - it depends on how thorough you want to be and what you feel is important for your project.

1. Background info: If you were working with a client, include their name and what they do, plus the date and location in which the project took place. Also explain what your role was within the project (for example “Web Design,” “Branding” or “Art Direction”). If you worked in a team, credit the other people and list their roles. This is also the place to give a brief sentence on what the project actually is.

Example: See how designer Ariel Sun , introduces her rebranding project:

“The Human Project at NYU (THP) worked with the agency Ogilvy & Mather to redefine their brand and develop a new logomark. As THP's internal graphic designer, I applied that visual language to a variety of marketing & communications assets and fresh brand collateral.”

2. Goal: Briefly explain what the aim of the project was. You can base this on the design brief you worked with throughout the project.

Example: Design studio and Wix user, Run Wild , state the goal of their UX project:

“The challenge was to redesign a convoluted site into an action-oriented site that provides clear navigation and call to action.”

3. Design process: You can really decide how much you want to elaborate here. Keeping it short is also an option. Either way, the idea is to talk about the main stages you went through in the design process, which decisions you made and why, what your approach was, and any changes made throughout.

You can include some of the research you did and what your inspirations were. Don’t be afraid to mention any challenges you experienced or concepts that were later scrapped - as long as you keep a positive attitude and explain the reasoning behind the decisions, remember that it’s all part of the process.

4. Results: Here, present the final outcome and your main learnings. You can also write about how success was measured. For example, state whether all your client’s expectations were met (this can be in the form of client quotes if you like), or perhaps include stats you have about an increase in sales, or describe how part of your design was later used on a larger scale.

Example: In this case study about a redesign for a website, Ariel Sun explains the results:

“The result is an engaging and unexpected twist on a garden party that tells a clear story while still leaving room for the viewer’s imagination. After reviewing a set of submissions that included work from our very talented colleagues, Tattly picked this design and will elaborate it into a full-on marketing campaign.”

Make it skimmable

We all know that we live in a time of short attention spans . Even when it comes to prospective clients or employers, they want to get a feel for your design project fairly quickly. That’s why you should make your case studies accessible, inviting and easy to grasp at first glance , both in terms of the design and the text itself.

The layout of the page should serve the storytelling process, revealing information in digestible, bite-sized chunks. Combine images with text cohesively, somewhat like the structure of a magazine or book. See how designer and Wix user, Brittney Johnson , separates the parts of her case study into drop-down sections, enabling you to focus on one point at a time.

Split up your text into paragraphs and add headers that will enable visitors to navigate easily from section to section. Consider emphasizing certain words by making them bold, changing their size or opting for a different color. Additionally, caption each image with a brief description, so that even people that aren’t into reading lengthy text can comprehend the context. It will also help make your design more accessible , offering your visually impaired site visitors an alternative understanding of the image.

In terms of the writing style, keep it concise and to the point . Use short sentences that explain exactly what you want to say, without repeating themselves just for the sake of sounding sophisticated. This doesn’t mean you need to sound robotic - you should still keep it personal and remember that at the end of the day, your target audience is humans.

Write it like a (short) story

Just like in any other design project, a case study simply tells a story. And that’s exactly the way you should write it. It should have a structure, including a beginning, middle, and end, made up of all the relevant details (scroll up if you missed what those are). It’s not just random sentences placed one after the other, but rather, an outline of a process, generally written in chronological order.

Maintain your tone of voice

On a similar note, remember that your case study describes your project, so feel free to let your individual personality shine through in your writing. Keep the same tone as in the rest of your design portfolio’s copy , in order to form a clear personal brand and consistent browsing experience.

You don’t need to be overly formal or use complex jargon, as this could just end up intimidating people. On the flip side, including jokes might be taking it a little too far. Simply focus on getting the point across succinctly and in your own language. As a result, the likelihood is that you’ll give your site visitors a better idea of who you are and where your specialty lies.

The combination of text and images helps break it up into a story-like layout, resulting in a more immersive and engaging experience, which is why you should make sure not to only include visuals. Plus, text is great for your design portfolio’s SEO (search engine optimization), increasing your chance of ranking higher on search results.

Get more inspiration on how to tell a visual story through your portfolio with these 8 graphic designers’ websites .

MORE POSTS LIKE THIS:

Nov 3, 2021

Show and tell: sharing the story behind your creation

Apr 14, 2021

How to write your best personal statement

Feb 4, 2019

How to Write the Perfect Copy for Your Design Portfolio

Limited Time Offer! Save up to 50% Off annual plans.* View Plans

Save up to 50% Now .* View Plans

How To Write A Case Study For Your Design Portfolio

Case studies are an important part of any designer’s portfolio. Read this article to learn everything you need to know to start writing the perfect case study.

When you’re putting together your online design portfolio , design case studies are a great way to showcase your experience and skills. They also give potential clients a window into how you work.

By showing off what you can do and your design process, case studies can help you land more clients and freelance design jobs —so it can be smart to dedicate an entire section of your online portfolio website to case studies.

Getting Started

So—what is a design case study and how do they fit in your portfolio.

Let’s get some definitions out of the way first, shall we? A design case study is an example of a successful project you’ve completed. The exact case study format can vary greatly depending on your style and preferences, but typically it should outline the problem or assignment, show off your solution, and explain your approach.

One of the best ways to do that is to use a case study design that’s similar to a magazine article or long-form web article with lots of images throughout. When building your case study portfolio, create a new page for each case study. Then create a listing of all your case studies with an image and link to each of them. Now, let’s get into the nitty-gritty of creating these case studies.

Choose Your Best Projects

To make your online portfolio the best it can be , it’s good to be picky when choosing projects for case studies. Since your portfolio will often act as your first impression with potential clients, you only want it to showcase your best work.

If you have a large collection of completed projects, you may have an urge to do a ton of case studies. There’s an argument to be made in favor of that, since it’s a way to show off your extensive experience. In addition, by including a wide variety of case studies, it’s more likely that potential clients will be able to find one that closely relates to their business or upcoming project.

But don’t let your desire to have many case studies on your portfolio lead you to include projects you’re not as proud of. Keep in mind that your potential clients are probably busy people, so you shouldn’t expect them to wade through a massive list of case studies. If you include too many, you can never be sure which ones potential clients will take a look at. As a result, they may miss out on seeing some of your best work.

There’s no hard-and-fast rule for how many case studies to include. It’ll depend on the amount of experience you have, and how many of your completed projects you consider to be among your best work.

Use Your Design Expertise

When creating the case study section of your portfolio, use your designer’s eye to make everything attractive and easily digestible. One important guideline is to choose a layout that will enable you to include copy and image captions throughout.

Don’t have your portfolio up and running yet and not sure which portfolio platform is best for you? Try one that offers a free trial and a variety of cool templates that you can play around with to best showcase your design case studies.

If you don’t provide context for every image you include, it can end up looking like just a (somewhat confusing) image gallery. Case studies are more than that—they should explain everything that went into what you see in the images.

Check Out Other Case Study Examples for Inspiration

Looking at case study examples from successful designers is a great way to get ideas for making your case study portfolio more effective. Pay special attention to the case study design elements, including the layout, the number of images, and amount of copy. This will give you a better idea of how the designer keeps visitors interested in the story behind their projects.

To see some great case study examples, check out these UX designer portfolios .

Try a Case Study Template

There are plenty of resources online that offer free case study templates . These templates can be helpful, as they include questions that’ll help you ensure you’ve included all the important information.

However, most of them are not tailored to designers. These general case study templates don’t have the formatting you’ll want (i.e. the ability to include lots of images). Even the ones that are aimed at designers aren’t as effective as creating your own design. That’s why case study templates are best used as a starting point to get you thinking, or as a checklist to ensure you’ve included everything.

How to Write Case Studies

Maintain your usual tone.

You should write your case studies in the same personal, authentic (yet still professional!) tone of voice as you would when creating the About Me section of your portfolio . Don’t get bogged down in too much technical detail and jargon—that will make your case studies harder to read.

Since your case studies are part of your online portfolio, changing your usual tone can be jarring to the reader.

Instead, everything on your portfolio should have a consistent style. This will help you with creating brand identity . The result will be potential clients will be more connected to your writing and get the feeling that they’re learning what makes you unique.

Provide Some Context

Case studies are more effective when you include some information at the beginning to set the stage. This can include things like the date of the project, name of the client, and what the client does. Providing some context will make the case study more relatable to potential clients.

Also, by including the date of the project, you can highlight how your work has progressed over time. However, you don’t want to bog down this part of the case study with too much information. So it only really needs to be a sentence or two.

Explain the Client’s Expectations

Another important piece of information to include near the beginning of your case study is what the client wanted to accomplish with the project. Consider the guidelines the client provided, and what they would consider a successful outcome.

Did this project involve unique requirements? Did you tailor the design to suit the client’s brand or target audience? Did you have to balance some conflicting requirements?

Establishing the client’s expectations early on in the case study will help you later when you want to explain how you made the project a success.

Document Your Design Process

As you write your case study, you should take a look at your process from an outsider’s point of view. You already know why you made the decisions you did, so it may feel like you’re explaining the obvious. But by explaining your thought process, the case study will highlight all the consideration you put into the design project.

This can include everything from your initial plan to your inspiration, and the changes you made along the way. Basically, you should think about why you took the approach you did, and then explain it.

At this point, consider mentioning any tricks you use to make your design process more efficient . That can include how you managed your time, how you communicated with clients, and how you kept things on track.

Don’t Be Afraid to Mention Challenges

When writing a case study, it can be tempting to only explain the parts that went flawlessly. But you should consider mentioning any challenges that popped up along the way.

Was this project assigned with an extremely tight deadline? Did you have to ask the client to clarify their desired outcome? Were there revisions requested?

If you have any early drafts or drawings from the project saved, it can be a good idea to include them in the case study as well—even if they show that you initially had a very different design in mind than you ended up with. This can show your flexibility and willingness to go in new directions in order to achieve the best results.

Mentioning these challenges is another opportunity to highlight your value as a designer to potential clients. It will give you a chance to explain how you overcame those challenges and made the project a success.

Show How the Project’s Success Was Measured

Case studies are most engaging when they’re written like stories. If you followed the guidelines in this article, you started by explaining the assignment. Next, you described the process you went through when working on it. Now, conclude by going over how you know the project was a success.

This can include mentioning that all of the client’s guidelines were met, and explaining how the design ended up being used.

Check if you still have any emails or communications with the client about their satisfaction with the completed project. This can help put you in the right mindset for hyping up the results. You may even want to include a quote from the client praising your work.

Start Writing Your Case Studies ASAP

Since case studies involve explaining your process, it’s best to do them while the project is still fresh in your mind. That may sound like a pain; once you put a project to bed, you’re probably not looking forward to doing more work on it. But if you get started on your case study right away, it’s easier to remember everything that went into the design project, and why you made the choices you did.

If you’re just starting writing your case studies for projects you’ve completed in the past, don’t worry. It will just require a couple more steps, as you may need to refresh your memory a bit.

Start by taking a look at any emails or assignment documents that show what the client requested. Reviewing those guidelines will make it easier to know what to include in your case study about how you met all of the client’s expectations.

Another helpful resource is preliminary drafts, drawings, or notes you may have saved. Next, go through the completed project and remind yourself of all the work that went into achieving that final design.

Draw Potential Clients to See Your Case Studies

Having a great portfolio is the key to getting hired . By adding some case studies to your design portfolio, you’ll give potential clients insight into how you work, and the value you can offer them.

But it won’t do you any good if they don’t visit your portfolio in the first place! Luckily, there are many ways you can increase your chances. One way is to add a blog to your portfolio , as that will improve your site’s SEO and draw in visitors from search results. Another is to promote your design business using social media . If you’re looking to extend your reach further, consider investing in a Facebook ad campaign , as its likely easier and less expensive than you think.

Once clients lay eyes on all your well-written, beautifully designed case studies, the work will come roaring in!

Want to learn more about creating the perfect design portfolio? 5 Designers Reveal How to Get Clients With Your Portfolio 20 Design Portfolios You Need to See for Inspiration Study: How Does the Quality of Your Portfolio Site Influence Getting Hired?

A Guide to Improving Your Photography Skills

Elevate your photography with our free resource guide. Gain exclusive access to insider tips, tricks, and tools for perfecting your craft, building your online portfolio, and growing your business.

Get the best of Format Magazine delivered to your inbox.

Get Inspired by 10 Fashion Design Portfolios That Capture the Essence of Contemporary Style

Should I Catalog My Art?

Making Your Site Design More Accessible

6 Inspiring Portfolios by Members of BWP (Black Women Photographers)

Honoring Chicana Aesthetics With Photographer Brittany Bravo

2024 Interior Design Forecast: Sustainability, Maximalism, and Smart Integration

Architectural Design Trends 2024: Innovations in Sustainability

*Offer must be redeemed by April 30, 2024 at 11:59 p.m. PST. 50% discount off the subscription price of a new annual Pro Plus plan can be applied at checkout with code PROPLUSANNUAL, 38% discount off the price of a new annual Pro plan can be applied with code PROANNUAL, and 20% discount off the price of a new Basic annual plan can be applied with code BASICANNUAL. The discount applies to the first year only. Cannot be combined with any other promotion.

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

How to write engaging case studies for your portfolio

We examine 5 portfolios with powerful case studies.

Project case studies are one of the most important yet overlooked parts of building a design portfolio . In our efforts to design the perfect portfolio and showcase our visual work, we often rush the copy or omit it entirely, leaving only a shallow overview of who we are and what we can do. But dumping a bunch of photos on your project pages without any context sells your work short.

Case studies are so crucial to the success of a designer's website that we built Semplice , a portfolio system for designers, entirely around them. (If you're after design portfolio and case study inspiration, check out the Semplice Showcase .) 

Your portfolio case studies are your opportunity to show prospective clients and employers how you think, how you work and what you can contribute to the world. Here are five examples of designers who do case studies well. 

01. Liz Wells

As a UX designer, Liz Wells has the unique task of making sitemaps, sketches, prototypes and user flows both visually engaging and concrete for her readers. She strikes the perfect balance in her portfolio case studies, highlighting work for brands like Google, Viceland and Spotify. 

Wells shares the project story from challenge to solution, taking care to explain her process along the way. Photos, videos – even early sketches torn from her notebooks – are thoughtfully photographed and laid out. All of it works together to not only showcase Wells' work, but also who she is and how she thinks.

On my blog, I publish a series in which I interview top companies about how to get a design job where they work. Almost every company has voiced that they want to understand how you think and see your process. 

Think about your project in phases and share your work – even the less glamorous notes and sketches, if they’re important to the story – from beginning to end, and you’ll find you have plenty to say. 

02. Melissa Deckhert

Melissa Deckert ’s case studies may be minimal but they pack a punch. Some, like her Food Quote GIFs case study for Tumblr, hook you in with a little secret that makes you look closer at the work.

“Tumblr asked me to animate a few food quotes for an internal project,” Deckert explains in the case study. “Naturally I found a way to weave Beyonce into two out of three.” Short and sweet, but the last line creates intrigue and make you want to see more.

Others case studies, like her In Every Moment We Are Alive book cover project, surprise you with a big reveal at the end. The case study works in reverse, leading with the finished product (the final book cover) and ending with a behind-the-scenes shot that makes you rethink what you saw before. 

Despite all our excuses, designers can write too . While it’s good to share your process, it also helps to remember the one person who is reading your website. They’re tired, they’re busy and they’ve probably reviewed dozens of portfolios today already. If your case study surprises them and brightens their day, it will be remembered. 

03. Naim Sheriff

Naim Sheriff breaks his case studies into sections, making the page easy to read and digest. He leads with a brief paragraph introducing the client and task at hand, then shares each project element in bite-sized pieces. 

Most importantly, he explains his visuals instead of just dumping them on the page. Sheriff’s case studies are rich in imagery but he doesn’t just show, he tells.

Just as with a newspaper or magazine article, it’s important to remember people are scanning your case studies. They may decide to read deeper if something catches their interest, or they may just skim and move on to the next project. 

Use your layout to guide them through the content and draw them deeper. Make your captions meaningful for scanners, and write easy-to-read paragraphs for the ones who stay.

04. Mackey Saturday

Mackey Saturday ’s case studies, like his whole portfolio, are clean and light. His identity designs for brands like Instagram , Oculus and Luxe stand on their own (as logos must do) but his case studies, complete with videos, polished photos and before and after GIFs, explain the nuances and decisions behind the finished product. Most notably, Saturday reveals his entire perspective on branding and design in his case studies.

“Redesigning a globally recognised logo is a polarising opportunity: Do you put your personal style on display, or stay true to what the brand’s users are familiar with?” he writes. “I believe the best designs channel a company’s culture, not the designer’s.”

Don’t be afraid to share your opinion and perspective in your case study. While you should avoid sharing opinions like, 'I really hated working with this client', you should, where relevant, express your beliefs about design and how you applied them to your work. 

Tell people what inspires you, what principles guide you, share your feelings about the final result. This adds personality and helps visitors understand who you are as a designer. Read more tips for writing case studies here.

05. Kali & Karina

Kali & Karina tee everything up for their case study readers with a strong introduction, including the project challenge, the project brief (in one sentence), as well as the partnering agency, their client and their role. They then follow through with their approach and the outcome.

On of the most common portfolio mistakes is forgetting to mention your role and give credit to your team. Giving credit doesn’t make your work on the project any less impressive. 

In fact, it shows you can work well and collaborate with a team. It also helps a potential employer or client understand where your main skills lie and how you’ll fit into their team or project.

• Inspiring redesigns of design agency portfolios
• 6 ways to power up your portfolio
• How to start a blog: 10 pro tips

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Get the Creative Bloq Newsletter

Daily design news, reviews, how-tos and more, as picked by the editors.

Related articles

• Reading Club New

How to write project case studies for your portfolio

Writing case studies might be the most dreaded part of building a design portfolio. After all the work and time it takes curating projects, designing pages, saving out images, etc., who wants to actually sit down and EXPLAIN it all? But next to your About page, case studies are the most important pa

Aside from showing your experience and skill, case studies give your potential client or employer an idea of how you work and think. Case studies are basically the whole point of building a portfolio — which is why Semplice and Carbonmade, our portfolio tools, were built around just that. Especially with more complex work such as UX design, a case study is a must to explain your work. Of course, your case study approach depends on your personal style and goals, but I generally recommend these rules when creating your project pages.

1. Write down your case studies before you do almost anything else

I know this is not as fun as designing your website but like most things in life, it helps to get the hardest task out of the way first. Near the end of the project you will just want to press that launch button, so anything you write at that time will be rushed and lazy. Or even worse, you will hit a wall and procrastinate launching the whole thing.

Write about your projects as early as you can, even if you have to adjust the copy slightly later to fit your final page layout. I usually just put all my thoughts in Evernote or a Google Doc. Think of your project in phases and start with Phase 1, which is usually the ideation or exploration phase. Write down your thoughts, and then continue to Phase 2. Don't bother with images just yet, this is just for you to help you get it all down.

If inspiration strikes otherwise, so be it. But in most cases you will thank yourself later by doing this first.

2. Keep it brief & caption everything

People are usually scanning your projects to get a general idea of your skills and the way you work. Don't write a novel, just share a short paragraph or two that makes your project interesting and relatable to your reader.

I've read research that says one of the first things people read in a newspaper are the little captions underneath the images. Think of your case study the same way. If someone scrolls through your case study and only reads the little 1-2 sentence captions, they should still understand your project. Focus on the captions first, and then fill in any lengthier content.

3. Include the right details

It all depends on your personal style and you don’t need to literally copy/paste this format, but your case study should loosely follow this outline or provide this information:

Name of client, what they do & their location: Give your reader context and write a quick sentence about what this project or product is all about. This will show your experience and interest in specific types of clients or design work. Naming the location will also help if you want to make it clear you work with clients all over, as opposed to just your hometown.

Goal for the project: What did the client ask you to do?  What was the briefing? What was the main challenge and measure of success? Did you have a certain idea or expectation for the project when you began?

Your experience: Anything interesting to share about your process for this project? Did you take a unique angle or notice some surprising insight? Do you have some early sketches we can see? Why did you choose that approach? Ask yourself WHY WHY WHY a thousand times, and then answer those questions.

The outcome: Did you feel proud of the result? Did it exceed your expectations? Did it increase the client’s sales by 2000%? Don’t get too technical or share some crazy analytics report (and definitely do not make anything up), just include a brief sentence or two that shares how the project was successful. A case study should ideally be a success story. If it's not, tell us why the project is still valuable or meaningful (maybe the client didn't choose your favorite concept for example, but you still love the work you did) and what you learned from it.

Again, it doesn’t need to be some stiff, clinical report. Just set everything up for the reader so they can fully appreciate what went into the project and how you approach your work.

4. Give credit & explain your role

This is especially important if it was a team project. If I just see a list of names without their roles, I might be a little suspicious about what you actually did on this project. But whether or not this was a team project, it’s helpful for us to understand what role you played. This could be as simple as listing “art direction & design” beside the project summary. Forgetting this detail is crucial and can mean the difference between getting hired or not.

"We should finish reading with a sense of your personality and design process."

5. Write in your voice

You and your client might know what they mean, but acronyms and buzzwords only distance your reader. Don’t try to impress with lofty language, just share your work in your own voice and be as clear as possible. We should finish reading with a sense of your personality and design process.

Whatever you do, don’t just copy/paste words about your client’s product from their website. The shift in voice will be obvious and will only make you seem lazy.

6. Don’t image dump

I’ve seen countless portfolios that either don’t include a case study at all or just have one sentence with a bunch of photos below for the reader to sort out on their own. That doesn’t sell your work the way it deserves. (Plus no copy = bad SEO, if you care about that.)

Consider a layout that lets you include a sentence or two beside each image, so you can explain your process and give us insight into what we’re seeing. A bunch of photos on a page might look pretty, but as almost every company in our "How to Get a Job at X" series has voiced, it's not enough. Your potential employer or client needs context. We need to understand who you are, how you work and how you might contribute to our team/culture.

7. Think of each case study like a magazine feature

This goes for your content and layout. Using a similar page template for your case studies is fine, but you should at least adjust it to fit the project and look of the work.

Think of the way magazine articles are laid out. They’re designed to fully immerse you in the piece and create an experience. They include photos at specific places to illustrate a point or bring a scene to life. They use pull quotes to pique your interest or point out an especially memorable part of the story. They break up paragraphs with photos, but take care to not disrupt your reading experience.

This is why Semplice allows designers to create fully branded case studies — meaning you can design every piece of your page to fit the project’s look and feel, from the navigation down to the footer. Every project is different and your case studies should be too.

I could go on and on, but when it comes down to it, no one-size-fits-all solution works for case studies. It all depends on you, your project, style and the kind of work you do. As we say in this article about writing as a designer (good tips in there as well), just remember to write for that one person on the other side of the screen. It's one person hiring you for the job after all – and often that person is a recruiter or someone who's not necessarily a designer like you. Design your portfolio and write your case studies with your reader in mind, and you'll be one step closer to doing the work you want to do.

Read more portfolio tips here and be sure to check out the Semplice Showcase for design portfolio inspiration.

Featured article image by Liz Wells

What is quality anymore?

How to create free press for your work

My anti-New Year’s resolutions

Let's talk about AI

Most popular.

© 2021 House of van Schneider LLC All rights reserved.

MORE ABOUT TVS About DESK Curated mixtapes DESK partnerships

BECOME A FRIEND Twitter Dribbble Instagram

We're sorry, our pandas couldn't find any articles

Why don't you take a look at popular topics like Design , Productivity or Self-Improvement ?

• Reviews / Why join our community?
• For companies
• Frequently asked questions

How to Write Great Case Studies for Your UX Design Portfolio

Well, the answer is really simple: write your UX case studies like stories. You see, when you present your case study as a story, you’ll find it far easier to give it a satisfying structure and captivate your reader. What’s more, you’ll make it easy for recruiters to imagine what it’s like to work with you, as they get to understand how you work. This makes your case study powerful and increases your chances of getting your first interview. Let’s take a closer look at what makes story-based case studies so impactful.

Since your case studies first and foremost serve to help you get an interview in your job application, they should answer the following questions (grouped into three categories, based on you as a person, your skill set and the way you do things):

Who are you? What drives you and what’s your background?

What UX skills do you possess?

How do you approach and solve a problem? How do you work with others?

As it turns out, when you tell a narrative through your case studies, you answer these questions effectively. Here are the 3 main reasons why you should write your UX case studies like stories and how this helps you stand out from other applicants.

Because Stories Allow Recruiters to Imagine What it’s Like to Work with You

“Narrative imagining—story—is the fundamental instrument of thought. Rational capacities depend upon it. It is our chief means of looking into the future, of predicting, of planning, and of explaining.” —Mark Turner, cognitive scientist and author

When a recruiter reads your case study, they want to find out if you’ll be a great addition to their team. They want to know not only if you have the right skills and attitude, but also whether they’d enjoy working with you.

When you tell a story, you make it intuitive for a recruiter to imagine what it’s like to work with you . That’s because we use stories to learn and imagine all the time—in fact, people have since the dawn of human history. Therefore, recruiters will find it easier to look into the future and predict if they’d like to work with you when they read a story-based case study. They’ll find it easier to understand who you are and how you solve a problem.

Since the dawn of human history, we have used stories to imagine and learn about our world. Help recruiters understand you by telling a story about your design process .

© Mike Erskine, Fair Use

This sentiment is echoed by Sarah Bellrichard, Senior Vice President of Wholesale Internet Solutions & UX at the American bank Wells Fargo. She shared her tip on case studies and interviews:

“My tip would be, tell stories. When designers present a flat portfolio it doesn’t tell me about how they approach the work they do and how they deal with the ebbs and flows of design. Tell me how you navigate from start to end of a project.” —Sarah Bellrichard, SVP of Wholesale Internet Solutions & UX, Wells Fargo

Because Stories Give Your Case Studies Structure

“Sometimes reality is too complex. Stories give it form.” —Jean Luc Godard, French-Swiss film director

If you’ve worked on a design project before, then you’re painfully aware of just how messy life can be. Deadlines change, project goals shift, and new findings can fundamentally alter design specifications.

Stories will give your past experiences form and make your case studies better organized . You can re-arrange your experience into a meaningful sequence of events—i.e., progress—towards your results. Otherwise, your case study will likely seem chaotic.

The arc of a story—introduction, middle, conclusion—is the perfect order to tell your messy progress towards a project’s final results. Let’s illustrate:

In the introduction :

You set up the context of your project, for instance through a design brief.

You introduce your team’s main goals and some of the main obstacles you faced

In a classic story, this is where we meet the heroes and learn about the venture/goal they’re reaching for and why they’re not satisfied with their current lives.

In the middle :

You illustrate your approach to solving the problem.

You bring your reader through your journey of how you used industry standard practices to tackle the problem. It’s important that you describe what you did and what your team members did, so the recruiter knows what skills and knowledge you possess.

In a classic story, this is where we follow our heroes struggling to conquer the beasts, villains and problems as they strive to reach their goals.

Finally, in the conclusion :

You showcase the final product and the results you and your team achieved.

You reflect upon what you’ve learnt and recount any follow-up tweaks you’ve made to the product.

In a classic story, this is where the heroes reach their goals―they experience personal growth , reap the rewards of their hard work and live happily ever after.

See how nicely it all fits into a story arc?

When you arrange your case study in a story arc, your journey becomes more ordered and meaningful.

© Teo Yu Siang and the Interaction Design Foundation, CC BY-NC-SA 3.0.

There’s more! You’ll also find it easier to write your case study when you arrange it like a story. You see, the introduction-middle-conclusion structure of a story forms a skeleton for you to fill in the “meat” of your journey. On top of that, recruiters who read your case study will also find the familiar arc of a story satisfying. Talk about a win-win situation!

Because Stories Captivate

“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

Okay, your case study will most likely not live in your recruiter’s heart forever, but your story-based case study will definitely stand out from other purely fact-based case studies, as your story will engage and captivate your recruiter. You see, a narrative is more engaging and provides a better reading experience than a dry, factual account ever could. It naturally makes the reader feel involved in the story and weaves a common thread throughout the case study.

UX recruiters are incredibly busy. They’ll typically spend only 5 minutes scanning your case studies because they have so many applicants to process. Given that, you have a much better chance if you can capture your reader’s attention for the whole 5 minutes.

And there’s no better way to captivate someone than through a story.

Let’s demonstrate that in an ultra-brief case study―yours should be more detailed and in-depth. Below, you’ll find the same journey told in two ways: first in a factual manner, then in a narrative fashion. See which version you find more engaging.

Factual : User interviews were conducted with 12 people to evaluate the effectiveness of the prototype. The main finding was that the assumption that users shopped based on their weekly nutritional needs was invalid. This finding was used to create a new iteration of the product, which was tested and found to be 50% more successful than the previous version.

Narrative : We conducted interviews with 12 people to evaluate if our prototype was effective. Our finding threw a giant spanner in the works. We realized our assumption—that users shopped based on their weekly nutritional needs—was dead wrong. Undefeated, we scrambled to create a new iteration, and ran another round of tests. This time, it worked—the success rate shot up by a whopping 50%!

You probably find the narrative version way more interesting—and so will your recruiters.

Notice in the factual version how flat and lifeless the account is? Sure, the figures are there, but it looks as if you’re reporting on what someone else did. This tells a recruiter that you’re distant and non-engaged—that you didn’t take ownership in what you’re talking about.

So, embrace the liberating and captivating format of a story. Go ahead and describe how your finding proved you dead wrong and how you scrambled upon meeting a temporary setback.

Best practice:

Convey your emotions and write in an active, engaging tone of voice .

Include the team’s frustrations, problems you faced and new insights you learnt.

Include people: write “we”, “I” and “our team”.

This way, you’ll give your case studies flavor . Furthermore, you’ll reveal who you are and how you work―and your recruiters will come back for more.

Stories naturally captivate us—use that power to captivate your recruiters, too.

© Prasanna Kumar, Fair Use

Turn Your Case Studies into Stories

Of course, we’re not saying that you should write a novel to explain what happened in your project. Your case studies should still be short and sweet, but they also should be punchy and engaging.

In fact, when we sat down with Stephen Gay, Design Lead at Google’s AdWords, to ask him about the importance of a portfolio, he explained that he sees UX case studies as stories about the applicants.

• Transcript loading…

To a recruiter like Stephen Gay, case studies are stories that tell him about the applicants. Author / copyright holder: The Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0.

As Stephen astutely pointed out, we UX designers regularly use the power of stories in our work. So, use this same storytelling approach in your case studies, too!

The Take Away

The best way to write a case study is to tell it like a story. This way, your case studies become a vessel through which recruiters can imagine a future working with you, since they get to experience and understand exactly how you solve a design problem. Your recruiters will also enjoy the familiarity and structure of a story arc, and they’ll find the reading experience much more engaging. So, go ahead—inject humanity, color and passion into your case studies. Be a storyteller.

References and Where to Learn More

You can find Sarah Bellrichard’s tip on case studies in this article by Justinmind, which gathers tips and insights on how to do well in interviews.

Hero image: © Rawpixel, Fair Use.

How to Create a UX Portfolio

Get Weekly Design Insights

What you should read next, 10 ui designer portfolio examples.

How to Succeed as a Designer on Agile Teams: Embrace Imperfection

Your Guide to Hamburger Menus

• 2 weeks ago

How to Design with AI: 5 Insights from the IxDF Course

Tree Testing: A Complete Guide

• 3 weeks ago

The Role of Micro-interactions in Modern UX

How to Design UI Forms in 2024: Your Best Guide

What is Eye Tracking in UX?

• 4 weeks ago

Bartle’s Player Types for Gamification

UX Storyboards: Ultimate Guide

Open Access—Link to us!

We believe in Open Access and the  democratization of knowledge . Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change , cite this article , link to us, or join us to help us democratize design knowledge !

Privacy Settings

Our digital services use necessary tracking technologies, including third-party cookies, for security, functionality, and to uphold user rights. Optional cookies offer enhanced features, and analytics.

Experience the full potential of our site that remembers your preferences and supports secure sign-in.

Governs the storage of data necessary for maintaining website security, user authentication, and fraud prevention mechanisms.

Enhanced Functionality

Saves your settings and preferences, like your location, for a more personalized experience.

Referral Program

We use cookies to enable our referral program, giving you and your friends discounts.

Error Reporting

We share user ID with Bugsnag and NewRelic to help us track errors and fix issues.

Optimize your experience by allowing us to monitor site usage. You’ll enjoy a smoother, more personalized journey without compromising your privacy.

Analytics Storage

Collects anonymous data on how you navigate and interact, helping us make informed improvements.

Differentiates real visitors from automated bots, ensuring accurate usage data and improving your website experience.

Lets us tailor your digital ads to match your interests, making them more relevant and useful to you.

Advertising Storage

Stores information for better-targeted advertising, enhancing your online ad experience.

Personalization Storage

Permits storing data to personalize content and ads across Google services based on user behavior, enhancing overall user experience.

Advertising Personalization

Allows for content and ad personalization across Google services based on user behavior. This consent enhances user experiences.

Enables personalizing ads based on user data and interactions, allowing for more relevant advertising experiences across Google services.

Receive more relevant advertisements by sharing your interests and behavior with our trusted advertising partners.

Enables better ad targeting and measurement on Meta platforms, making ads you see more relevant.

Allows for improved ad effectiveness and measurement through Meta’s Conversions API, ensuring privacy-compliant data sharing.

LinkedIn Insights

Tracks conversions, retargeting, and web analytics for LinkedIn ad campaigns, enhancing ad relevance and performance.

LinkedIn CAPI

Enhances LinkedIn advertising through server-side event tracking, offering more accurate measurement and personalization.

Google Ads Tag

Tracks ad performance and user engagement, helping deliver ads that are most useful to you.

Share the knowledge!

Share this content on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

New to UX Design? We’re giving you a free ebook!

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

New to UX Design? We’re Giving You a Free ebook!

20 of the Best UX Portfolio Examples

So, you’re looking for some UX portfolio inspiration?

Making sure you’ve got an impressive portfolio to your name is important for both fresh-faced UX designers and seasoned industry veterans.

In this article, we’ll try to inspire you with awesome UX portfolio examples and UX design portfolio best practices.

The 20 Best UX Portfolios

Without further ado, here are our picks of the best UX design portfolio examples.

1. Gloria Lo nails the high-impact introduction

Who is gloria lo.

Gloria Lo is a self-taught product designer based in Sydney, Australia. In her own words, she is passionate about improving the lives of others through design and is constantly looking to learn new things every day.

What makes Gloria’s UX design portfolio so great?

One of the first things your UX portfolio should do is introduce you as a designer. Employers and potential clients want to know who you are and what you’re all about—and they should be able to find this out within seconds of landing on your portfolio website.

Gloria has nailed her designer introduction with a three-tiered approach. First, she treats us to a bold, eye-catching headline that describes her in terms of her favorite activities.

In just four simple verbs, we know that Gloria is a creative, multi-talented soul with quite a few hobbies in her repertoire. Oh, and these verbs “light up” in different colors when you hover over them—a nice additional dash of personality!

After such an enticing headline, we’re inevitably curious to know more about Gloria—and sure enough, her portfolio delivers. Directly beneath that unmissable heading, Gloria tells us exactly what she does and what she’s passionate about in just two sentences.

Gloria has mastered the delicate art of brevity while still managing to convey the most important information—not an easy feat!

By now, Gloria has well and truly piqued the viewer’s interest. Luckily, her portfolio also features a comprehensive “About” page, complete with a video, a section detailing her values (with the help of emojis), a very thorough testimonial from a former employer, and links to her music and artwork.

What can we learn from Gloria Lo?

When it comes to your own UX design portfolio, make like Gloria and 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.

Besides crafting a gripping “about me” statement, try to inject a bit of personality into the visual design, too—just like Gloria’s colorful hover effect.

Key takeaway

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.

View Gloria Lo’s full portfolio website

2. Moritz Oesterlau masters the art of storytelling through case studies

Who is moritz oesterlau.

Moritz Oesterlau is a multi-skilled product/UX designer based in Germany. He also dabbles in interface design and frontend development.

Moritz studied UX design with CareerFoundry and is now part of the Global Goals Curriculum 2030 team, helping to shape a democratic, just, and sustainable society through the power of education.

What makes Moritz’s UX design portfolio so great?

Moritz’s portfolio really gets to the heart of what UX design is all about: going through a process to solve a user problem. Moritz doesn’t just show the finished product; he shares, in detail, all the methods and processes that got him there.

Each project is presented as a case study, which immediately tells us we’re in for a lot more than just eye candy.

Click on any one of these case studies and you almost feel like you’re in the room with Moritz himself—a fly-on-the-wall as he works through his UX design process.

Take the Approach to Digitization in Education case study , for example. Moritz leaves no stone unturned, documenting the project from start to finish.

He takes us on a logical journey, putting the design challenge into context before going through competitor analysis , interviews and surveys, building empathy and creating user personas , defining the information architecture , wireframing , prototyping, and usability testing .

For each step, he explains what he did, why he did it, and what he learned as a result.

What can we learn from Moritz Oesterlau?

When showcasing your UX design work, follow Moritz’s example and place your process front and center. You’ll notice that Moritz doesn’t show the finished product until the very end of each case study, and that’s because he’s telling a logical story.

With each case study, start from the beginning and guide the viewer through the main steps that led you to the final solution. It’s okay to 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.

View Moritz Oesterlau’s full portfolio website

3. Elizabeth Lin reigns supreme with visual storytelling

Who is elizabeth lin.

Elizabeth Lin is a San Francisco-based product designer and self-proclaimed fashion, teaching, and classical saxophone enthusiast.

What makes Elizabeth’s UX design portfolio so great?

Elizabeth Lin’s portfolio provides another excellent example of storytelling. Just like Moritz, she presents her design work in the form of case studies, documenting her process from start to finish.

What really stands out in Elizabeth’s portfolio, though, is her use of visuals to support the narrative she’s weaving.

Each point in her case study is illustrated with some kind of visual element—be it a virtual wall of Post-it notes, a survey form that was sent to research participants, or early-stage prototypes.

Another effective storytelling technique that Elizabeth uses is to include little bitesized notes and reflections down the right-hand side.

Set in a different font and color to the main body text, these snippets catch your eye as you scroll.

They provide further, more personal insights into the project—such as “It was cool seeing how differently teachers would use this dashboard” or “We didn’t move forward with this exploration because we wanted to validate the base solution first.”

Supporting your case studies with visual artifacts really brings the project to life. Elizabeth’s portfolio illustrates perfectly how visual and textual storytelling should work together to demonstrate your UX design process.

What can we learn from Elizabeth Lin?

The aim of your UX portfolio is to both show and tell. Just like Elizabeth, support each case study with meaningful visuals—that is, real artifacts from your project, not just illustrations.

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 sticky 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.

Don’t just tell the story of each project; bring it to life with visual artifacts. For each step you go through in your case study, include a photo or screenshot of how it looked in action.

View Elizabeth Lin’s full portfolio website

4. Olivia Truong showcases her approach to problem-solving

Who is olivia truong.

Olivia Truong is a product designer based in Boston, Massachusetts. In her own words, Olivia likes to go out into the world and capture its beauty and weirdness.

What makes Olivia’s UX design portfolio so great?

Above all else, UX designers are problem-solvers. Your UX design portfolio should therefore demonstrate how you identify and tackle a variety of user problems. Olivia’s portfolio does a great job of this, as you’ll see in her Routr case study .

Olivia kicks off her case study by framing the problem in a personal, relatable way. She doesn’t just talk about the “user” problem—she frames it as “our” problem, inviting the reader to step into the user’s shoes, just as she has done.

Next, Olivia explains, in detail, how she set about trying to solve this problem—in a section aptly named “There Must Be Something Out There”. We learn how she scoured the internet and App Store for a solution, only to find that none of the existing solutions fit the bill.

In the section that follows, “Taking The Dive”, Olivia shares the next steps in her problem-solving journey: brainstorming the elements of a successful date.

After thoroughly framing the problem and describing her approach to solving it, Olivia moves onto “The Making Of Routr.” Notice how, even when talking about her solution, Olivia consistently refers back to the original user problem.

Olivia’s portfolio portrays her as a thoughtful problem-solver—granting her huge bonus points in the eyes of any recruiter or potential client. This focus on problem-solving also conveys another essential UX trait: empathy for the user.

When reading Olivia’s case study, you don’t get the feeling that she’s just going through the motions; she’s genuinely engaged in the problem and how she can solve it for the user. That’s the sign of a passionate UX designer!

What can we learn from Olivia Truong?

UX designers are problem-solvers, so make sure your portfolio reflects that. There are two key lessons we can learn from Olivia’s portfolio: first, 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! Olivia describes how planning dates was a “headache” because “coming up with ideas was not the easiest thing to do in our busy lives.”

This is much more personal and empathy-driven than if she’d said “Users struggle to come up with date ideas because they’re so busy.” Last but not least, 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.

View Olivia Truong’s full portfolio website

5. Priyanka Gupta is the queen of the unsolicited redesign

Who is priyanka gupta.

Priyanka Gupta is a product designer and tech enthusiast based in San Francisco. Aside from creating awesome user experiences, Priyanka is also pretty active on Medium .

What makes Priyanka’s UX design portfolio so great?

Early on in your UX career, you might struggle to fill your portfolio with real projects. As your career progresses, you might look for ways to make your portfolio stand out. So what can you do?

Cue the unsolicited redesign à la Priyanka Gupta.

When Priyanka runs into bad UX, she can’t help but do something about it. Where most of us might just abandon ship and find an alternative product, Priyanka goes above and beyond: she redesigns the entire experience!

So, in addition to real client projects, Priyanka’s UX portfolio also showcases some rather impressive unsolicited redesigns.

One can’t help but be impressed by Priyanka’s initiative and drive. She’s gone out of her way to redesign an entire digital experience, just because she’s passionate about good UX—how cool is that?!

What’s also interesting is how Priyanka chooses to showcase these redesigns. She could just stick to the standard case study format, but as we know, she’s the kind of designer who likes to go above and beyond.

Click on one of her unsolicited portfolio pieces and you’ll be taken to a full-on, published blog post. Nice!

Despite the fact that these unsolicited redesigns are pure “passion projects”, Priyanka lends them the credibility they deserve by documenting her process in detail.

In her redesign of the Sephora iOS app , she starts by framing the problem: “Despite using the app religiously, I had trouble navigating through it. After observing that other people also experienced issues with the app, I pursued this redesign as an opportunity to improve the experience in any way I could.”

What follows is a detailed breakdown of every step she took to redesign the app, from brand analysis, user research, and affinity mapping , right through to persona creation, prototyping, and implementation—not forgetting those all-important visual artifacts that are absolutely crucial to UX storytelling!

What can we learn from Priyanka Gupta?

Priyanka is an experienced UX designer who presumably has plenty of real projects for her portfolio. This doesn’t stop her from conducting unsolicited redesigns when she comes across intolerably bad UX—as she puts it, it’s like an itch she just needs to scratch!

If you’re a new UX designer trying to build up your portfolio, take a leaf out of Priyanka’s book and complete some unsolicited redesigns of your own. This is a great way to demonstrate initiative and show that you’re a proactive designer who is willing to go the extra mile.

Just as Priyanka does, be transparent about the fact that these are unsolicited projects—a simple disclaimer is all you need.

Another valuable takeaway from Priyanka’s portfolio is the power of blogging. Priyanka doesn’t just limit herself to her portfolio website; she also shares her case studies and tips via Medium (where she’s accrued over a thousand followers!).

There are many different ways to share your process, so don’t be afraid to try a multichannel approach.

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.

View Priyanka Gupta’s full portfolio website

6. Lola Jiang delivers measurable outcomes and metrics

Who is lola jiang.

Lola Jiang is a California-based UX designer currently working at Google. Lola’s impressive resume includes having worked at YouTube as an interaction designer.

What makes Lola’s UX design portfolio so great?

One of the biggest challenges you’ll face as a UX designer is measuring and demonstrating the impact of your work. You know you’ve improved the user experience, but how do you substantiate that?

Look no further than Lola Jiang’s portfolio. Lola does an extremely important (yet scarce) thing: she puts the measurable impact of her UX design in the context of business needs.

Take her AI Training Platform case study, for example. Following a brief introduction to the project (literally one sentence), Lola offers the project’s outcomes: “The new design reduced task times by 68% and improved users’ subjective satisfaction by 139%.”

It’s immediate and impactful. Lola then takes us through the flow of the project, outlining the scale and scope of the work. She details the challenges, different iterations, and design, and clearly demonstrates the motivations behind decisions.

Lola rounds off her case study with a post-relaunch analysis, using concrete data to validate the final redesign: “With the original design, the set of tasks took 19 minutes. With the new design, the set of tasks took 6 minutes. Nearly 68%. Users’ subjective satisfaction with the new design (4.3/5) was 139% higher than the original design (1.8/5).”

What can we learn from Lola Jiang?

Lola does a great job of showing how she works in a business setting. This is crucial if you want to practice UX for a living, but it’s a trick that many designers tend to miss. While it’s true that you’re there to advocate for the user, it’s also important to recognize that companies have their own goals to meet—and you need to show how UX contributes to that.

If, like Lola, you can demonstrate how your work brings value, you’ll set yourself up for some serious bonus points. If you have data related to the project, this will be easy—but what if there aren’t any concrete metrics to showcase?

Even without data, you can frame your work in a business context. 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.

For example, creating a more pleasant app experience for the user should help to boost customer retention.

Likewise, establish a few success metrics before you begin. How will you measure the impact of your work? What tell-tale signs will you look out for after you’ve launched or relaunched the product? The best UX designers are those who can advocate for the user while meeting the needs of the business, so try to convey this throughout your portfolio.

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.

View Lola Jiang’s full portfolio website.

7. Daniel Autry features “just the right amount” of portfolio projects

Who is daniel autry.

Daniel Autry is a designer, developer, and behavioural researcher based in Charlottesville, Virginia. He is fascinated by the social product space and is currently researching the intersection between technology and mental illness.

What makes Daniel’s UX design portfolio so great?

Daniel Autry’s portfolio features some remarkable work in the mental health space, but that’s not the only reason he’s made it onto this list. Daniel’s portfolio also helps to answer that all-too-common conundrum: What’s the “right” amount of projects to showcase in your UX design portfolio?

Before we go any further, let’s be clear on one thing: There’s no “magic number” when it comes to portfolio projects. Some people will tell you five, others will say three—you might even hear that one is enough!

Daniel has opted to showcase four projects in his UX portfolio, and while we’re not saying that he’s found THE magic number, it is a magic number of sorts.

In other words, Daniel has found the number that works for him: He features just enough projects to showcase his range as a designer while still keeping it limited enough so as not to overwhelm the user—smart UX design in action!

In the space of just four featured case studies, we see that Daniel is a versatile designer who has worked on a variety of projects across a range of sectors—from mental health to financial trading to e-learning. So, it’s not just about how many projects you showcase; it’s just as important to pick a good variety.

Besides his four featured projects, Daniel’s portfolio also includes a section dedicated to “Other Works”. Here, he links to articles he’s written on Medium, additional projects he’s worked on, as well as upcoming endeavors.

This is a great way to divide your portfolio, especially if you’re struggling to decide which of your best work should feature!

What can we learn from Daniel Autry?

Daniel’s portfolio teaches us an important lesson about the “right” number of portfolio projects: There isn’t one! Every UX designer is unique, and your portfolio should reflect that.

Don’t get too hung up on whether you should include three projects or five; focus instead on 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: a hiring manager looking through your portfolio probably won’t browse through ten UX case studies, so choose wisely!

There is no hard-and-fast rule when it comes to how many projects you should feature in your portfolio. 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.

View Daniel Autry’s full portfolio website

8. Vera Chen highlights the importance of context

Who is vera chen.

Vera Chen is a product designer and former Facebook intern. She has a Master’s degree in Human-Centered Design and Engineering, and has also dabbled in singing and acting.

What makes Vera’s UX design portfolio so great?

Not only is Vera’s portfolio a beautiful thing to behold (just look at those illustrations!); it also highlights the importance of context when presenting your UX work.

Vera doesn’t just outline the problem statement for each case study—she steeps it in a solid back story, describing the events that led her there. She also clearly explains her role on each project, who she worked with, and what design and prototyping tools and methods they used.

Just by including these few extra details, Vera paints a clear picture of what the project entailed and how she contributed. Another excellent example of UX storytelling!

Let’s take Vera’s Wedding Library case study , for example. See how she dedicates two whole sections to setting the scene? First, there’s the project background which lays out the scope of the project. Then there’s the context section, a detailed story about newlyweds Murphy and Diana and the frustrations they faced when planning two weddings.

Vera doesn’t just tell us what the problem is. She shows us exactly how it came to light, and in what capacity she was employed to help solve it. By the time we scroll down to Vera’s process, it’s easy to see where each step fits into the overall project.

It’s a bit like reading a novel: you need a little bit of background before you can start relating to the characters and the plot.

What can we learn from Vera Chen?

There are two very simple yet effective takeaways to be had from Vera’s portfolio. First and foremost, provide plenty of background context—this works wonders when telling the story of each case study.

Vera doesn’t start with the problem statement; she sets the scene, describing the people, events, and circumstances that surround and lead up to this particular design challenge. Aim to precede your problem statement with a small paragraph dedicated to “setting the scene”.

Secondly, state your role on each project. What were you commissioned to do? Where did you fit into the overall team? At the same time, 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!

For each case study in your UX portfolio, 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.

View Vera Chen’s full portfolio website

9. Zara Drei bedazzles with awesome UX and UI

Who is zara drei.

Zara Drei is a London-based UX designer. When she’s not solving problems with beautiful, user-centric web products, you can find her playing around with electronics, making video loops, building ceramic and metal sculptures, or producing electronic music.

What makes Zara’s UX design portfolio so great?

We’ve talked a lot about the importance of showcasing your UX design process. Now it’s time to contemplate the power of beautiful UI! This brings us to Zara Drei’s portfolio—the epitome of digital elegance.

Zara specializes in creating digital products and experiences for luxury, fashion, and beauty brands, and this is reflected in every detail of her portfolio.

In fact, scrolling through Zara’s portfolio is like wandering through the beauty department of a high-end store, or flipping through the pages of a glossy magazine—and that’s no accident.

She has given as much thought to her color palette , typography , and imagery as she has to writing up her case studies and sharing her process. The result? A flawless portfolio that truly makes its mark.

What can we learn from Zara Drei?

Your UX design portfolio is not just a website—it’s part of your personal brand. Like your case studies, the overall aesthetic of your portfolio should tell a story about who you are as a designer. Consider how Zara uses color and imagery to evoke a sense of luxury throughout her portfolio; how can you create a similar effect?

Spend some time figuring out your personal brand. Are you fun and quirky? Artsy and edgy? Corporate and serious? Perhaps you’re all about eco-friendly design.

Once you’ve got a theme in mind, you can start to think about the kinds of colors and imagery that will help to convey this. Just because you’re a UX designer doesn’t mean you can neglect the visual design of your portfolio.

Your portfolio should embody your personal brand, so treat it like any other UX project and give it the high-shine finish it deserves!

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!

View Zara Drei’s full portfolio website

10. Minimalism from Victoria Kazakova

Who is victoria kazakova.

Victoria Kazakova is a Polish UX designer, web developer, and photographer. 

What makes Victoria’s UX design portfolio so great?

In the enormous and sometimes confusing online world we trawl through daily, Victoria Kazakova’s UX portfolio wins the prize for clarity and ease of understanding. 

Throughout Victoria’s portfolio, she sticks to a minimalist design palette and clear signage, a simplicity that makes for a delightfully smooth read. 

Better still, words that spring up on command stroll through the portfolio, leading the reader from section to section. 

Charts and graphics displaying her skills and experience are so simple they appear iconic. There’s no chance the reader could feel lost or confused.  

What can we learn from Victoria Kazakova?

When it comes to graphic design, sometimes simplicity is best. The last thing you want to happen when someone reads over your portfolio is for them to feel overwhelmed with data.

Victoria’s portfolio is a great example of how responsive screens can ease the user’s journey through pages of information. 

Don’t be tempted to overload. Stick to two classy fonts and an inoffensive colorway. These simple building blocks can lead the user’s eye as they navigate your work. 

View Victoria Kazakova’s full UX portfolio

11. Yu-Hsuan offers zero-gravity UX

Who is yu-hsuan.

Yu-Hsuan is a UX designer, currently working for Google as an interaction designer. 

What makes Yu-Hsuan’s UX design portfolio so great?

Yu-Hsuan’s impressive role at Google means that many of her current projects are “locked” due to non-disclosure agreements. This is a common problem in the UX design community and a hurdle many designers face when putting together their portfolios. 

Yu-Hsuan’s deft solution is to focus on the illustrative side of her UX portfolio, which showcases her passion and side projects as a graphic designer and game designer. 

She also uses her illustrations to depict the otherwise locked aspects of the projects she’s describing. This gives a lovely cohesion with the rest of the content in her portfolio and reduces the jarring effect locked projects can sometimes have. 

The floating designer illustration that seems to hover over the portfolio is very cool and points at a sense of fun and creativity necessary to succeed in illustration and gaming. 

What can we learn from Yu-Hsuan?

Through her illustrations, Yu-Hsuan has subtly displayed her UX skills in her portfolio itself. 

This visual approach means the separate parts of the portfolio hang together perfectly, even when some of the projects are locked off. 

Another tip from Yu-Hsuan is to be approachable in your portfolio. Dropping in the line “Please contact me if you want to go through the case study” gives a real sense of openness, collaboration, and sharing. 

If you can’t show direct evidence of a project, don’t hesitate to get creative. A strong visual style not only shows off your design chops but helps a large portfolio hang together nicely. Also, be approachable!

View Yu-Hsuan’s full UX portfolio

12. A holistic introduction to Cristina Gafitescu

Who is cristina gafitescu.

Romania-based Cristina Gafitescu is a junior UX designer with a playful approach to visual design.

What makes Cristina Gafitescu’s UX design portfolio so great?

Cristina’s UX portfolio makes a great first impression as it tells her story in an interesting-to-follow, visually engaging way. 

Her playful page layouts and graphics show Cristina’s panache as an illustrator and designer. They also provide a great backdrop as she offers a holistic introduction to herself. 

Through a post-it note, almost diaristic approach, the reader really gets a feel for what kind of person Cristina is, her education and experience, and what attracted her to UX in the first place. 

That’s not to say this portfolio is totally informal. Cristina also does a great job of showing her processes, identifying problems (with a focus on UX research), solutions, and testing. 

When the temptation may be to opt for oblique, abstract graphics that display your design chops in the coolest terms, save a thought for a more intimate approach. 

Cristina’s portfolio is emotionally honest, charming, and informative. The effect on recruiters—especially those suffering from portfolio fatigue—is likely persuasive. 

View Cristina Gafitescu’s full UX portfolio

13. The spatial awareness of Rucha Moghe

Who is rucha moghe.

Rucha Moghe is a UX designer with a background in architecture based in India. 

What makes Rucha Moghe’s UX design portfolio so great?

From start to finish, Rucha’s UX portfolio ticks all the right boxes. It’s visually strong and easy to digest. Her user journey map is smart and in context, and the user flows, wireframes, and usability study are all useful.    

Tehni: A Plant App is an especially great case study and easy to follow. On the whole, Rucha’s portfolio is incredibly strong on user personas. 

As Rucha suggests, her background as an architect provides her portfolio with a great sense of user-centered design principles, spatial awareness, and problem-solving skills transferable to digital spaces. 

No space feels wasted, nothing is jumbled, and the reader never feels lost or confused. This is architectural elegance in portfolio form. 

Reinventing the wheel in your portfolio isn’t necessarily a good idea. Rucha’s portfolio nails the basics: it’s logical with an easy-to-follow narrative that shows how user problems were solved. It’s bold and eye-catching and features great user personas.

View Rucha Moghe’s full UX portfolio  

14. Nguyen Duc Thang’s deep case studies

Who is nguyen duc thang.

Nguyen Duc Thang is a UX designer based in Hanoi, Vietnam. Although just starting in his career, Nguyen Duc Thang knows how to put together a really strong portfolio. 

What makes Nguyen Duc Thang’s UX design portfolio so great?

Much like Rucha Moghe, Nguyen Duc Thang’s UX portfolio gets the basics right despite the difference in experience. 

Nguyen Duc Thang’s branding is particularly strong, with eye-catching graphics consistently holding the content together throughout the document. 

After introducing himself, Nguyen Duc Thang covers his skills and qualifications before launching into extensive case studies. No stone is left unturned in these exhaustive examples, which detail wireframing, prototyping, testing, user personas, visual design, and information architecture. Bravo! 

Don’t scrimp on your case studies. Tell the world how you nailed that project, from top to tail.

View Nguyen Duc Thang’s full UX portfolio

15. Precocious design from Gilbert Christian

Who is gilbert christian.

Gilbert Christian is an Indonesian UX design student in the early stages of his career. As Gilbert mentions in his portfolio, he’s open to all manner of part-time, voluntary work, or UX internship programs. 

What makes Gilbert Christian’s UX design portfolio so great?

Despite his relative inexperience, Gilbert’s UX portfolio is extremely easy on the eye, with strong data visualization and imagery leading you from one page to the next.   

Gilbert’s case studies show a maturity beyond his experience, with thorough documentation giving us insight into his work processes. 

Gilbert’s portfolio is stunning and applies the same key UX design principles present in his work. 

If in doubt, build a logical narrative showing how a problem was understood, defined, and solved. 

View Gilbert Christian’s full UX portfolio

16. Valentina Gigli’s bold branding

Who is valentina gigli.

Valentina Gigli is a junior UX designer based in Argentina.  

What makes Valentina Gigli’s UX design portfolio so great?

Aside from the bold color scheme and font choice, Valentina keeps things simple with her portfolio. 

After introducing herself, Valentina discusses her “aptitude palette”, before moving on to her design examples. 

Whether you’re a fan of purplish magenta or not, the bold titles and lurid colors certainly make for clear signposting and remain in the mind’s eye for some time after looking away, a key sign of successful branding. 

When it comes to color schemes and fonts, it’s tempting to play it safe. Taking some risks may mean your portfolio pops out from the crowd.

View Valentina Gigli’s full UX portfolio

17. Aleyna Aykanat raises a smile

Who is aleyna aykanat.

Akeyna Aykanat is a Turkish UX designer with skills in public speaking, 3D product modeling, and graphic design.

What makes Aleyna Aykanat’s UX design portfolio so great?

Aleyna’s work is in monochrome black and white, with grainy charcoal textures offering depth to each slide. 

The result feels mature and assured—and Aleyna has the content to match it, too. 

After what feels like a serious offering, Aleyna offers something of a UX visual joke at the end of her portfolio, including a fake loading page, before bidding us farewell. 

Overall, it leaves one with the impression of Aleyna as a fun-loving lateral thinker—just the kind of person we’d like on our team. 

Many UX design portfolios are made using guidelines shared amongst tens of thousands of junior designers at bootcamps and other learning establishments. 

These cookie-cutter portfolios can feel a little soulless and may result in recruiters developing a kind of portfolio fatigue. 

As Aleyna shows so elegantly, including a curveball element—in this case, the joke towards the end of her portfolio—shows the portfolio has been assembled with care and craft, not painted by numbers.  

View Aleyna Aykanat’s full UX portfolio

18. Sharon Kravanja’s scrapbook stylings

Who is sharon kravanja.

Sharon Kravanja is a Parisian UX designer at the beginning of her career.

What makes Sharon Kravanja’s UX design portfolio so great?

From the outset, Sharon makes no bones about her very junior status as a UX designer. This is reflected in her opening statement and the primitive doodles that annotate and decorate each portfolio page. 

Despite this seemingly youthful approach, Sharon’s visual scrapbook style demonstrates impressive self-branding. Scribbles and sweeps bring cohesion to all the moving parts of the portfolio while playfully communicating Sharon’s self-awareness as an inexperienced but sincere and brave designer. 

Be yourself. A recruiter will sooner remember Sharon’s somewhat youthfully exuberant portfolio over safer designs.

View Sharon Kravanja ’ s full UX portfolio

19. Sophisticated graphics from Anna Hlushko

Who is anna hlushko.

Anna Hlushko is a Ukrainian UX designer with a self-professed focus on minimalism. 

What makes Anna Hlushko’s UX design portfolio so great?

Anna Hlushko’s portfolio speaks of a detail-oriented UX designer with serious design chops. 

Modernist typography and dark, grainy hues glue the elements of this portfolio in place. Anna’s graphic design skills are at the higher end of the spectrum, and these pages wouldn’t look out of place in a MoMA brochure.

Beyond the slick exterior, Anna also touches on her approach to tackling stages of work, including research, and details some case studies. 

Play to your strengths. If visual design is your thing, make sure your portfolio pops. This may be the one chance you have to show off your chops. 

View Anna Hlushko’s full UX portfolio

20. Thorough research by Hoàng Kỳ Phong

Who is hoàng kỳ phong.

Hoàng Kỳ Phong is a Hanoi-based UX designer passionate about art and design. 

What makes Hoàng Kỳ Phong’s UX design portfolio so great?

With black and white images projected onto a backdrop of cartridge paper, Hoàng Kỳ Phong’s portfolio has a classic feel. 

Structurally, it is a masterclass in logical layout and digestible design. Extra marks are awarded for detailed market research and survey information. 

Consider the user at every step by demonstrating the process and results.

View Hoàng Kỳ Phong’s UX portfolio

Why do you need a UX design portfolio?

When creating an impressive UX portfolio, it’s important to understand exactly what your portfolio should achieve. What information should your portfolio present? What do you want people to learn about you and your work when they land on your portfolio?

Your UX design portfolio is not just a virtual gallery of all your most beautiful work. It’s a carefully crafted story that offers a behind-the-scenes look at your methods and processes.

How do you tackle different UX design challenges? What’s your approach to solving problems? Are you user-centric?

It should introduce you as a designer and give the viewer an understanding of your work. And, of course, all of these insights should come gift-wrapped in a visually engaging, user-friendly package.

How to build an amazing UX portfolio

Since a portfolio is all about showcasing your work as a designer, it’s obvious that you need to get some experience so that you have work to spotlight in the first place.

But what if you don’t have any industry experience (yet)? Not to worry.

It’s entirely possibly to build a strong portfolio, break into the industry, and succeed without previous UX design experience . One great place to start is by taking a free UX design short course to make sure you’re cut out for this area of the design field.

Next, you can then to enroll in a UX design certification program —preferably one that provides personalized UX mentorship and portfolio reviews.

To see a live portfolio review with a seasoned UX designer, check out this video:

Beyond this, you want to make sure that your portfolio meets these criteria:

• Includes a memorable introduction
• Consists of just the right number of high-quality UX case studies
• Demonstrates reflexivity —shows your ability to reflect and learn
• User-friendly format (practice what you preach)
• Excellent UI design —shows you know what a good, polished final product looks like

To learn more about these five criteria (and how to meet them), read more in this guide: Five Golden Rules to Build a Job-Winning UX Design Portfolio .

Where else can you look for UX design portfolio inspiration?

That just about concludes our selection of awesome UX design portfolios from around the web. We hope this list has given you a feel for some of the most important UX design portfolio best practices and left you feeling suitably inspired.

For more portfolio inspiration, check out websites like Bestfolios , Behance , and Dribbble . For further tips and advice on building your own UX design portfolio, check out these articles:

• 9 Awesome Portfolios From UX Design Bootcamp Graduates
• How I Designed And Built My UX Design Portfolio From Scratch
• 9 Free Websites for Building You UX/UI Portfolio

And finally, if you’re a UX designer looking to specialize, we’ve also written guides to build portfolios for UX writing and UX research . If you spot any further examples of great portfolios while navigating the web, do let us know so we can add them to the list.

Want to keep exploring UX design? Here are a few other articles you might like:

• How to become a UX designer in under one year
• Do you need a degree to become a UX designer?
• 7 best practices to help keep your UX skillset in shape
• How Nikolaos became a UX designer

And if you’re on the hunt for even more UX design inspiration, here are 15 quotes from design masters .

Frequently asked portfolio (FAQ) about UX portfolios

What should be in a UX portfolio?

A UX portfolio should showcase your expertise, understanding, and passion for UX. A portfolio can include elements like case studies, design, personal projects, examples of your process, and should be presented in a visually pleasing way.

How do I start a UX portfolio for beginners?

A beginner’s UX portfolio is a vital tool for entering the industry. Highlight your passion and motivation for the UX design, include your personal approaches, and if you have minimal case studies to present, include personal projects. 

How do I build my UX portfolio?

With the amount of free templates available online, building your UX portfolio has never been easier. However, it’s important to not limit yourself to a standardized approach and showcase your own unique talent. 

First and foremost, choose your projects and case studies carefully. Then present them in a logical narrative that tells a story about your design process. In your descriptions, highlight your motivations and thought processes.

Across your portfolio, focus on showcasing your design skills and problem-solving abilities, and keep your portfolio up-to-date with your latest work. Be sure to customize your portfolio for the audience.

Product Design Bundle and save

User Research New

Content Design

UX Design Fundamentals

Software and Coding Fundamentals for UX

• UX training for teams
• Hire our alumni
• Journal of UX Leadership
• Our mission
• Advisory Council

Education for every phase of your UX career

Professional Diploma

Learn the full user experience (UX) process from research to interaction design to prototyping.

Combine the UX Diploma with the UI Certificate to pursue a career as a product designer.

Professional Certificates

Learn how to plan, execute, analyse and communicate user research effectively.

Learn the principles of content design, from mastering tone and style, to writing for interfaces.

Understand the fundamentals of UI elements and design systems, as well as the role of UI in UX.

Short Courses

Gain a solid foundation in the philosophy, principles and methods of user experience design.

Learn the essentials of software development so you can work more effectively with developers.

Give your team the skills, knowledge and mindset to create great digital products

Join our hiring programme and access our list of certified professionals.

Learn about our mission to set the global standard in UX education

Meet our leadership team with UX and education expertise

Members of the council connect us to the wider UX industry

Our team are available to answer any of your questions

Fresh insights from experts, alumni and the wider design community

Read stories from our students who have made successful careers in UX after completing our course

Portfolio and case study inspiration from Miro’s Srecko Dimitrijevic

Looking for some portfolio and case study inspiration? Well, look no further. Product Designer Srecko Dimitrijevic shares some of his go-to UX and product design portfolios and case studies.

The State of UX Hiring Report 2024

Learn how to start your UX career with hard facts and practical advice from those who have gone before you. In this report, we look at UX hiring trends in 2024 to help you break into the industry.

In our recent Day in the Life live event with Miro’s Srecko Dimitrijevic, the Product Designer shared some valuable insights into breaking into the design world. With a heavy emphasis on transparency, confidence and communication, Srecko outlined the challenges he has faced in his career and how he overcame them. 

However, he believes that designers should never stop growing and learning. Designers should always be looking for new ideas and showcasing their latest work. Srecko shared a list of resources that he turns to for portfolio and case study inspiration.

You can watch our full conversation with Srecko here .

[GET CERTIFIED IN UX] Take our Professional Diploma in UX Design course

Portfolio inspiration .

Whether you’re brand new to UX or revamping your career, your portfolio is one of the most important assets you can have.  So if you are on the hunt for a new job or simply want to leave your mark online, take a look at some of Srecko’s favourite portfolios from people working in UX, UI and product design.

Graeme Rutherford is a UX, interactive and service designer who done design work for the Department for Education in the United Kingdom, NHS Digital, British Gas, the United Nations, Riddle and more. 

Arjun Mahesh is a product designer with payment app Stripe . In the past, he has teams and shipped products with companies like Kickstarter, Frank Gehry, Google, Amazon, and BCG. 

Darshan Gajara is the Head of Design at Hygraph  and the publisher of Product Disrupt . On his blog, he shares his thoughts on design and travel, as well as sharing links to his own case studies for different product design projects.

Alexander Kirov is a full-stack product designer and the head of UX in the visual communications department at Logitech . He links to a number of his own design case studies on his portfolio, which had a nice blend of humour, professionalism and simplistic yet effective designs.

Pratibha Joshi is a Product Designer with Google. She has previous working experience with Microsoft and Sprinklr, specialising in social media engagement, social advertising, content marketing , care support and analytics. In her spare time, she likes to experiment with new interactions and techniques in prototyping.

Jonny Czar is the Lead Product Designer at the online shopping community Pepper . His portfolio links to all of the work he has done throughout his career with clients like Bookify, N26 and Itaú , as well as written work on UX topics like design feedback, usability testing and the design hiring process.

Runar Gudbjartsson II is an Icelandic designer who is now based in New York, where he works as a Product Designer with WeWork . His portfolio is as personable as it is professional, teaching us about him as a person and a designer. He shares different case studies from his career, including a redesign for PayPal and an ATM finder feature for PayPal users.

Jeremy Kim is a designer and web developer. Currently, he works on the designs systems team for Messenger and Instagram Direct for Meta. Previously, he worked for Quora and Shopify . On his website, he links to his resumé and – very cleverly – he shares a timeline of his ever-changing portfolio that captures his growth as a professional designer.

Zero is a self-taught product designer who is currently a Senior Product Designer with Soundcloud . He is big on design system advocacy, accessibility and collaboration. While he shares some case studies for their work with Soundcloud, he also links to Figma plug ins that he designed to create more efficient designs.

[GET CERTIFIED IN UX]

Case studies

“When you do a certain design, you should have a reason why you did it and that reason shouldn’t be a hunch or something like that. It should be evidence-based reasons,” explains Srecko . “Heavy rationale will anticipate a lot of questions that you’re gonna get down the road and the more you understand, the more confident you will talk about it.”

This is where case studies come in. They detail your design process from start to finish, explaining the why behind every decision and providing that all-important rationale. No matter what level you are at in your design career, case studies are an excellent way to keep track of and to document your work.

Here are some of Srecko’s favourite case studies.

• UX for the Masses is a UX blog run by product design leader Neil Turner. He looks into how we can redesign the holiday booking process by comparing and then redesigning the user journey for people using Firstchoice.co.uk  and  Thomson.co.uk .
• Abdus Salam asks how might we reimagine the future of television on his blog. As a former Product Designer for TV Guide, which is part of the CBS Interactive brand, he uses flow charts and sketches to assess how people really watch television.
• Taking a quirky approach to the case study, Harry Dry documents how his idea of creating a dating website for Kanye West fans went viral in The Kanye Story . In his full-time role, Harry writes marketing case studies but for fun, he writes case studies about all things Yeezy.
• Erick Mazer Yamashita, a Senior Product Designer with Nubank, details how the design team came up with the concept of  the credit card NuConta , a single account that allows people to save, invest and transfer money in real-time. He explains the whys and the hows of this great idea, whereas….
• … Lucas Neumann , Erick’s former NuBank colleague who is now the Staff Product Designer at Twitter, explains how NuBank’s design team turned this new money-saving credit card concept into a reality .
• With a pretty impressive portfolio, Arshad Wala uses a case study on the UX of the Xbox to demonstrate his problem-solving and design skills. In a goal to improve accessibility of Xbox content outside of desktop use, he lay outs the issues that need to be solved and clearly highlights the objectives of his case study.
• Freelance product designer, web designer and webflow developer Dang Nguyen  took it into his own hands to do a redesign of Soundcloud . He has never worked for Soundcloud but as a fan of the music streaming service, he wanted to erase the pain-points in the mobile version of the app.

And, finally, Srecko shared some basic resources to help you with your online portfolio. Check out Frank Gaine’s handy UX portfolio template to get you started. And as you are adding the final touches, let Sarah Doody’s words of wisdom sharpen up the final product: you are not the user of your UX portfolio.

Subscribe to our newsletter

Get the best UX insights and career advice direct to your inbox each month.

Thanks for subscribing to our newsletter

You'll now get the best career advice, industry insights and UX community content, direct to your inbox every month.

Upcoming courses

Professional diploma in ux design.

Learn the full UX process, from research to design to prototyping.

Professional Certificate in UI Design

Master key concepts and techniques of UI design.

Certificate in Software and Coding Fundamentals for UX

Collaborate effectively with software developers.

Certificate in UX Design Fundamentals

Get a comprehensive introduction to UX design.

Professional Certificate in Content Design

Learn the skills you need to start a career in content design.

Professional Certificate in User Research

Master the research skills that make UX professionals so valuable.

Upcoming course

Build your UX career with a globally-recognised, industry-approved certification. Get the mindset, the skills and the confidence of UX designers.

You may also like

Your guide to landing a job in UX: Top insights from UX Design Institute’s State of UX Hiring Report 2024

Is the UX job market oversaturated? An in-depth analysis and outlook for 2024

10 of the best free UX design courses in 2024

Build your UX career with a globally recognised, industry-approved qualification. Get the mindset, the confidence and the skills that make UX designers so valuable.

20+ Outstanding UX/UI Design Case Studies

Discover an expertly curated collection of 20+ inspirational UX/UI design case studies that will empower you to create outstanding case studies for your own portfolio.

• Comprehensive end-to-end case studies covering research, ideation, design, testing, and conclusions.
• Perfect for designers building portfolios and looking for inspiration to create their own case studies.
• Learn new methods and techniques, improve your understanding, and apply them to your projects.
• Gain insights from the successes and challenges of accomplished designers.

Want to get access to 30+ more case studies including smart tagging system?

Download full version

All case studies included in this collection are sourced from real designers' portfolios and are used for the purpose of learning and inspiration. The original authors retain all rights to their work.

Find the images you need to make standout work. If it’s in your head, it’s on our site.

• Images home
• Curated collections
• AI image generator
• Offset images
• Backgrounds/Textures
• Business/Finance
• Sports/Recreation
• Animals/Wildlife
• Beauty/Fashion
• Celebrities
• Food and Drink
• Illustrations/Clip-Art
• Miscellaneous
• Parks/Outdoor
• Buildings/Landmarks
• Healthcare/Medical
• Signs/Symbols
• Transportation
• All categories
• Editorial video
• Shutterstock Select
• Shutterstock Elements
• Health Care
• PremiumBeat
• Templates Home
• Instagram all
• Highlight covers
• Facebook all
• Carousel ads
• Cover photos
• Event covers
• Youtube all
• Channel Art
• Etsy big banner
• Etsy mini banner
• Etsy shop icon
• Pinterest all
• Pinterest pins
• Twitter all
• Twitter Banner
• Infographics
• Zoom backgrounds
• Announcements
• Certificates
• Gift Certificates
• Real Estate Flyer
• Travel Brochures
• Anniversary
• Baby Shower
• Mother’s Day
• Thanksgiving
• All Invitations
• Party invitations
• Wedding invitations
• Book Covers
• Editorial home
• Entertainment
• About Creative Flow
• Create editor
• Content calendar
• Photo editor
• Background remover
• Collage maker
• Resize image
• Color palettes
• Color palette generator
• Image converter
• Contributors
• PremiumBeat blog
• Invitations
• Design Inspiration
• Design Resources
• Design Elements & Principles
• Contributor Support
• Marketing Assets
• Cards and Invitations
• Social Media Designs
• Print Projects
• Organizational Tools
• Case Studies
• Platform Solutions
• Generative AI
• Computer Vision
• Free Downloads
• Create Fund

An Expert’s Guide to Creating Graphic Design Case Studies

Case studies are a powerful tool in the creative industry. Being able to review your work, look at what you’ve accomplished, and learn from it is incredibly useful. But beyond being a tool to sharpen your skills, a case study is an invaluable marketing asset to have at your disposal. In an industry as competitive as design, a graphic design case study could become the driving force of your portfolio.

Since case studies are so powerful — going beyond simple testimonials and work screenshots — spending the time and effort to create an effective, well-done study pays for itself many times over. So how do you get the most out of your graphic design case study?

This quick guide will cover how to make an effective case study for your portfolio. Here are the key components:

• Targeting : Focus on a past client that represents your ideal future client.
• Perspective : Write in the client’s perspective so potential clients can easily relate.
• Narrative : Don’t be dry – tell a story about the client’s needs and your design process.
• Data : Show the success of your work through cold hard facts and numbers.

Read on for more case study insights from Wes McDowell of The Deep End Design .

Write for your ideal client

The first step in any case study is figuring out who to write about. Most likely, you have dozens — if not hundreds (if you’re doing your job right) — of happy clients to choose from. So how do you choose the best of the bunch?

The easiest and most effective way to figure out which client to focus on is by figuring out who you want to appeal to. Take a moment and try to visualize your ideal client. Maybe it’s someone in the music industry because of all those record-label internships you had in college. Or maybe you want to attract people in the healthcare industry. Whoever your ideal client is, and whatever the reasons, start there.

Once you’ve got your ideal client in mind, think about similar clients you’ve already helped. Maybe you designed a website for a new band last week. Or maybe you created a logo for your favorite doctor’s group practice. Starting with related case studies helps you to attract more of the same.

Write about the client, not about yourself

Writing a case study from the perspective of the client is another effective method. Writing about the specific issues that made them come to you in the first place is a great place to start.

If a potential new client can read the study and easily put themselves in the shoes of someone you’ve already helped, then congratulations — you’re on your way to a study done right. Prospects who can read it and think, “That’s my problem too!” will immediately feel that you can really help them. And that leads to more inquiries and even more clients.

Tell a story

Everyone loves to hear a good story, whether it’s what your friend saw her neighbor doing on her lawn, or how that crazy SUV driver cut off your brother in traffic today. Case studies might sound boring, but a well-crafted one isn’t.

Take your potential client on a journey from start to finish. Begin with who the original client was, what they do, and why they contacted you. Take the reader through your process: how you identified ways to help, how you met with the client, and what changes you implemented. Then reveal what the work looked like when it was done, how the client felt, and the end results.

Here’s a good example from the folks at Erskine Design. They draw you in from the first line, explaining why they were contacted, and walking you through the process from start to finish. There are also plenty of visuals to show you what work was being done and how.

Share the results

Last, and most certainly not least, be sure to use real, hard data. Some clients will scan your case studies just for that data. Maybe they aren’t interested in the journey, or how your old client is now your best friend who brings you apple pie on Sundays. That doesn’t make the story less important, but prospects need also to be assured that if they hire you, you’ll get results.

By all means, give them what they’re looking for. Show how your client’s traffic jumped from 100 people a day to 300. Show how sales increased by 20% because they hired you. Use real, hard, and authentic data.

This is incredibly important for those of us who handle a lot of SEO, SEM, or writing work. SEO MOZ has a very well-done case study that drives the point home. Here, they show us all the before-mentioned tactics — plus plenty of data, showing off exactly what they were able to accomplish and how.

Final thoughts

While the thought of writing a full case study may sound daunting (and a bit like homework), it doesn’t have to be. Prospective clients don’t want to read inside jargon any more than you want to write it, so feel free to write the way you would speak. Just tell a good story about how you took a client with a problem and effectively solved that problem for them, along with why you made some of the choices you did. It’s really just that simple.

Wes McDowell is the lead designer, blogger, and podcast host at The Deep End Design in Los Angeles.

Top image by Dmitriy Domino

All other images by  Darko 1981

Recently viewed

Related Posts

How to Design Podcast Cover Art

Your podcast’s visual identity is just as important as its content. Try seven tips to make your podcast covers stand out from the crowd.

Movie Poster Design Ideas for 2024

It’s time to build some buzz, filmmaker! Check out these movie poster ideas for 10 popular genres and get must-know tips to make your own.

Serif vs Sans-Serif Fonts: What’s the Difference?

In this article, we’ll discover more about the charming nature…

8 Pro Tips for Font Pairing

Learn how to use serif, sans-serif, and display fonts in print and web design with these expert typography tips for font pairing.

© 2023 Shutterstock Inc. All rights reserved.

• Terms of use
• License agreement
• Privacy policy
• Social media guidelines

Skip navigation

• Log in to UX Certification

World Leaders in Research-Based User Experience

Creating a ux design portfolio case study.

Summary:  A 7-step process to creating a case study for your portfolio: how to describe your design, the UX process that led to this specific user interface, and the business impact of the design.

3 minute video by 2019-11-08 3

• Rachel Krause

Share this article:

• Share this video:

You must have javascript and cookies enabled in order to display videos.

Video Author

Rachel Krause is a Senior User Experience Specialist with Nielsen Norman Group. Her areas of expertise include storytelling, UX in agile, design thinking, scaling design, and UX leadership. She has also planned and conducted research on careers, UX maturity, and intranets for clients and practitioners in numerous industries.

• Share: 

Subscribe to the weekly newsletter to get notified about future articles.

UX Portfolio Updates: A New Year's Resolution

5 minute video

UX Portfolios: What Hiring Managers Look For

4 minute video

UX Portfolios: Preparing for Interviews

2 minute video

UX Portfolios

3 minute video

• 5 Steps to Creating a UX-Design Portfolio
• Portfolios for UX Researchers: Top 10 Recommendations
• Pilot Testing: Getting It Right (Before) the First Time
• Typography Terms Cheat Sheet
• Case Study: Iterative Design and Prototype Testing of the NN/g Homepage

Research Reports

• Intranet Design Annual: 2020
• Intranet Design Annual: 2019
• User Experience Careers

UX Conference Training Course

• UX Basic Training
• Persuasive and Emotional Design
• Omnichannel Journeys and Customer Experience
• Lean UX and Agile
• Personas: Turn User Data Into User-Centered Design

Building and Scaling a Design System in Figma: A Case Study

Building a design system for a multinational company means cataloging every component in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how one design system team leader accomplished it.

By Abigail Beshkin

Abigail is a veteran of Pratt Institute and Columbia Business School, where she oversaw the design and production team for Columbia Business magazine. Her work has appeared in the New York Times and been heard on NPR.

Determining how to build a design system for a multinational company means cataloging every component and pattern in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how one design system team leader accomplished it.

When Switzerland-based holding company ABB set out to create a design system , the goal was to knit together a consistent look and feel for hundreds of software products, many of which power the mechanical systems that keep factories, mines, and other industrial sites humming. It was no small task for a company with almost two dozen business units and nearly 150,000 employees around the world. For Abdul Sial , who served as the lead product designer on ABB’s 10-person design system team, scaling the library of components and patterns depended on maintaining openness and transparency, with an emphasis on extensive documentation.

The Role of a Design System Designer

Increasingly, large companies like ABB have teams dedicated exclusively to creating and maintaining design systems. “A design system allows for consistency, going to market in a fair time and not allowing production to get stuck on customizations that are not building value,” says Madrid-based designer Alejandro Velasco . Or, as Alexandre Brito , a designer in Lisbon, Portugal, explains, “Design systems come to provide structure whenever there are many people using the same set of tools. It’s like everyone having the same language.”

If a traditional style guide covers the design basics—fonts and colors, for instance—a design system has a much further reach. “A design system is a mix of a style guide, plus design components, design patterns, code components and, on top of it, documentation,” Sial says. When he worked on ABB’s design system, about 120 designers used it on a regular basis. The effort represented version 4.8 of the system, and the team dubbed it “Design Evolution.”

Design system designers play a different role than those who focus solely on individual products. “You have the bird’s-eye view of all the different products that a company is using,” Sial says.

Working in design operations also calls for communicating with stakeholders throughout a company. “Design system designers have to be social,” says Velasco. “A design system designer has to really like to work and talk with people who have different roles within an organization. They have to be able to distinguish what feedback to include in order to build the design system around the company’s needs.”

The Life Cycle of a Component

Working on ABB’s design system, Sial was guided by one overarching philosophy: “Documentation, documentation, documentation.” For every reusable element on ABB’s websites, mobile screens, or large stand-alone screens, Sial wanted to show what he calls the life cycle of a component. That meant extensive record-keeping for all components and patterns—breadcrumbs, headers, inputs, or buttons, to name just a few. “What are the journeys it went through? What decisions went into it? That way we’re not always recreating everything. Before trying something, you can read and see that someone already tested it,” Sial says.

In his experience, this philosophy is a departure from the typical approach to documentation. In the fast-paced world of product development, for example, documentation is often written at the end of the project or abandoned altogether. But for design systems, Sial says, documentation should be more than an afterthought. “A design system is never done; it needs continuous improvement,” he says. “Design system creators and consumers want to understand the thought processes and decisions in order to keep improving it.”

Documentation is especially important for a design system as large as ABB’s. “With such a large team you have to be able to scale,” he says. “How can we make sure that everybody who joins the team can quickly go to any component and understand how it started, how it was edited, and what version they are using?”

Finding the Right Tool

There are many tools out there for building design systems, including Figma, Sketch, and Adobe XD. Sial experimented with several, trying a mix of design and project management tools before settling on Figma, which offers ample space for documentation.

Sial and his team determined that every component should sit within its own file. “Most of the time, you’re working on one component at a time. If you put all the components in one file, it slows down Figma. By giving each component its own file, it’s quicker to open and you have the whole history and documentation in one place,” he says.

Setting the Hierarchy

Sial set up the ABB design system so that the file for each component and pattern has the same pages. The images that follow detail what’s on each page.

Sial recommends setting up a simple cover page for every component. In Figma, this enables a thumbnail preview of all the components and helps with the browsability of files. In the ABB setup, the cover page includes the component name and what phase it’s in: design, development, or released. The status can be easily updated when the component progresses.

Inventory, Use Cases, and Requests

This page contains examples of the numerous ways that a component shows up in a company’s digital product. In the case of a text field component, for instance, the inventory page would show how the text field looks on abb.com compared to how it appears on an iPhone compared to how it shows up on an Android device. “The inventory allows us to understand clearly what’s already there,” says Sial.

This page should also show the ways the component is being used incorrectly. “This allows you to look at your products and see where there are alignments and misalignments,” Sial says. He advises teams launching a design system project to begin by cataloging what already exists. “Start with inventory and it will guide you as you’re creating the design,” he says.

References, Best Practices, and Competitive Analysis

Sial advises creating a section of each component file akin to a vision board, showing how other companies design comparable pieces. “As with anything else, best practice is to perform competitive analysis and see how other people are doing it,” he says. “Observe other products and see their learnings.”

Tests and Data

The test results data page aggregates all the data related to testing a component, including the results of A/B testing and feedback from users and stakeholders. In short, Sial says, “It’s the whole story of a component.” Perhaps the design team tried a new variation two years ago and found it didn’t work? “Maybe we worked on that variation and we discarded it for some reason,” he says. If so, this kind of history can save significant time by making sure that designers don’t try it again.

The next page lays out a component’s scope so designers can bring a design to fruition. By the time they arrive at the scope page, Sial says, “You have a story. You understand the inventory of all the products. You know what you need to build and you know the requirements. Now it’s time to write it down and make a brief out of it.” He adds that creating the scope should be a collaborative process with the product owners, developers, and designers.

Images of the final versions of the component are found here, with the latest iteration pinned on top. Other designers should be able to review and comment on it.

The sandbox enables designers to experiment with different iterations of a component or pattern directly in Figma. “It can be messy, and there’s no standardization,” Sial says. “It’s just a playground where a designer has the freedom to do anything.”

Figma Component

The file also contains a page for the Figma component itself, a UI element that is easily repeatable throughout the design system. The designer can make changes to the component, and that change will populate throughout all the instances of that component across the company, keeping everything consistent. This page will be exported to the Figma design system library, and any individual designer can drag and drop the Figma component into their design. If the design system team needs to make a change to the component, they can make it once and deploy it throughout the company.

Style Rules

Next, the design system designers and developers create the style rules page, a kind of catch-all for elements that, Sial says, “are not visible in the design.” For example, how will the component render when you scroll down the page? It’s also where the design system team keeps track of unresolved questions or issues. He says he was surprised at how integral this page turned out to be: “At first, we thought this page was not that important, but now we realize we spend most of our time here.”

The handover notes are the instructions for developers on writing the code for the component. The handover document begins with the anatomy of the component, then includes its variations.

The ABB system handover documents also include design tokens . Becoming increasingly popular in large-scale design systems such as ABB’s, design tokens are pieces of platform-agnostic style information about UI elements, such as color, typeface, or font size. With design tokens, a designer can change a value—indicate that a call-to-action button should be orange instead of blue, for instance—and that change will populate everywhere the token is used, whether it is on a website, iOS, or Android platform.

Sial also created a Figma token plug-in to expand the scope of tokens designers can create in Figma. “Figma supports colors, typography, shadows, and grid styles,” he says. The plug-in will generate tokens for more variables, such as opacity and border width. It also creates a standardized naming convention, so designers don’t have to keep track of token names manually. “The plug-in bridges the gap between developers and designers. It allows both to work on a single source of truth for design; if one makes a change in one place, that change takes effect everywhere in the design and code,” he says.

Sial stresses that in his system, developers take an active role throughout the creation of a component. “Early on, we would involve our developers when we had something ready to show them,” he says. “Then we realized that’s not working, and now we literally start kickoff sessions with them.”

Documentation Webpage

The last page of each file contains a webpage with the final design, showing how the component looks as a finished product. “We create a page that shows how the live example will look so the users, in this case our designers, can see how it will look at the end of the day on a real website,” Sial says.

Collaboration Is Key

The role of a design system designer is multifaceted. As Alejandro Velasco says, “Designing a design system involves so many roles, and if I’m leading that, I’m the glue for the project.”

It’s an enormous undertaking and not necessarily the right move for all companies. Startups, for instance, might do better to begin with an out-of-the-box system such as Google Material Design or the IBM Carbon Design System , rather than dedicating extensive resources to creating one. Still, the time might come when that won’t suffice, says Alexandre Brito: “As soon as you have multiple designers working together, you start to realize that there’s a need for someone to build rules that are more in line with the product or brand you’re building.”

Building a design system takes work and dedication; it also takes collaboration. Sial stresses that involving all stakeholders in the development of ABB’s system throughout the process was a priority. “It was really iterative work with my whole team. It was all about listening to them and we took the time to learn and test it thoroughly and develop this structure,” he says.

Having a structure that includes extensive documentation, including history and best practices, is at the core of the Figma design system. “It’s a success because people can read the documentation all in one place,” Sial says. “They can see everything, starting from the use case to the design and moving on to the handover and the final component page. People can see the whole life cycle of a component.”

You can browse Abdul Sial’s Figma file in its entirety here: Component Template .

Further Reading on the Toptal Blog:

• Saving Product X: A Design Thinking Case Study
• All About Process: Dissecting Case Study Portfolios
• The Benefits of a Design System: Making Better Products, Faster
• Helping AI See Clearly: A Dashboard Design Case Study
• Design Problem Statements: What They Are and How to Frame Them

Understanding the basics

What is a design system.

While a traditional style guide covers the design basics—fonts and colors, for instance—a design system has a much further reach. The design system documentation for Switzerland-based holding company ABB, for example, contains design components, patterns, and code components.

What role does a design system designer play in an organization?

Design system designers play a different role than designers who focus solely on individual products. They tend to have more of a bird’s-eye view of all the products a company is using. They also must interface and communicate with stakeholders throughout a company.

What are some best practices when building a design system?

One approach is to organize it in Figma and give each component and pattern its own file. This design system case study demonstrates one approach: At ABB, each file has several pages with extensive documentation on all the ways the element is used throughout the product and all the iterations it went through. Showing the full life cycle of a component is key to building and scaling a design system.

• DesignProcess

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mobile App Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Visual Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

The eLearning Coach

For designing effective learning experiences

How to Write Instructional Design Case Studies for Your Portfolio

by Connie Malamed

One aspect of a portfolio that can make yours stand out is to provide the proper context for every work sample. You can achieve this by adding instructional design case studies to your portfolio. Case studies are an opportunity to add depth and insight to your demonstrated skills.

In this article, I hope to clarify what a portfolio case study is and what to include in one. For more on portfolios in general, see How to Build an Instructional Design Portfolio .

What is a case study for an instructional design portfolio?

Start by thinking of yourself as a designer. In design fields, it’s typical for practitioners to supplement the visual examples of their work with summary descriptions. A portfolio case study refers to this supplemental description. The case study adds background and depth to your work. It reflects the process and thinking you use to design a solution.

What To Include In A Portfolio Case Study

The people who review your portfolio are often pressed for time. So, you’re walking a tightrope between sufficiently explaining your project while keeping your description concise. Below is a suggested list of topics to include in your explanation. Because you need to keep it brief, select the topics that are most important for highlighting your talents and the message you want to convey.

• Project Title and Org Name: Title of the product you created and name of the company, organization or industry
• Date: Time period when you worked on the project
• Image of the solution: This will lead to a short demo or a series of screen captures of the solution. You may want to add documentation (analysis, design and storyboards) if it looks clean and professional.
• Problem you solved: Focus on performance improvement, changes in attitude, skills developed
• Your role: Specify your role if you were part of a team
• Challenges you overcame: For example: diverse audience groups; short timeline; uninterested learners, poor tech infrastructure, etc.
• Solution to the problem: Explain and demonstrate the solution
• Design Strategies: Your process, instructional strategies you chose and why
• Results/Impact: Metrics used to measure effectiveness of the solution or how performance improved. You can report data, discuss impact, anecdotal evidence or preliminary hunches.

Case Study Formats

Two types of case study formats are typical: the outline format and the story approach. Pick one consistent approach for your portfolio to make it as easy as possible for a reviewer to understand your work.

• Outline Format: The outline format is essentially a simple list of the key points or topics of your case study and a concise explanation of each topic. The advantage of the outline format is that it is easy to quickly skim and gather the key points. Organize it in a way that makes sense for your work and the aspects you want to highlight. See the example below. There is room for creativity by using your own wording for topic titles.
• Story Format:  In this approach, you write a few paragraphs describing the case study. The advantage to the story format is that well-written stories could be more likely to draw in a reader. Stories may also demonstrate your writing skills. For more detail on writing story-based case studies, see User Experience Case Studies .

Examples Of Instructional Design Case Studies For Portfolios

Outline format example.

• First Aid Bot
• Industry: Health Care
• Problem to Be Solved : Many people are not prepared to provide first aid in an emergency situation while they wait for professional help to arrive. They may forget what they learned or have never been trained in the first place.
• Challenges: The two challenges of providing first aid care in an emergency are: 1) people need to get the information quickly and 2) the person giving first aid may be too busy assisting the person in need to search for information.
• Solution: First Aid Bot is a chatbot that responds to the human voice. Users open the app and type or use voice commands to identify the emergency. The bot then responds with audio instructions for caring for the individual.
• Learning Design Strategies: I created a performance support solution for people to use while completing a first aid task. It is not meant to be a learning intervention, but rather to fulfill an immediate need during an emergency. The first aid instructions are clear and simple to avoid overloading the user’s memory as they complete the task at hand.

Story Format Example

When my daughter’s scouting troop asked if I could develop a course to onboard volunteer parents, I jumped at the chance to help. Many volunteers aren’t aware of the responsibilities they are taking on as Scout Assistants. Many haven’t considered the ethical issues that may arise from time to time. The biggest challenge in this effort was how to sufficiently engage the volunteers so they would complete the online training.

I solved this problem by creating five short game-based scenarios that would pique their curiosity enough to carry them through to completion. Each scenario presents the parent with a sticky problem that could come up during a scouting event. The user earns points for making choices that demonstrate care and concern for the scouts. Volunteer parents report that they enjoy the training and so far, 85% of the volunteers have completed the course. 

If Your Samples Are Not From Actual Work Projects

If you are trying to break into an instructional design career or if you want to demonstrate a wide range of solutions, these may not come from work projects. Simply mention in your description, that you created the sample because you wanted to solve a particular problem. Neither of the examples above mention that the work was done as an employee or from a paid client.

Finding The Best Writing Tone

As you write case studies, you may want to explore the best writing tone for your portfolio. Tone conveys the mood and emotion of your writing. It shows how you want to address the reader and portray yourself in this context. For professional purposes, you may choose to convey a formal tone or you may prefer a casual one. You might adopt a serious tone or one that is friendly. Choose the tone that best reflects your authentic work self. Then keep the tone consistent.

Learn From Other Industries

You can learn a lot from how other industries create portfolio case studies. Borrow the ideas you like and apply them to learning design. Here are a few places to look:

• UX Portfolio Case Study template (plus examples from successful hires)

All About Process: Dissecting Case Study Portfolios (oriented toward graphic design)

10 Exceptional Product Design Portfolios with Case Study Breakdowns

Where’s my portfolio?

By the way, although I often help people with their instructional design portfolios, I actually don’t have one of my own. My career was already in high gear when portfolios became important and I haven’t had a need to make one. If a client asks, I walk them through my work with a screen share.

Build a Portfolio Course

I’ve created a self-paced course on building an instructional design portfolio. It’s included as part of your membership at Mastering Instructional Design .

Click the image below to get a summary of the seven steps for building a portfolio. Plus you’ll get The eLearning Coach newsletter once a month with articles, resources and freebies.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed .