4.43 out of 5
342 reviews on Udemy

Portfolio MASTERCLASS – UX/UI case studies

Learn how to create stunning UX case studies
Patricia Reiners
1,738 students enrolled
Create a stunning UX portfolio from scratch
Lots of real portfolio analysis and many real examples
Different portfolios formats and which one is best for you
Where to host your portfolio
How to create a great outline
How to design all the visuals assets
How to promote your work on social networks
How to create mockups, animations and videos for the interactive content
How to create UX stories in the form of case studies
You'll learn how to pick the correct fonts
Export production-ready assets
All the techniques used by UX professionals
How to write an "About" page
Many hands-on tips and tricks

Are you excited to get into the world of UI/UX looking for clients or for a full-time position but you don’t know where to start?

Creating a great UX portfolio where you show your projects is the very first part of getting hired or getting work a freelance UX/UI designer.

This course will help you create stunning case studies for your first UX projects. You will learn everything you need to know from where to host the portfolio, to what to integrate into how to create all the visuals, and make sure that your portfolio stands out.

Throughout the course, you will be able to create your case study

Course structure and topics covered:

This course has a lot of insights packed in the 33 lectures. You probably won’t find a course which so many insights and details about the process of creating UX case studies. This course is a combination of theoretical analysis and hands tips and tricks.

The course is structured in 5 parts:

1.) Introduction: You will learn the importance of case studies and analyze your goals and skills to make sure to attract the clients you are dreaming of right now

2.) UX case studies: You will learn the basics about a case study and how to integrate storytelling

3.) Outline: You will learn how to create an outline and how to design the different parts

4.) Visuals: You will learn how to create visuals. Everything from mockup-ups, animations, videos to icons and typography to make sure that your case study stands out.

5.) Publish: You will learn where to host your case study and has bonus material you will get insights about how to promote your work on social networks.

Making a great UX portfolio is not easy but with the right tasks and methods is a real game-changer for every designer.

After doing this course you are using everything you learned, you won’t have a problem to receive interview calls.

This course comes with a lot of material and templates which will help you to get started

TEMPLATES digital e-booklet for print

TEMPLATES Adobe XD files

TEMPLATES iPhone mockups for png + animations

I am super excited you are joining this class! Let’s get started



1.) Welcome

Welcome to this course. This course will help you create stunning case studies for your first UX projects. You will learn everything you need to know from where to host the portfolio, to what to integrate into how to create all the visuals, and make sure that your portfolio stands out.

Let’s get started!

What do you need?

2.) What do you need?

  • You will need Adobe XD, After Effects and Photoshop 2019 or above. A free trial can be downloaded from Adobe.

  • MAC or a PC

  • 1 UX-design project (Good to have but not a problem if not)

  • No previous design experience is needed.

  • No previous Adobe XD skills are needed.

Download Adobe tools here: https://www.adobe.com/creativecloud/catalog/desktop.html?promoid=PTYTQ77P&mv=other

Class outline

3.) Class outline

What you will learn:

What UX case studies are and what to integrate

How to integrate storytelling

How to create an outline

How to present the different steps

How to create visuals (mockups, animations, gifs, etc.)

BONUS: How to integrate social media

BONUS: How to write your about-page

BONUS: How to get clients


4.) introduction

Having a portfolio got from a “nice-to-have” to a “must-have” in the last couple of years.

A portfolio consists of several case studies which show

  • How you work

  • Your successes

  • What you do

UX case studies

What is a UX case study?

5.) What is a UX case study?

A Portfolio consists of different case-studies which show the process of a project

Choosing work to showcase

6. ) Choosing work to showcase

General advice: Don’t put everything in your portfolio! Only show your best work!

Don’t have a project?

  • Redesign an exciting app / web service

  • Create a new product

  • Use a school project

  • Design something for a nonprofit


7.) Examples

Bestfolios: https://www.bestfolios.com/

Awwwards: https://www.awwwards.com/awwwards/collections/product-page/

Behance: https://www.behance.net/

The power of storytelling
Turn your UX case study into a story

9.) Turn your UX case study into a story

Use the same structure of stories in your case studies:


  • Explain the context

  • Background information

  • Goals


  • Different methods

  • Sketches

  • Wireframes

  • Photos


  • Final product

  • Lessons learned

  • Results



Keep in mind that recruiters need to answer their “what if” question (i.e., “What would it be like if this person joined our team and we had to work with him/her every day?


Structuring your case studies in the shape of an “idea” type of story will help recruiters get a glimpse of the world through your eyes.


Your case study shows how you solve problems and how you think: It is a demonstrator of process and critical reflection, rather than of the end product which only shows perfect visuals.


here are only three parts to a UX case study structure (the beginning, the process and the conclusion), but knowing how much and what type of content is appropriate for each part will get you off to a good start on writing eye-grabbing case studies.

Plan your outline

Create an outline


12.) Introduction

