Transcripts
1. Welcome!: A designer's portfolio can be their number one tool
for landing jobs and showcasing the
work that they've done over the course of
their entire careers. We know how important
these design portfolio is. Our however, it can become
very easy to neglect them. I'm Carolyn, I senior
UX UI designer, who has definitely
had my fair share of struggles with keeping
up with my portfolio. After taking many
design classes, attending portfolio workshops, and speaking with
design directors throughout the last few years, I've picked up some
really helpful tips that I am excited to share
with you in this class. In this class, I will
help you turn one of your design projects and to an engaging case study
for your portfolio. Once you learn how to translate your projects into case studies, you will be able to fill
your portfolio with several examples of how you
are an amazing designer. While working on your
case study project, you will learn how to promote
yourself and your work, How to illustrate
your design process, and how to talk about your design work
through storytelling. This class is for mainly
UX UI designers who have a breadth of work that they want to show in a portfolio. By the end of this class, you will have an
engaging case study to add to your portfolio that really showcases your skills and your identity as a designer. Let's get started.
2. Class Project: Your class project, I want you to pick a design
project you've contributed to in turn that into a case study
for your portfolio. We'll work through
the following steps to finish your case
study project. Pick a UX UI design project
you've contributed to. This could be a
professional project, school project, or
a personal project. Next, we'll create an outline of the story of your project. Then we'll gather and
create process imagery that will help tell the
story of your project. Last will design
your case study. You'll only need a few tools and materials to get started
with this project. You'll need Sketching materials like pencils, markers and paper. And then Figma, the
online tool we'll be using to design the layout
of your case study. By the end of the class,
you will upload the following to the
Project Gallery, your case study design as an image or the link to
your Figma prototype. Or you can link to your
published case study. If you're already
working directly in a website builder
like Squarespace. I'm so excited to
see your case study. So let's get started.
3. The Basics of a Case Study: Before we dig into your project, Let's talk about
what a case study is in the do's and
don'ts of making on. A case study is a
storytelling tool used to communicate processes
and decisions throughout a design project. The whole point of making a case study is to show
that you really know the design process and can problem-solve throughout the
whole course of a project. Good case studies
are engaging and tell a story that can
be read by anyone, but they're usually written
for potential employers. Some things to avoid when
making a case study. Don't just show your final
work, show your process. Like I was just saying, don't use jargon and
robotic language. Right? Like you're talking to someone, telling them a story from
the beginning to the end. The most important
thing to show in your case study is your process. And that's what
potential employers and collaborators
really care about. They don't necessarily care
about perfect designs. They wanna know that you know, how to work through a problem, to come to a really
successful design solution. And they want to see
how you got there. If you want to see some great
examples of case studies, I've added links to some in the Resources section
of this class. Now that we know the do's
and don'ts of case studies, Let's start our project
4. Showcase Your Skills & Values: You are an exceptional designer. It's your job to show that
and highlight your best work. It can be really
hard to talk about yourself and your work. So to get some
external perspectives, I want you to do a quick
activity as a warm-up. I created a worksheet for you in the Project resources
that you can find and download and use
throughout this class. The first exercise listed
in that worksheet is to ask yourself and some
people questions about you. For the first section, ask yourself those
questions in the worksheet. Then grab two or
three other people, maybe coworkers,
clients, friends, mentors, and get their
perspective on your strengths, your values, your passions. Once you and those
external people have answered those questions, compare the answers,
see if you come across any insights that
might be helpful to show or talk about
and your portfolio. For example, when I
answered questions about myself and when I asked others
to answer them about me, both of the answers
really talked about how I am
passionate myself, about empathizing with users. And other people said the same thing that I really
wasn't advocate for users. And that was a
strength that I had. Because I said that I was
passionate and valued that myself and people saw that
that was a strength I had. I thought that that was
a really great insight to help me build out my
portfolio in my case studies. So what I did with that is I really highlighted those
empathy stages and talks throughout my
portfolio about how I really value and I'm passionate
about empathizing with users, with people to get to really
successful design solutions. Now that we've completed
that warm-up exercise, Let's start working on an outline for your
case study project
5. Create an Outline: Now let's dive into
our case study project and really expand
upon your process. Pick a project that
you've contributed to. It could be a personal project, a professional project, or a project you've
worked on as a student. Now that you have
a project in mind, we're going to create
an outline for the process you took to
complete that project. In the worksheet, I've
provided an example of an Outline you can use for
your case study project. Refer to the example
outline and create your own version by filling in the details for your project. Start with an overview section. Talk about your specific
role you played in the Project and what timeline
you were working with. Lists the challenges are
pain points users were experiencing before you started
working on this project. The next section could include
your problem statement and any other context
you might need to provide to set up your story. Then you could go into
your research section, which would include things
like affinity diagrams, insights, personas, user
stories, and journey maps. The next section could talk
about your design process. Any information
architecture you worked on, competitive analysis,
paper wireframes, paper prototypes, digital
wireframes, lo-fi prototypes, user testing insights
and decisions you made based on
those insights. The most important section to include is the solution section. And that should provide a
summary of your solutions. Your list of challenges from the overview section with
explanations of how you've resolve these challenges
and any prototypes or mock-ups that
illustrate your solutions. You can also include additional design results
like custom iconography, component libraries,
custom illustrations, videos, animations,
or style guidelines. Your last section should be your takeaway section that
includes quotes from users or stakeholders that illustrate
results and analytics or quantitative data
that also illustrate results and talk about what you learned during this project. A great tip I've learned from a director is that
you should sit down with somebody and tell the story of this
project out loud. Start with the problems and the challenges you faced at
the beginning of the Project. And then explain how you
reached solutions at the end of the project and talk about what you learned
from the Project. This way you can start
getting the ideas flowing. You can really talk through, think through your whole process to a person and an
impeachable way. Once you have the beginnings
of your own outline, we will continue to flesh it
out in the next few lessons.
6. Add Imagery: You have the outline
of your case study. Now, it's time to
add Imagery to that. Go back into the
archives and pull out any process imagery
that might be helpful to show your
case study story. Create a new folder
on your computer. Drop your images into
this dedicated folder. Images could include
things like sketches, like paper wireframes
or ideation exercises, research, and design process. So persona's digital wireframes, static mockups shown
on various devices are prototypes and any
additional visual assets like sticker sheets
or components. At once you grabbed all
the imagery you can find, refer back to your Outline. Do all of these images
support your story? Maybe you're missing
something and a certain part of your process doesn't have
an image that goes with it. Now's your opportunity to create anything that
might be missing. Or you can also refine any
sketches that look a little too rough and not very
presentable for your portfolio. Remember that this case
study in your portfolio as a reflection of who
you are as a designer. Don't just throw everything into a website and
call it a day. Makes sure that everything is looking cohesive and consistent, just like you would for
any other design project. Once you have your
imagery collected in one easily accessible folder, we'll start thinking about the layout of your case
study in the next lesson.
7. Sketch Your Layout: We have your outline, we have your imagery. Now it's time to
quickly sketch out some ideas for how your case
study project could look. I started by drawing three rough rectangles to
draw my Layout Within. You can do more or less
than three sketches, however long it takes you to
feel good about your Layout. Next, I'm really
gonna focus in on this top header area
above the fold. So let's pretend this dashed
line here is the Fuld. Whatever is above this line is gonna be the most important. Because this is what people
are going to immediately see and this is what's
going to hook them in. So what content do you
want at this top part? For example, we can include a nice big hero image
of the final design. That's going to be
my little note here. These can just be rough
wireframes almost. And then I can have the
title of my project here and then my
details next to it. So this provides a
nice little summary of my project before somebody
even scrolls down below. Another way I could
do that is by making a collage of
multiple images. So let's say for images, that really showcases
my process. So maybe at the left here is some of my beginning
research pictures. And then we get more into my ideation phase
design process. And then this last image
could be my solution image. And then maybe in this layout, I center the title and then
my initial overview text. Then maybe in a third
version of this, I don't work in a
super centered way. And I have an image
off to the left here, and maybe it's not my final image like we
did in the first sketch. Maybe it's just
my favorite image of my process in general. Then the title in details could be nicely spaced off
to the right there. So this top area is gonna be my most important
area to focus on. So I think we have some really good concepts
for this hero area. So anything below this
now is just gonna be all about keeping the Layout and the
design consistent. So if we're centering
things like in this layout, make sure that everything else below picks up on
that centered theme. Maybe everything below
this third theme kind of goes back and forth to provide a nice balance
of image and texts, texts and image, image and text. Then in this first image
or this first sketch, maybe we can play around
with these really nice, clean full images mixed with
some text below and columns. So I'm going to try and explore those concepts below here. Next, we'll get on
the computer and start designing your case study
8. Design Your Case Study: Now it's time to put everything we've been working on together. Let's get on the computer
and start designing your case study
project in Figma. Translate your sketches
from the last lesson into a design in Figma by
first creating a frame, I'll be working at
a desktop size. Then adding the texts from
your Outline document, and then adding the
images from your folder. Now that we're
actually designing, my top tip here is to check that
everything is consistent. In the last lesson, I advised you to
keep Your Layout consistent by using the
same texts alignment, image shapes, margin
sizes, etcetera. But now that you're
on the computer, you need to make sure you're using consistent
typographical hierarchy, color hierarchy,
precise spacing, and that all the
other design elements are used appropriately. And for a reason. Now as the time to focus
on your writing as well, your outline might have included a bulleted list or
incomplete phrases. Now as the time to flush out
your story by writing in full sentences that showcase
your communication skills. Once you have your
design in a good place, I challenge you to make your case study
even more concise. What sentences or even
phrases can you remove to really get to the heart of your story and your process? Next, we'll wrap up your project
9. Finish & Share: Congratulations, you've finished
your case study project and it's ready to be published. If you haven't already,
be sure you get feedback on your project. In the worksheet I created, I made a checklist of
things that you can go through and make
sure that you have included in your
case study design. I even included some questions
you can ask yourself or others about how your
design is coming together. Be sure to go through
that checklist and answer those questions to make sure the story of your
project is coming through. And we're really getting a
sense of your whole process. Upload the following to
the Project Gallery, your case study design as either an image or a link
to your Figma prototype. Or if you were working
in a website builder, share the link to your
published case study. Once you upload it to
the Project Gallery, I will definitely
be sure to give you some feedback and
I encourage you to do the same with
your fellow students. Next, we'll go over some final portfolio tips
and wrap up the class
10. Bonus Tips: I've already provided a bunch of tips throughout this class, but I wanted to add a few more here to really help you maintain your portfolio and be a successful designer
and show that off. My first tip is to document
your work as you go. When you're working
on a project. That's when everything
is fresh in your mind and you
know all the details and have all the imagery supporting documentation
at your fingertips. That is when you should
be collecting things in a folder and writing down
the story of your process, right when it's
fresh in your mind. My second tip is
to keep a list of all of the projects that
you've been a part of. Even if it was a social
activity, a teaching activity, like a lunch and learn, maybe it was
organizing a workshop. Those are all things that you should be proud of and really show how well-rounded
you are as a designer. My third tip is
to try to embrace every opportunity
you get to talk about your process
and your design work. For example, it could be attending more client
meetings or even just talking to your mentor or your boss more about
your design decisions. That way, once you get to making your portfolio or
speaking in an interview, you will be a pro at talking
about your own process. Andrew, sound more professional because you've been
practicing so much. So take advantage of those opportunities
whenever you can. Think about what unique
skills you brought to a project or what you did to go above and beyond
for a project. Brag about the illustrations
you made for a project or the animations you went
out of the way to create, to enhance the
user's experience, own those accomplishments. By making it clear
in your captions and descriptions that you took these extra steps
and are passionate. This will be a huge
advantage for you if you include details like
this in your portfolio. I hope you'll keep these
tips in mind and that they'll make you a better
professional designer. Let's wrap up in our last lesson
11. Conclusion: Congratulations on finishing
your case study project. Now your row and talking about your design process and illustrating your work
through storytelling. In this class, you've
learned how to showcase your unique identity
and design work. Illustrate your process. Talk about your designs
through storytelling. Build case studies that showcase your problem-solving skills and techniques to become a better
professional designer. Don't forget to upload
your project to Skillshare and leave
a review for me. Thank you so much for
taking this class with me and I'll
see you next time.
Carolyn Owsiany, Senior UI/UX Designer
