Portfolio MASTERCLASS – UX/UI case studies

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!

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

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

5.) What is a UX case study?

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

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/

9.) Turn your UX case study into a story

Use the same structure of stories in your case studies:

Beginning

• Explain the context

• Background information

• Goals

Process

• Different methods

• Sketches

• Wireframes

• Photos

End

• Final product

• Lessons learned

• Results

  
  

Remember:

“WHAT IF” QUESTION

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

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.

SOLVING PROBLEM

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.

STRUCTURE

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.

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

13.) Information

Background information

Scope

• 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?

  
  

Example:

“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.”

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

Takeaways:

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
  

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!

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 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

32.) Social Media

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

• Dribbble

• Instagram

• Medium

• Linkedin

• Twitter

• Facebook