Transcripts
1. Trailer: You're scrolling through Behance
and you see a case study that's beautifully designed
and tells an engaging story, and you think, wow, I
could never do that. Well, it's time to rethink that. I'm Maddy Beard. I'm
a product designer and design content creator. I've worked for agencies,
small businesses, big companies like Adobe and tech startups doing
strategic design work. [MUSIC] Throughout my career, like most designers,
I've come to understand the importance of
crafting case studies. Whether you want
to land a new job, grow your credibility
as a designer, or just share your work
with the community keeping your portfolio of today,
is extremely important. Trust me, I get it, it can be tempting to finish all the hard work on a project, post a couple of pictures on Instagram or your website
and then move on. But it's well worth it to
take some time to craft a compelling case study for
each project that you do, whether it be a
personal project, a project for a freelance client or for the company
you're working at. In this class, I want to help
you take all that awesome, sometimes messy work from a recent project
and shape it into something that tells a story and highlights your
strengths as a designer. You'll be able to
use this process for past projects and
projects to come. This class is meant for UX and product designers at any level, whether you want to show
a project from school, display one of your more
recent client projects or maybe you've been in
the industry for a while, and you just want a
new way to lay out your case studies with a
little more intention. The videos that follow
will help you come out with something that
you're really proud of. Here's what you'll need, a project you've
finished recently, hopefully you have some notes or sketches or any type
of process work, Google Docs, Apple notes, or somewhere to
outline the content, access to Adobe XD, Figma or a similar design tool. Some nice device mockups which
I can point you to some of my favorites and an
online portfolio such as Behance or
your personal site. I'm going to take you
through these lessons using one main example, a case study I'm going
to be crafting for one of my most recent
projects and because obviously my style
isn't the only style I'm going to be sharing tons of other examples along the way. Case studies are by far
the number one thing I get asked about on my
Instagram and YouTube, so I'm really excited to
finally show you guys this full process that
you can do yourselves. Let's dive right in. [MUSIC]
2. Project Overview: The project for this class
is for you to create one strong case study from a project that
you've already done. It doesn't matter if this is the 1st or 31st project
you've ever done, you've probably never approached case studies exactly
like this before. As you're going, feel free to put your own touches on it and go your own way with it if you have different ideas
from what I show. My job is just to
guide you through this process and show
you what works for me to create a case study that's actually interesting
to read and look at. First, we'll start
by gathering up all the stuff from your project. Next, we'll outline
and write the content. Then we'll actually design the case study in
Adobe XD though, you can use whatever
program you'd like. Along the way, I'll
be sharing tips and tutorials for things you might want to include
in this part. Last, we'll go through
the best ways to upload and publish your case
studies to Behance, if that's where you
decide to showcase it. Of course, you can also showcase it on your personal
portfolio site. I'll be sharing an action step at the end of every
single lesson. I recommend following me throughout this
process and posting your work down below in
the discussion section for feedback and
to ask questions. But of course, you know
how you learn best, so feel free to move through the class at whatever
pace you would like. Any new project
can seem daunting, but I'm going to be taking
you through simple, straightforward steps so that
if you follow this class, you will have a completed
case study by the end. [MUSIC]
3. Types of Case Studies: During my research
for this class, I looked at dozens of case
studies and came up with five different categories
that yours might fit into. Let's take a look at each one and break them down
so that you can determine what type
of case study you're going to be crafting
during this class. Number 1 improvement,
a product already existed and your project goal was to improve it in some way, maybe through better user flows, new features or
better organization. This case study by
Amy Lima for cause is a great example of
this because they've already been in business
for over 30 years, but they wanted to pivot to sell their insurance policies
direct to consumer. In order to do that, they needed to improve
their user experience to make it simple enough for
their target demographic, tech savvy millennials
to use and trust. Number 2, re-imagine. You notice an opportunity to improve a problem space using new solutions that
might not have been implemented right away. This TV guide project by Abdallah Salem does
this really well. They notice that there
are more choices than ever right now when
it comes to what to watch and those choices
are very fragmented and scattered around dozens of
providers and platforms. Their solution included
universal search, personalization, and
smart recommendations. Number 3, ground up. Your project spans from conception to release
of a new product. This is what my project
at bubble falls into. I consider this case study eat explorer by Tony Jean
to be ground up. It's a translation app for
restaurant menus to help break the cultural barriers of food specifically designed for
international students. Number 4, visionary. Your project is conceptual in nature and not
necessarily tied to a business though they have futuristic ideas and
opportunities for businesses. I would say that the
three case studies I worked on at Adobe fall
into this category. This project, good neighbor by Julie Sandusky is conceptual, but it has tons
of opportunity in the real-world because
it was based on real research and problems
reducing food waste by facilitating food
sharing within communities. Number 5, culmination. This is definitely less common
as far as portfolios go, but definitely still
valuable work. With this type, your
project is more of a data set analysis, showing results from research
that might help shape a project or help other designers learn
about a specific area. This article by BMR details the current state of
checkout and e-commerce experiences through eight common pitfalls
and best-practices. Determining the category
a project falls into will help you figure out the story you're going
to be telling, which we'll get into much more
detail in future lessons. But the only action item for this lesson is to give that some thought and see if any of these describe the project
you're working with. Once you have that down,
feel free to dive in deeper to any of the
examples that I showed. I'm going to be
leaving a link in the resource section to a
small database where I've collected all of the
really good examples of case studies that I
found during my research. Feel free to check that out and I'll see you in the next
lesson where we're going to start compiling all
your project materials to get ready to crack
this case study.
4. Compile the Pieces: Before we go any further, I want to give you
an overview of what makes up a compelling
case study. What are the must-haves, what are the nice to haves? What should you focus on, what shouldn't you focus on? Now remember, we're
going to go into much more detail on all of these things in future lessons, so I won't spend too
much time on them, but I do want to give you a
quick overview so you can keep them in mind as you're
gathering your materials. My must-haves are a problem
or opportunity statement. What are the goals? What
would success look like? Your role and who
you worked with, not the specific
people of course, but their roles and how
the team came together. Why you made certain decisions? What drove your design
direction and prioritization? Usually that's in the form of some research,
formal or informal. Some process work, visuals of your
final deliverables and results or success metrics. Some nice to haves might be an in-depth explanation of
your research and findings, which could be quotes or data, a visual system or
brand guidelines. More process artifacts
such as empathy, maps, personas, sitemaps, user flows. Mockups that are interactive to highlight specific features. Maybe a future roadmap if somethings weren't
able to be prioritized or maybe some
initiatives got brought up that would be beneficial
to do in the future. Lastly, challenges that you faced and how you overcame them. I want to stress that you
don't have to and in fact, you shouldn't include
all of these things. If you were just overwhelmed
hearing my whole list, then imagine how overwhelmed
someone would be looking at your case study that has every single possible
thing included. The whole point of
this class is to teach you how to tell a
compelling story. A compelling story does not include tons and tons
of monotonous details. Always keep in mind your reader. How much time do
they actually have to read through this
and understand it? It's all about
keeping it concise. But it's important to get
everything together first and then determine what is important and what isn't in
telling your story. This lesson, we're going to
be compiling everything, and later on we're going to
sift out what we don't need. With that said, let's
create a new folder on our desktop and label
it our project name. For example, I'm going to
name mine bubble case study, then create a few sub-folders. Here are the ones that
I recommend research, this is where you can put things about
competitive analysis, data, interview
recordings or notes, recruiting materials,
surveys, results, etc. Next folder is sketches. This could include scans
of your analog sketches or screenshots from sketches on your iPad or wherever
else you sketch. Next, XD files, maybe you have different
files for your wireframes, different iteration,
your final designs. Mockups. If you've
already marked anything up or recorded
any walkthroughs, you can put these in there. Also, you can stick
the mockup template you want to use in there, my favorites are linked below
in the resource section. Next is results, any data analytics or
quotes that have to do with your actual solution and what you tested
and validated. This is the success
metrics results. Lastly, I have a
folder called Behance, this is eventually war will export our final
case study files to. Take everything you got from this project and dole it out into all the
different folders. Don't worry if you don't
have all of these things, that's totally fine,
but also don't feel limited to all
the examples I gave. You can go your
own way with this depending on your
project if you want. Again, just include
everything later on, we'll figure out what's
actually relevant. I'd also recommend reviewing
this stuff as you go through and organize
it into the folders. This will refresh
your memory since potentially you haven't seen
this project in a while. Once you've populated
these folders with all your project stuff, we'll move on to
the next lesson, which is outlining your case study using
story structures. [MUSIC]
5. Outline your Story Structure: [MUSIC] Really quick before we jump into writing our outlines, I want to share with you
the number one mistake that I see so many people making when I'm reviewing portfolios and it's
about process work. Yes, you should focus on some of the process work that
you did but that does not mean defining each
step of the UX process. I think so many of
the case studies I've read from junior designers, they outline a very generic
idyllic UX process, just spurting definitions
of different exercises. For example, something like next I created a user persona. A user persona is
an archetypal we'll user whose goals
and characteristics represent the needs
of a larger group of users and then they include a snapshot of their
user persona. This doesn't give
any glimpse into how you actually got
to where you did. Hiring managers and fellow
designers already know what a persona is and potential clients that might be
looking at your case study. Don't care about its
exact definition. These people want to know
why you determined that user personas were important to do as part of this project, how you came up with
the information inside and most importantly, what it helped you
discover or decide. Think what was the
value in that step and if it isn't an important part
of the story, just skip it. I keep getting brought back to this really important point of telling a story with
your case study. Just like any story, no
structure is going to be exactly the same but it might help you to think
about it like this. The problem statement is
your inciting incident, the final result is
your resolution, and in between you'll
have a climax of some kind which is the most important
discovery or action that led to the final result and sprinkled in around
that you'll have some other information that enriches the story and
paints the picture. Now let's go through an example with the project I'm working on. For every story you first
have to set the scene. For me, I think it's
important to set the scene of who the team was and
what our roles were. Now the inciting incident or the problem or opportunity
for the rising action, I want to include my goals so, what would success look like, and then some
wireframes, US styles, feature prioritization, user
flows and design iterations. This all leads up
to the climax which for this story is the launch of our MVP or minimum viable
product to our beta users. Then, for the following action, I'll include data
that was collected and insights gathered
from the launch. For the resolution, I'm going to include the final
success metrics. This is my story structure but remember there are different
types of case studies. What if yours isn't a ground up project but one
of the other four categories? Let's take a minute
to illustrate potential story structures for the other four
categories that we outlined in less than three,
starting with improvement. An improvement case study might
look something like this. We have the problem
opportunity statement as the inciting
incident,then we have some research leading us up to feature prioritization which
is the inciting incident. Figuring out what we're
gonna be working on. We might run into
some challenges, so that would be something
to outline next. As you're working through
those challenges, you're probably working
on designs and iterations leading up to the climax
which is a feature launch. Launching what we
think is going to improve the product
and after that, as the conclusion, of course, we'll talk about whether it actually did improve
the product. What were the results or success metrics
from this project? Next is re-imagine. Again, we'll start with the problem
or opportunity statement. Next, we might include
content about analyzing the current solutions that
are already out there because if we're
re-imagining something, chances are there is some competitive analysis that we've done throughout
this project. Next, you might outline the key drivers or based on
the research that you did, what do you want the
new solution to have? Leading up to this new solution, you might outline research, your strategy includes some
wireframes and designs. The climax here of course, is the new proposed solution. Then you might want
to show the reactions that people had to this new solution or test
results you got from it. Lastly, since this is just re-imagining and it's
only a proposed solution, you might wrap up
with next steps, takeaways or a summary since this likely isn't the end of
the road for this project. Next is visionary and again, you're probably sick of
hearing this but we always start with the problem
or opportunity. Next, since this is more
of a conceptual project, you might want to
state your hypothesis to talk about what benefits you imagine could come
from a solution like this. Then, start getting
into your research, different iterations, maybe some challenges
that you face, all leading up to this
potential solution. Next, much like the
last one you may talk about some of the
reactions that people had to this potential solution if
you were able to show it to any potential users
or businesses and wrap it up with whatever next steps
could come from this. Lastly, combination. Here, you're going to start with
a problem or a question. You might state your
thesis or proposition and most of this case
study is going to be evidence and examples. The climax here is what action the reader should take
and after that to wrap up you can really just summarize these findings that you
shared. Now it's your turn. Go ahead and sketch out a story structure based on everything that
you've learned here. It can be one that I already shared or you might
use something that's a bit different depending
on your project and fill it in with
these story points, thinking about how the story
of your project unfolded. How did you get from the
problem to the solution? Feel free to take a
photo or a screenshot of this and share it below in
the discussion section. I'd love to see it and I
know other students would benefit from seeing a bunch
of different examples. In the next lesson,
we're going to use this little story
structure sketch to create our outline and then
actually start writing the copy that's going to
make up your case study. [MUSIC]
6. Write the Content: Now, it's time to really get cracking on this case study. If you're anything like me, writing the content is by
far the most daunting part. But don't worry, we're
going to break this down into digestible chunks. Once you're done with this part, the rest of the process is going to unfold
really naturally. I like to start by opening
up a new Google Doc. Since I hate starting
with a blank page, I'll create a bullet
point outline based on the story structure
we already created. Let's start typing that out. We're starting with
some background info. Here will include the when, the who, and a little bit
more information on my role. Next is the problem statement. Here I'll have the
actual problem statement or opportunity. Then I think here I want to have some visuals of
that opportunity, and this will make more sense as you get to know
my project a bit, as we work on this. Next, I'm calling this
section the road to MVP. Goals or what would
success look like, feature prioritization,
we'll include wireframes, UI styles, user flows, design iterations, and
here I think I want to show each feature or flow. Put visuals. Next is the launch,
so that climax. Talk about launching
MVP to our Beta users. I might start to talk
about marketing, so how we got the Beta users. After that initial launch, I'll talk about challenges
and improvements, so some data collected
and insights we gathered, more feature prioritization,
and more iterations. Lastly, the resolution is going to be some
success metrics, any takeaways, and learnings. Now that we have this
skeleton to work with, we can take the next
couple of hours, maybe a lot faster if
you're a quick writer, and start to add
some explanation to each of these bullet points. I'm going to do
that now and come back and talk about
how I approached it. I'll go through this at a
high level, but of course, you can take a look at the
actual live case study if you want to read
every single word. First, let's go through
the background info. I decided I wanted to include the timeline, the team members, and then a little
bit more on my role since my role wasn't
just in product design, but I actually did a lot
of other things too. I wanted to make sure
that that was clear. Then I took some time to
write my problem statement. This actually took me a while. I will read this for you
since this is one of the most important parts
of the case study. So much of the juicy stuff on social happens in
the comment section. Since social is
moving more and more towards short-form
video content, why shouldn't
commenting follow suit? We notice this is actually
already happening, but there aren't great tools or platforms out there
that encourage it. This commentary content
that could be so rich, funny, informative, or
insightful, just feels amateur. So that the problem. I made a note here that I
want to include a visual of the green screen effect
on TikTok because that's an example of how this
is already happening, but it looks and
feels really amateur because there isn't a whole lot that helps people do this. That green screen
effect is good, but it is super glitchy and just doesn't look
very professional. Then we get into
the opportunity. We took this opportunity
to build Bubble; the social video
commenting app that lets users grab any
content from the web, record a short video
comment over top of it, and get reactions
from their friends. That whole thing is my problem
and opportunity statement. Then I have this that sets the scene a little
bit, but to be honest, I'm not totally sure if I'm
going to use this or not. It might be overkill. Then if you notice here, I'm not naming these
sections headlines of the UX process. I'm naming them something
more specific to the project. This main heading is going
to be called Road to MVP. I outline the goals, and because of those goals, what features we ended up
wanting to prioritize. Anytime I have bullet
points here in the outline, those are actually going to be bullet points in the case study. Not everything has to be written
out in paragraph format. Bullet points are a really
good way to get your point across without forcing
someone to read so much. I have more notes here about
what I want to include. After feature prioritization,
I might want to show an animated flow for
each of these features. Maybe wireframes or a journey
map sketch for each one too, then UI iterations. I want to pick one of the
screens and show how the UI evolved from the first
iteration to the final one. Maybe sketch out some things that went into
that process like, we didn't like this
because of XYZ, this didn't perform well
with users because of XYZ, and show how we got from A to Z. Next, I'm going to
show a little bit about the design system. This is not 100 percent
necessary, but like I said, I also did other things
than just product design. I worked a lot on the
branding as well, so I thought it would be
nice to show that here. I want to outline
some challenges and compromises we had to make. Because when it comes to an MVP, it is just that the
minimum viable product. I just want to show some of the compromises
we had to make. Then I'll talk about the Beta
launch, launching the MVP, and how we got those Beta users, a little bit of
marketing since I had some marketing design work
that went into this project. After that, what insights and improvements came out of that? Data we collected, and specifically where I'm
going to get that data, something like bug
reports that we have, app feedback within
the Bubble app. More feature prioritization, and notes here that you
can read about what we want to improve
after getting feedback. Lastly, the public launch. What were the results of that? We have all of these
results that I have and any takeaways
in learning. Maybe you don't have all this
data, that's totally okay. You can just show maybe
a quote of what someone said when they interacted
with this that showed that it might be a good
potential solution. Positive, negative
quotes, things like that. You could also just share your takeaways and
learnings from the project, especially if it's
a school project or one of your first projects, or a project from bootcamp. Not everything is going
to have all this data, and that is totally fine. For example, some of the more personal learnings
that I wanted to share, I am including at the very end. Working quick and getting
feedback early on was something that I really
got out of this project. It's something I wasn't
very good at before I started the project and I just learned how important
it is and I got much better at it
throughout this work. Now, I want to share
some general tips for writing this
type of content. First, lien on headings
and subtitles. This will really help strike
a balance between depth, and at a glance digestibility. Having a skimmable case
study is really important, especially for hiring managers. Try to write as
if you're telling a fellow designer friend
about this project. You wouldn't get stuck in
the weeds with the details, but you would highlight the most important or
interesting things. Don't define the UX process, talk about what you actually
did and tell that story. Keep it brief. I wouldn't have more than three
sentences per paragraph. If a section is getting long, think about a, cutting out any
unnecessary fluff or b, splitting it into two sections that each have one main point. Go back to the fourth lesson
if you need a refresher on the must-haves versus
the nice-to-haves. Lastly, don't write what you
could show with visuals. As you're writing,
just make a note of which visuals you're
going to show where. Usually, I put these
notes in italics in brackets so that they stand out against the written content. Lastly, feel free to check out the examples in my mini
database if you get stuck. But also don't be paralyzed
by the comparison trap. Everyone's project
is so different, so try to go with your gun. The action step
for this lesson is the toughest, but you can do it. Go write that content and I promise if you put
some thought into it, the rest of this process
will be smooth sailing. As always, feel free to ask questions down in the
discussion section, and I would be happy
to help out if I can. In the next lesson,
we're going to open up Adobe XD or your
design tool of choice, and get your file
all ready to go. Come back and I'll see you in that lesson when
you're ready for it. [MUSIC]
7. Set Up your Xd File: When it comes to
setting up your file, you have two options. Now it's time to decide
if you want to optimize your case study for Behance
or your personal site. I'm going to show you
quickly how to do both. But what are the pros
and cons of each? In my opinion, you can't
go wrong with Behance, especially if you're looking for new opportunities or you're interested in getting
your work out there in front of
other designers, Behance is a great
place for that. Because I've been
featured on Behance, I actually get lot of job
inquiries in my Behance DMs. That said when it
comes to Behance, there's definitely a lot
less flexibility in terms of laying out your content,
specifically your text. That's why I take
the design approach that I do by laying out all of the text in Adobe XD and
exporting them as PNGs. With this approach
though, you can't optimize for other breakpoints, specifically mobile, so I usually try to keep
the text rather large. That brings me to the pros of optimizing for your
personal site, such as on Webflow, Squarespace, or wherever you host and build your website. If you go with that, you
can treat this as more of an actual webpage design
project because you actually have control over the exact layout and how it scales on different breakpoints. The other pro to this is having your own little space on the Internet usually
makes you seem a bit more professional and
you have complete control over what the user sees as they're viewing
your case study. Those are the pros and
cons in my opinion, but why can't you have
the best of both worlds? There are actually a
couple of ways to do that. Number 1, have your
own personal website and in the work section, create thumbnails for
each piece of work that link out to the
corresponding Behance project. This is what I do now. Note that I have the
Behance project open in a new tab so that users are never taken away from my site. Number 2, have your work optimized for
Behance on Behance, but then also have a version
on your personal portfolio. Depending on how many
case studies you have and how in-depth they are, this could be really
time-consuming. It's something I've personally wanted to do for a long time, but just haven't made
the time for yet. The good news though, is if you decide to just
start with Behance, you can always use the Behance
design that you create and come back to it later to build it in Webflow
or Squarespace. You don't have to design
completely different layouts. With all that said, the only difference in how you would set up
your art board for each approach is the
height of your art boards. If you decide you want
to optimize for Behance, you're going to want to
create a vertical stack of art boards that are 1920 pixels wide by
1080 pixels high. Always keep the width the same, but you can vary the height
a bit and it won't matter. Then off to the side, create another art board
that's 808 by 632 pixels. This will be for your thumbnail. If you're mixing Behance altogether and you
just want to use XD to design the layout
for the page you're going to build in
your website builder. You'll just design on a single
1920 pixel wide art board that will end up being as
long as you want it to. Then I'd also recommend creating a long art board with a
mobile-friendly width. I use 375 pixels since that's the smallest
common phone width. Keep in mind that
building a webpage in Webflow or Squarespace is
not part of this class. [MUSIC] If you don't yet have
experience doing that or you don't have a personal
portfolio right now, then I'd recommend just sticking with Behance for the time being. That's about it for
setup, easy enough. Next we'll populate your
design assets panel and your XD file with all the styles that you're going to need
for your case study.
8. Define your Styles: Now that we've got our
XD file all set up, let's make things easy on
ourselves and fill out our asset panel with all the styles we're going
to need going forward. This is super easy because
you'll likely want to use the same styles that you
used in the project itself. This might be as simple
as skimming through your XD libraries and pulling in the one that
you use for your project. If you haven't done
that or you're not familiar with how
libraries work in XD, it's really simple. Let's
go through that now. There are three things
you keep an a library, colors, type styles,
and components. For a case study like this, colors and type styles are
definitely the most important. Within this project file I'm just going to
direct your attention to the left where we
have our asset panel. You can see we have colors, character styles,
and components. Components are like symbols, but we're again just
going to focus on colors and text styles. The way that you get these to populate here is super simple. Let's say that we
delete this for now, this red, and it'll
say I want to add it. I'm just selecting an element
that's of that color, and I'm coming up here and
clicking the plus button, and then we call
this record red. You can also do the same
thing for textiles. Maybe I want a
style for this tag, I can just hit plus here. But what if I want
to be able to access these assets from
a different file like my case study file. You can really easily
publish this as a library. We're going to come up
to this share icon. It's going to tell me
that this current file is ready to be published, so I'm just hitting Publish. Now if I switch over to my case study file, I can go here, hit View libraries,
and I can find this library right here where I can pull all of
these same styles in. If you don't even feel
like dealing with that, you can just copy and
paste some elements or screens in from your file and grab the colors and text styles and add them to a new library
in this case study file. Of course you're not
limited to anything here. I'm probably going
to need to make a lot of these texts
styles larger, because before I was
designing for a mobile app, now I'm going to be designing
for a Behance case study. You might also have to
add more text styles, and you can even change things up and use a
completely different font. You can use different
colors if you want, it's totally up to you, but it's so much easier, in my opinion to just have
this place to start off from. It's also important
to note that you can toggle back
and forth between your libraries and the
document assets that you have, so these assets that
are specific to this document versus pulling
from a different library. At this point, you
can also start to bring in some different icons, or logos, or illustrations, if any of that is
relevant to your project. You can either keep
them off to the side or you can hit command
K and actually make them into components
that are going to live down in this section to be pulled in
whenever you need them, and we'll be getting
way deeper into visuals in the future lesson, so if you don't have anything
like that yet, don't worry. Once you've got some styles ready in your case study file, feel free to move on
to the next lesson where am going to
be answering one of the most common questions I get about my Behance
case studies. [MUSIC]
9. Get that Seamless Look: [BACKGROUND] I want to answer one frequently asked question before we dive into
building this case study, how do I make my
case studies look like one smooth scrolling, seamless web page, even though they're
made up of a bunch of separate different
art boards and the answer is
overlapping elements. Let me show you some examples. This is one of my old case
studies and I want to show you just how many
overlapping elements I use to achieve this look. First, we'll talk about
the background elements. If we just move this iPhone
out of the way for now, you can see that the
background color of both of these art boards
is this gray beige color. What I have over top is this
white sort of wave shape. What I've done is I've
actually duplicated it onto both of these art
boards so if you see, if I delete that one, you can see there are
actually two separate shapes. If I just hit "Command
C" and then go on to this art board and
hit "Command V" It's going to by
default paste in place. But if I just scotch it up until it's perfectly
in line like this and then I do "Command left bracket" until
it goes to the very back. Then I have created this shape that continues onto two
different art boards. That's just the background. I do this in a few
different places. Here, I've used this
wave shape that's green, instead of having this
really sharp transition where it definitely looks
like two separate art boards, I've come in with this
green wave shape so that it sort of flows a little bit more smoothly
into this content. I do that same thing
here with this shape, and I do it with other
elements too, for example, this iPhone mock-up, you can see it's actually two
different images. I've duplicated it onto this art board and then
just scoot it up again so that it lines up perfectly
and it looks like a perfect continuation
of the visual element. I've done that same
thing with this image. Down here I've done
it with this mock-up. People get tripped
up with this because art boards act as masks. You can't just throw
one element between two art boards and get the
exact effect you want. Instead you have
to manually copy, paste it and align it up. That it's duplicated on one
art board and the other. It's super easy though just
zoom all the way in and check that the continuation
is a perfect match. It probably goes
without saying that you have to have your
art boards exactly lined up like butt
up against each other in order for this
to work. That's it. It's a simple tip, but it goes a long way in giving
you the ability to make your Behance project
smooth scrolling like a website and super flexible with how
you want it to look. Try this out with a couple of different shapes or masks or photos and see if you can play around
with how this works, then you'll be ready to
apply the technique when we actually start building your case
[BACKGROUND] [MUSIC] study in the next lesson [MUSIC].
10. Build that Case Study!: Now that you have all the parts necessary to create
this case study, it's really just time to
start puzzling them together. Go ahead and open up
everything you've got. You should have the
empty design file that you just set up
for your case study, any design files from
your project itself, your written outline,
and your folder full of project notes and work in
progress and things like that. The first thing I
like to do is create the header image that'll
kick off my case study. This can be in any
style you like. Along with the most
important thing which is a strong visual in
this header section, I also like to include
the title of my project, a one-line description, and a little bit
of background info for immediate context. Then I just start moving through the different
sections of my outline and
copying and pasting the copy into my
case study file, laying it out on the art board, and all the while
thinking about what I can show versus just tell. For example, in my problem
statement you remember I referenced the green
screen effect on Tiktok. I'm going to show an
actual screenshot, maybe even a GIF of that. There's a visual paired with the verbal that really gets
the point across of this is what's happening
now and there's this opportunity for
a better solution. [MUSIC] Once I've laid out two
or three sections, I like to make sure
they're flowing nicely together and have some
visual variation. Sometimes I do this
with background colors, sometimes with shapes,
images, things like that. Once I do this I can repeat that pattern
throughout the rest of the case study using consistent heading and body text styles. [MUSIC] Just like anything
else in design, there's no exact formula to this process so the best thing
I can do is just show you how I approach it
and point you to some other great examples in that database that I mentioned
in the resource section. But with all that said, I do want to walk
through a bunch of different ways that you could present
information visually. That's what we're going
to do in the next lesson.
11. Present Information Visually: Throughout your case study,
there are going to be several different
opportunities for you to present
information visually. This is going to help the
case study be so much more digestible,
less text-heavy. There are eight main ways that we're going
to walk through; data, iconography, charts, highlights,
bullet points, quotes, imagery, and mock-ups. As we go, I'm going
to be showing you lots of examples from other case studies so if you want to look at these
in their entirety, just check out the mini-database linked in the resource section. First, let's talk about data. Anytime you're talking
about metrics or research, consider presenting
it with a bar graph, a pie chart, or
something else in visual that viewers can
understand at a glance. Iconography, when you
have a section with more than two or three
different points, see if you can use a series of icons to introduce or
represent each one. Charts. Visuals
doesn't just have to mean imagery,
shapes, or icons. The way that you lay
out text can also really help make a section
easier to read and understand. See if there are any sections of your case study where you can organize ideas and
text visually. Highlights, just like using a larger text style
for your headings, highlighting important points is another great way to make your case study more
digestible and skimmable. Bullet points, try to avoid long paragraphs of texts because they're not
easily scannable. Use bullet points
whenever you can instead. Quotes, if you have a quote that was really
informative during your research or one that shows the impact
of your solution. You could amplify
it by designing it to stand out in
your case study. Imagery, I personally
like to use imagery to keep my
case study engaging. This type of visual really doesn't make or break
your case study. In fact, if you use too much, it can actually distract
from your main points, so make sure any imagery
you use is relevant. I usually try to
photograph imagery myself, but when I can't, I
rely on Unsplash. They have a lot of really
high-quality options that are royalty-free. Lastly, mockups. Mockups are a really
important piece of most case studies, so make sure you're using or creating
high-quality mockups. I've included some
of my favorites in the resource
section of this class. Feel free to keep
them simple or really make them your own
like this example. Some of these may
not be relevant to your case study and
that's totally okay. The worst thing you can do is include everything and overcrowd your case study making it really confusing and diluting
your message. So when in doubt,
keep it concise. Before moving on to
the next lesson, here's your action step. Design out each section by following your
written case study. This might sound intimidating, but all you're really doing is combining the written portion of your case study with any visual or visuals
that make sense. You've already done
all the hard work of telling the story. Feel free to leave
blank or create placeholder shapes for any areas where you want to
include animations. [MUSIC] We're going to tackle
that in the next lesson.
12. Create an Animated GIF: Friends we're
getting really close to finishing these case studies. In this lesson, I'm going to walk you through how to create an animated GIF to include
in your case studies, no matter where you
end up publishing. For my bubble case study, there actually isn't
a whole lot of animation involved
in the project. In order to show you guys this, I've hopped over to one of my previous projects and
case studies called phase. That's what we're
looking at here. If you scroll down, you can see I've
designed this just like I have designed
my bubbled case study. Vertical stacked artboards like this that all have
the same width. I want to show you what I
do when I decide that I want to have an animation
inside one of these sections. For this section,
I wanted to show what it would look
like when someone dragged on this scale
and selected a number. I've created an animation
just by duplicating this artboard twice here and
manipulating the design. Every single thing stays the same except for
these few elements. [NOISE] This, I've just
moved to the seven, and this line I've just dragged out to be long
enough to reach that. Then I just duplicated
this section over onto this next artboard
and done the same thing, moved this selector
over to the eight, and then I've wired it
up in prototype mode. If we go into prototype mode, I've done a time trigger
and put this on a loop. After 0.5 seconds, it will
auto animate to this screen. I've done easing, ease and out, and then I've just done the same thing here
after 0.7 seconds, and then after 0.7 more seconds, it's going to loop
back to the beginning. If you aren't super
familiar with animating and using
auto animate in XD, I do have some tutorials
on my YouTube channel that you can use as
resources to catch up there. This is what this
looks like here, this is what you're
looking at here, it's basically just
a looping animation that shows a little
bit of movement here, that just makes it a little
more visually interesting. Now, in order to capture
this as a video, what we [NOISE] want to
do is go back up to play this prototype and we're
just going to hit record. I want to make sure
that my mouse is completely out of
the way, my cursor, and I'm going to let
this play through the loop a couple of
times to make sure that we have at least one
really good full cycle of the animation in this video. Then, I'll stop recording and I'm going to save this MP4. We have this animation here, and I'm going to open it
up in QuickTime Player so that we can trim this
down to one full cycle. In QuickTime, I'm just going
to hit Command T to trim, and I'm just going to find
one [MUSIC] perfect loop. Right there, it looks good
and then I'm going to do command S to save. [NOISE] I'm just going
to call this trimmed, and we can get rid of
that longer one there. Now, a really easy app
that I have learned to use for turning an MP4 into
a GIF is called gifski. You can find this
in the App Store. It looks like this in
the app store on Mac, there's also a tool
called GifTuna that you can use if you're
using a Windows PC, that I believe is
the same thing. We're going to open that up, [NOISE] and it just
looks like this, this cute little window
when you open it up, and I'm just going to drag this MP4 right into that window. The only settings we want
to change are the width, we're going to do 1920s, since that's the width of
the rest of our artboards. We want to make sure
loop forever is on. We have the quality
all the way up and the estimated size is
only 1.9 megabytes. This usually way
overestimates the size, I'll show you what it
actually ends up being. I will note if you have
a much longer animation, you may have to downgrade
the quality a bit, but in my experience, it's never made a
huge, huge difference. It always looks
really high-quality, which is why I really
love this tool and it's free if I didn't
already mentioned that. I'm going to hit convert. That took less than 20 seconds, so now we're just
going to do Save As, and we'll save that
to our desktop. Now, I'm just going to
select on it and hit the Spacebar to preview what
this is going to look like. As you can see, it's
super high-quality, the speed is nice, it's not jumpy or laggy at all, all of the colors
look super accurate. If you like how this looks, go ahead and repeat
the process for any other animations that
you want to include in your case study and put
all of your GIF files into the Behance folder that you made at the beginning
of the class. I usually name these files
with numbers based on the order that the artboards will appear in, in
your case study. You can mix this GIF
in with all of your P, and Gs that you'll be
exporting in the next lesson. You know your action
step for this lesson, go ahead and create
your gifs and place them in the folder organized
however you would like. In the next lesson, we're going to be
exporting the rest of your case study and actually
uploading it to Behance. [MUSIC]
13. Export & Upload: [MUSIC] First of all,
yes, you did it. Your case study is finally
finished, congratulations. Now all you need to do is
get it ready to publish. Depending on the
approach you're taking, you're going to move forward
in one of two directions. If you are actually
building this case study on Squarespace or Webflow, then you aren't going to actually export
these art boards. In this case, you're just
going to want to export the individual visual assets, like your images,
shapes, mockups. You can just save all those
elements into a folder and then when you go
to build your page, then you can just bring them in. However, I think most of you
have optimized for Behance. If that's the case, you can actually drag through, select every single art board, hit "Command E" to export, and export these SPNGs into the Behance folder
you created earlier. Again, if you want
to stay organized, I usually like to name these art boards in
ascending order, starting at the top, at one, then 2, 3, 4, etc. so that they can stay organized
in your Behance folder. Next, hop into your
Behance account and hit "Share your work". This will open up a new project. One note here,
you're going to see prototype as an option to import from XD or Figma and you can absolutely
feel free to do this. However, sometimes
a prototype without any context doesn't really
do much for your viewer. Remember the whole point of
your case study is to tell the story of how you've
solved this problem. Before you go
adding a prototype, ask yourself where or if this prototype
fits into your story. Next hit "Image", navigate to your Behance
folder and select all of the PNGs and GIFs that
you want to upload. Once these load,
you'll notice there's some default spacing
between them. To remove that hit "Styles"
on the right-hand side and change it from 60 pixels
to zero then hit "Save". Make sure your images are
in the correct order. If you need to edit
the order at all, hover over an image, click on that blue edit icon
and select re-order project. From here you can change
and save the new order. One thing to note, if you're using GIFs with background colors
that aren't white, you may notice something
a little funky. Because your GIF may be a different quality
image than your PNGs, the color may have changed just a little bit
in the process. If this is the case don't worry, it's a super easy fix. Go back into XD
and select all of the static art boards that have that same background color. Go into the eye dropper tool and sample the exported
GIF background color. In XD it will look like two
different background colors, but once they're all in Behance, they'll be perfectly consistent. The action item for
this lesson is simple. Just follow those steps that
I did to upload everything into a Behance project and in the next lesson we'll add
the finishing touches, like your thumbnail,
project title, description, and any
tags. See you soon.
14. Finish & Publish!: Here come the finishing touches. You've uploaded all of your images into your
Behance project, and hopefully you've
skimmed through to make sure there are
no typos or weird, funky things going on. Now it's almost time
to hit "Publish", go into settings and upload
a project thumbnail. In the beginning
of the class I had you set up an art
board for this, but if you haven't
designed that as of yet, no worries, I'm going to
give you a couple of tips. Number 1, don't use too
much text but do include a really short description
so that someone knows what to expect
when they click on this, feature relevant
mockups so that viewers know what the actual
output of the project was. Choose the most
interesting screen to showcase on your mockup. Personally, I like to take
my header design and just adapt it for this thumbnail so they end up looking
super similar. Next, give your project a title. The title doesn't
matter too much if you're just using
this as a portfolio, but if you're trying to get
tons of use on the platform, try naming it something
people might search for. The two projects I got
featured were called, Smart Diffuser App and
Cycle Syncing App. But to be honest, my
titles might not have had anything to do with getting
featured. Who knows? Next, add some tags. This is another
opportunity to think about relevant search terms
for your project. I usually start with UI, UX, product design, and
then get more specific, like future tech
mobile app automation, app design and things like that, then fill out the
tools you used in the categories that your
project falls into. Lastly, you'll add
the description I usually copy and paste
one of the first sections of my case study for
this paragraph that introduces the project
nicely and that's it. Proofread everything one more time and then hit, "Publish". Getting featured
on Behance should not be your goal
because to be honest, you have very little
control over that. However, you might
want to know that your project only gets sent to the Behance curation team one time on your very first publish. So don't just upload half of your case study and then come
back and finish it later, only publish once
you're completely done. You know your action step here, fill out all of the fields for this Behance project
and hit "Publish". Seriously, you guys should be really proud of yourself
for coming this far. This is a lot of work. I really hope you'll
share the link with me in the discussion section below. I would absolutely
love to see what you guys created and I know that other students of the
class would really benefit from seeing
these as inspiration. [MUSIC]
15. Conclusion: First I want to say
a huge congrats on finishing this class. You're one huge step closer
to landing that next job, gaining more credibility
as a designer, and inspiring the
creative community. I honestly had so
much fun taking you guys through the
process of writing, designing, and publishing
your in-depth case studies. Don't forget to
upload your projects below in the class
community section, I really want to see
what you worked on. You can feel free to post the link to your
project or upload a few of your favorite art boards or all of your art boards, it's totally up to you. If you liked this
teaching style, feel free to check out my other
class here on Skillshare. It's called Intro to UI UX for graphic designers as well as my YouTube channel
and Instagram, where I also share design
content all the time. Thanks for sticking with
me throughout this, and I hope to see you guys in another class or
video really soon. Bye. [MUSIC] My
hands are so cold. [NOISE] Very generic idyllic,
how do you say that? Idyllic. Idyllic. Come on buddy,
you can do this.
Maddy Beard, Product Designer & Educator