Make sure to integrate:

  • State the project brief

  • Problem statement

  • Challenge

  • Your role

  • Client

Example 1: https://focuslabllc.com/case-studies/bluewave
Example 2: http://gabrianna.us/work/activitymap

Background Information

13.) Information

Background information


  • What should the project achieve for your business?

  • What’s the deadline date for deliver?

  • What kind of site/product/application do you need me to design?

  • What content will be used within the project and where will it come from?

  • Are there similar products out there – what do you like/dislike about them?

Target group

  • Who are they?

  • How does the problem affect them?

  • What key insights do you have about them?


15.) Research

  • Talk about your research

  • Which methods

  • What were the main results

General tip:

  • Keep it concise

  • Graphics and images are very helpful

  • Don’t share too many details


16.) Concept

  • Include early on sketches

  • Wireframes

  • High fidelity concepts

  • etc.


18.) Testing

Explain which methods did you chose for the testing?

Explain the process and where did you do the testing (lab, office …)

What did you test?

What did you learn?

Here are a few testing methods:

1. Guerilla testing

2. Lab usability testing

3. Unmoderated remote usability testing

4. Contextual inquiry

5. Phone interview

6. Card sorting

7. Session recording

8. A/B Testing


19.) Outcome

  • Did you hit, miss, or surpass the goal set?

  • What outcome did this project have?

  • Can you share other business results?

  • Did you decrease withdrawal rates by 15% or customer service complaints by 30%?

  • Did your landing page get fantastic conversion rates?

  • Did you improve the lifetime value of customers or the NPS scores?


“We found that 15% of the events people attended started because someone else in the coliving group invited them to join. We didn’t have the budget or time to address the challenge of personalised invitations, but in the future, we could revisit the project and focus it.”


Introduction: Visuals

20.) Visuals

Make sure to integrate visuals in your case study:

  • Images (e.g. pexels.com, unsplash.com)

  • Mockups (e.g. freemockupworld.com, free-mockups.com, Graphicburger.com)

  • Sketches

  • Wireframes

  • Animations


21.) Layout

Feel free to use the templates I created for you in Adobe XD.


23.) Icons

great free resources online

  • pexels.com

  • unsplash.com


24.) Icons

great free resources online:

  • The Noun project

  • IcoMoon

  • Smashicons

  • FontAwesome

  • Material design

  • Streamline

  • Flaticon

  • Freepik

  • Iconfinder


26.) Mockups

Mockups are a great way to place your design in the final product.

Great free resouces:

  • freemockupworld.com

  • free-mockups.com

  • Graphicburger.com


  1. Export your design as png

  2. Open the mockup in Photoshop

  3. Place your design on the smart object with the name “place design here”

  4. Save the smart object

  5. Adjust colors and design elements

  6. Export the mock-up as png

  7. Insert it in your layout


27.) Animations

The best format to upload small interactions are animations in gif format!


28.) Video

How to upload a video on Vimeo and integrate it in your case study:

  • Vimeo to upload Videos

  • Limit of 500mb per week, but its more than enough for 1 case study

  • Upload the video of your animation (1920x1080px)

  • Open it and press “share”

  • Select fixed size and type “1920x1080”

  • Select “autoplay” and “loop”

  • Deselect all “intro” checkboxes portraits etc. (it will hide all elements from video thumbnail in your case)

  • Embed in Behance: copy the embedded code. And paste it using “embed media” on Behance


Where to host the case study?

29.) Where to host your case study?

For example here:

Wordpress: https://de.wordpress.com/

Squarespace: https://www.squarespace.com/

Behance: https://www.behance.net/

Adobe Portfolio: https://portfolio.adobe.com/


30.) Bēhance

Bēhance is a social media platform owned by Adobe which aims "to showcase and discover creative work".

Businesses like LinkedIn, AIGA, Adweek, and Cooper-Hewitt, National Design Museum, and schools such as Art Center College of Design, Rhode Island School of Design (RISD), School of Visual Arts (SVA), Savannah College of Art and Design (SCAD), and the Maryland Institute College of Art (MICA) have used their services. In July 2018, Behance had over 10 million members.

Great platform to build your portfolio on!

-> BONUS: About

31.) About

Make sure to always integrate an "About" section on your website or wherever you host your portfolio:

  • Write the text in your style. This helps to create sympathy and trust and attract the the client you are looking for.

  • Include a call to action If your customers want to know more about you, they are usually ready to work with you.

  • Explain your customers why you are interesting to them - so you keep your customers' perspective and do not write down any unimportant facts ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

-> BONUS: Social Media

32.) Social Media

Make sure to publish parts of your case study on social networks like:

  • Dribbble

  • Instagram

  • Medium

  • Linkedin

  • Twitter

  • Facebook

--> BONUS: How to find clients
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.4 out of 5
342 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


3 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Portfolio MASTERCLASS – UX/UI case studies
$128.98 $89


For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.


Partnership Opportunities

Layer 1
Register New Account
Compare items
  • Total (0)