Table of Contents
This tutorial shows you how to take awesome things you’ve done and showcase them in a portfolio. The idea was to make it maximum easy for you by using a series of Google Slides templates to create portfolio entries on a platform like Adobe’s Behance. The portfolio entries here span innovation-related disciplines: design thinking, Lean Startup, lean UX, and data science, for example.
Why would you want to create such a portfolio? We’re moving away from an economy where the most interesting and best-paying jobs are in management or planning to one where the exciting work involves small, highly productive maker-doer teams creating valuable innovations. This is a showing vs. telling kind of work, and sharing a portfolio is a great way to share with employers, customers, and collaborators the kind of work you’ve done.
The sections below show you how to create a few different types of entries.
Application Design (+Agile Development)
What kind of project?
This entry is a good fit for any project where you learned about a problem or job that existed for a certain user, and designed a software/digital solution to make it better.
The specifics you see here are for two classes I teach- one at UVA Darden and one online (at Coursera). The first class is called ‘Software Design‘ and is a 14-session class (roughly 42 hours with assignments) where students take an idea and through design research and testing, figure out if and how it’s ready to be a software application. The second is an online class (via Coursera) called ‘Agile Meets Design Thinking‘ where students do similar work.
The core of objective for both classes is for students to be fluent in exploring a new idea in a disciplined way using methods from design thinking, Lean Startup, Lean UX, and agile. If you’ve explored a new idea with these methods, the templates and notes here may be a great fit for you, regardless of whether I’ve been lucky enough to have you as one of my students.
How do you do it?
Basically, you’ll do four things: 1) prepare inputs from your project work 2) add your material to the Google Slides template 3) record a quick demo of your software and 4) create an entry in Behance.
Short caveat- of course, feel free to render this in any way you like. I created a version that’s relatively ‘plug and chug’ to make it easier to do a basic version of this (which I would say is still a very good portfolio entry).
Step 1: Prepare the Inputs
This entry assumes you’ve used the Venture Design process or something like it. Examples of the kind of things you’ll need are: an interview you guide you used to do customer discovery, ideas on what problems you’re solving for the user, and agile user stories.
If you don’t have some of those and don’t want/plan to have them, you can probably improvise around it and still have the template work for you.
Step 2: Prepare the Google Slides Template
Here’s a Google Slide that you can start from: Application Design Portfolio Entry Template.
This will be the primary element in your Behance entry. To edit the template, just go to File -> Make A Copy to make your own editable copy.
I’ve described the specifics of what to put where in margin notes on the Google Slide itself. Note: This is one extra big Google Slide- if you are going to make a lot of changes, you may find it easier to break your content up into multiple slides. For more on changing the slide itself, see the section below ‘Notes on Working with Google Slides‘.
Step 3: Record A ‘Dramatization’ of your User Testing
You’ll notice in the sample entry on Behance that at the end there’s a video demo posted Youtube, which you can include or skip for your particular entry. It’s a recorded ‘dramatization’ of the user testing the team did. Why a ‘dramatization’ and what does that mean? Well, your subjects for user testing probably didn’t agree to have their face, etc. shared publicly. For this purpose, I generally think it’s easier to ‘stage’ the kind of user testing you did with one of your team members.
There’s more on how to do all this in the Customer Discovery Handbook (see section on Usability). The short version is that there’s a template for the test plan here (Test Plan template), and you can record it with any screen casting (screen recording) software. Ideally, you find one that allows you to record two frames- one small one of the subjects face and another of the screen w/ the software.
I use a Mac and normally record with ScreenFlow and I know Camtasia Studio is popular for the PC. The furball is that while both of these application offer a free trial, they put a big watermark over any footage your produce. On balance, I personally would say that’s still better than no footage, but you may disagree. You can skip this and still have a great portfolio entry. After a quick search, there also seem to be a number of ‘free’ screencasting applications out there. I haven’t tried any of them, but those may be an option.
Once you have this footage recorded, you’ll want to post it to Youtube (or similar). If you have a Gmail account, it’s pretty simple. Just go to Youtube and you’ll notice you can upload footage (as of this writing, that’s through an up arrow in the upper right hand corner of the screen). Once you have the footage uploaded, go to the ‘Share’ area and copy the embed snippet, which you’ll post on Behance at the end of your entry. There are lot of good tutorials online about these individual steps if you need more detail.
Step 4: Post Everything to a Behance Entry
Basically, now you just need to 1) download your Google Slide as a PDF and convert it to a PNG and 2) post the embed code from your YouTube video to the entry. On posting your work from Google Slides, see the section below ‘Notes on Creating Entries on Behance‘ for more details.
On the video, you can see in the sample entry that I added a preface ‘We finished the project by mocking up those top user stories and conducting some user testing with interactive prototypes. Here’s an example of the kind of testing we did:’, which you can do with the Add Text control on Behance. (I changed the type to Verdana and the text color to #58595B to try to match it with the rest of the entry). Then use the ‘Embed Media’ control to paste in the iframe/embed snippet you got from your post to YouTube.
You’re done! If this is your first entry, make sure to ‘activate’ your Behance account and be sure you can reach your new entry even if you’re not logged in to Behance.
You may also want to take note of the URL and post it your LinkedIn profile, etc.
Interface Design
What kind of project?
Basically, this is a subset of the entry type above, Application Design. This one is a better fit if your project was already briefed on the who and the why and the hypothesis about value/motivation, and you focused on how to deliver a great UX against those assumptions.
Also, if you’re in my MSBA class ‘Digital Design’, this one’s for you. (The MSBA is kind of like an MBA refactored around analytics and data science.)
How do you do it?
Basically, follow the steps above in Application Design, but use this template that’s just focused on the points you would have covered (user stories, prototypes, user testing): Template for Interface Design.
Application Development
What kind of project?
This entry is a good fit for any project where you took design to solve some user need and built software to deliver on that design.
The specifics you see here are for a class I teach at UVA Darden (graduate business school) called ‘Coding with GPT‘. This is a 14-session class (roughly 42 hours with assignments) where students build web applications using HTML, CSS, and Javascript.
The core of our learning objectives are about the process of turning design and narrative into software (vs. becoming a career programmer), but I think this entry is a good fit for any development project where you want to showcase how you moved from design narrative (i.e. user stories) to prototype to working software.
How do you do it?
Basically, you’ll do four things: 1) prepare inputs from your project 2) add your material to the Google Slides template 3) record a quick demo of your software and 4) create an entry in Behance.
Short caveat- of course, feel free to render this in any way you like. I created a version that’s relatively ‘plug and chug’ to make it easier to do a basic version of this (which I would say is still a very good portfolio entry).
Step 1: Prepare the Inputs
The entry users the following five elements:
- Overview or Positioning Statement
- User Stories
- Wireframes (Mockups)
- Screen Shots of the App
- A Screen Recording (no sound necessary) of the App
If you don’t have some of those and don’t want/plan to have them, you can improvise around it. You’ll see more detail on those in this next section.
Step 2: Prepare the Google Slides Template
Here’s a Google Slide that you can start from: Application Development Portfolio Entry Template.
This will be the primary element in your Behance entry. To edit the template, just go to File -> Make A Copy to make your own editable copy.
I’ve described the specifics of what to put where in margin notes on the Google Slide itself. Note: This is one extra big Google Slide- if you are going to make a lot of changes, you may find it easier to break your content up into multiple slides. For more on changing the slide itself, see the section below ‘Notes on Working with Google Slides‘.
Step 3: Record Your Demo
You’ll notice in the sample entry on Behance that at the end there’s a video demo posted Youtube. It’s just a simple recording/demo (no sound) of your app.
Any app that allows you to record your screen will do. I use a Mac and normally record with ScreenFlow or just Zoom is also fine. After a quick search, there also seem to be a number of ‘free’ screencasting applications out there. I haven’t tried any of them, but those may be an option.
Export for footage in full res. (max res. the app offers) MP4 (or whatever the app offers).
Once you have this footage in a file, you’ll want to post it to Youtube (or similar). If you have a Gmail account, it’s pretty simple. Just go to Youtube and you’ll notice you can upload footage (as of this writing, that’s through an up arrow in the upper right hand corner of the screen). Once you have the footage uploaded, go to the ‘Share’ area and copy the embed snippet, which you’ll post on Behance at the end of your entry. (There are lot of good tutorials online about these individual steps if you need more detail.)
Step 4: Post Everything to a Behance Entry
Basically, now you just need to 1) download your Google Slide as a PDF and convert it to a PNG and 2) post the embed code from your YouTube video to the entry. On posting your work from Google Slides, see the section below ‘Notes on Creating Entries on Behance‘ for more details.
On the video, you can see in the sample entry that I added a preface ‘Here’s more on what we built:’, which you can do with the Add Text control on Behance. Then use the ‘Embed Media’ control to paste in the iframe/embed snippet you got from your post to YouTube.
You’re done! If this is your first entry, make sure to ‘activate’ your Behance account and be sure you can reach your new entry even if you’re not logged in to Behance.
You may also want to take note of the URL and post it your LinkedIn profile, etc.
Design Thinking
What kind of project?
This entry is a good fit for any project where you used the tools of design thinking to explore a problem or question of importance.
The specifics you see here are for a class Darden offers to all first-year students called ‘IDEA’. Students work on a problem supplied by a sponsor and use design thinking/design research to explore solutions.
The core learning objective is to give students first-hand experience with modern innovation practices against an actual design problem.
How do you do it?
Basically, you’ll do three things: 1) prepare your inputs 2) add your material to the Google Slides template and 3) post it to Behance.
Short caveat- of course, feel free to render this in any way you like. I created a version that’s relatively ‘plug and chug’ to make it easier to do a basic version of this (which I would say is still a very good portfolio entry).
Step 1: Prepare the Inputs
This entry assumes you’ve used a process something like the one you see above (What is? What if? What wows? What works?). If you don’t have some of those and don’t want/plan to have them, you can may be able to improvise around it and still have the template work for you.
The entry users the following five elements:
- Overview of the analytics challenge (this goes in the first couple of paragraphs)
- Notes on your substantive investigation- how you came up with your hypothesis (this goes in the section ‘Substantive Expertise’)
- Screen shots (you can just do a screen capture) of your visualization and description thereof (this goes in the section ‘Hacking Skills’)
- Closing notes (this is a discussion of the future applicability of stat’s in the ‘Math & Statistics Knowledge’ and the applicability of your findings for the section ‘Insights and Actionability’)
You’ll see more about these in the section that follows.
Step 2: Prepare the Google Slides Template
Here’s a Google Slide that you can start from: Design Thinking Portfolio Entry Template.
This will be the input to your Behance entry. To edit the template in Google Slides, just go to File -> Make A Copy to make your own editable copy.
I’ve described the specifics of what to put where in margin notes on the Google Slide itself. Note: This is one extra big Google Slide- if you are going to make a lot of changes, you may find it easier to break your content up into multiple slides. For more on changing the slide itself, see the section below ‘Notes on Working with Google Slides‘.
Step 3: Post Everything to a Behance Entry
Basically, now you just need to download the Google Slide you converted as a PDF, convert it to an image (PNG is good), and post it to Behance. See the section below ‘Notes on Creating Entries on Behance‘ for more details.
You’re done! You may want to take note of the URL and post it your LinkedIn profile, etc.
Data Science (Data Journalism)
What kind of project?
While there are so many potentially cool data science-related portfolio entries, this one is focused on visualization. My colleagues at Darden (Casey Lichtendahl & Yael Grushka-Cockayne) use a case from data science learning hub Kaggle to introduce data visualization: ‘Don’t Get Kicked!‘, about a company called Carvana.
The core learning objective is to give students an understanding of how data visualization can help you formulate better hypotheses that you can later test with predictive models.
How do you do it?
Basically, you’ll do three things: 1) prepare inputs 2) add your material to the Google Slides template and 3) post it to Behance.
Short caveat- of course, feel free to render this in any way you like. I created a version that’s relatively ‘plug and chug’ to make it easier to do a basic version of this (which I would say is still a very good portfolio entry).
Step 1: Prepare the Inputs
This entry assumes you’ve executed some kind of data visualization to develop a predictive hypothesis about some business problem. If you don’t have all of that, you may be able to improvise some.
Step 2: Prepping the Google Slides Template
Here’s a Google Slide that you can start from: Data Science/Data Journalism Portfolio Entry Template.
This will be the input to your Behance entry. To edit the template in Google Slides, just go to File -> Make A Copy to make your own editable copy.
Pretty much, I’ve described the specifics of what to put where in margin notes on the Google Slide itself. Note: This is one extra big Google Slide- if you are going to make a lot of changes, you may want to break it up. For more on this see the section below ‘Notes on Working with Google Slides‘. The output of this step is an image (PNG file) you can upload to Behance.
Step 3: Post Everything to a Behance Entry
Now post your PNG image to Behance. See the section below ‘Notes on Creating Entries on Behance‘ for more details.
You’re done! You may want to take note of the URL and post it your LinkedIn profile, etc. (though of course that’s totally optional).
Notes on Working with Google Slides
The templates are one super big Google Slide. This seemed like the easiest way to create something that was universally accessible, highly editable, and could be exported in a process that was suitable for Behance.
Prepping Your Slide
The first thing you’ll need to do is go to the File menu and use the command ‘Make a Copy’ to get your own editable copy of the file. You’ll need to be logged in to Gmail/Google on whatever browser instance you’re using to do this. Not surprisingly, all this works best on Chrome.
Note: once you’ve read (or not!) the notes in the margins, you’ll want to delete those before you export.
Resizing the Slide
If you want to make the slide longer or shorter, here are the steps:
- Select All (command/ctrl + a) and then cut it (command/ctrl + x)
- Go to File >> Page Setup and change the dimensions to whatever you want
- Paste in what you deleted (command/ctrl + v)
If you make a mistake and lose what’s in the buffer after you cut, you can use the versioning in Google Slides to revert to before you deleted the material.
Exporting Work from Google Slides & Adding it to Behance
First, start a new Behance entry and (Add Work button up top) and then use the add file option. Shockingly, Behance does not support Adobe’s own PDF format so you’ll need to import an image. Also, Google Slides doesn’t natively support an image export of the templates at an adequate resolution. So, basically what you’ll do is export a PDF from Google Slides and then turn that into an image.
Make sure you’ve deleted all the explanatory notes in the margins. Then, download your Google Slides template as a PDF (File >> Download As). From a Mac, you can then open it in the native Preview app and export to PNG. I’m not sure how to do that on Windows, but if it’s not easy, here is a site that apparently offers a free online utility: http://pdf2png.com/ (be sure to use the ‘Download All’ option- the individual download doesn’t seem to work). Note: If you have the option/ability to resize images, a width of 1,200 pixels strikes a good balance between resolution and load time.
Now you’re ready to post on Behance. On Behance, click the ‘Add Work’ button. Use ‘Upload File’ to add the PNG you created. Make sure it is set to full screen, which I think it will do by default.
Notes on Creating Entries on Behance
Using Behance
If you don’t already have a (free) Behance account, you’ll need one. They have a paid plan but the free version is fine for this purpose. Just head on over there and sign up. You just need one account to add the files, but after you’re done, you can add your teammates as ‘Co-Owners’ on the entry (if/when they create Behance accounts themselves).
Adding YouTube Videos
Note: Not all the portfolio entry types include a video.
If you have a Gmail account, you can enable your Youtube channel with a few clicks. The process for uploading and then embedding a video is pretty straightforward, but if you run into a snag, not surprisingly, there are a lot of Youtube videos about how to do it.
Amplifying Your Awesome with a Portfolio
How is your newfound portfolio going to help you? Generally speaking, they’re an effective way to show (vs. tell) prospective employers, clients, and collaborators about the kind of work you’ve done. Here are a few specific ways you might create visibility for your portfolio.
Adding Portfolio Entries to Your LinkedIn Profile
If you use LinkedIn, this is a good place to start. You can add individual portfolio entries as ‘Media’ under your various ‘Positions’ on LinkedIn. The ‘Media’ section is at the end of the window that posts when you edit a ‘Position’:
Just paste the URL you see when you click on your portfolio entry, and you’re ready to go. One small note: Currently, the preview that LinkedIn does on these Media items doesn’t show images on Behance. Given this, I add a small note at the beginning of the Media’s description that says ‘PLEASE NOTE: Click ‘View Source’ to see the entry.’
Add it to Your Email Footer
This is a good opportunity to highlight things about yourself. I would include the link to your full profile.
Add it to Your Resume
If you have a resume, this is an obvious place to link to your portfolio. The native URL’s on Behance (ex: https://www.behance.net/acowan2f8f) are short enough where you can probably add them to your core contact information.
Send it to an Employer
The natural thing to do (at least from Behance’s perspective) is to send a link to your portfolio. Are there old school managers would are more inclined to open an attachment? Yes. Behance doesn’t allow you to export, sadly, but you can still merge the PDF’s you would have created from the Google Slide templates and use that.
And You?
Please consider sharing your story about how you ended up using the portfolio in the comments below! I’m certainly learning more about how these function for individuals whose core job is something other than designer.
Final note: The best portfolios come from purposeful thinking about how to run a disciplined process against a clear outcome and tell a compelling visual story about that. My advice is to start thinking about new projects through this additional lens: How might this project look in my portfolio?
