Devlin Peck
Creating an instructional design portfolio is arguably the single most important thing that you can do to land a corporate full-time job or secure freelance clients. A great portfolio will help you generate leads and get interviews.
Ideally, hiring managers or potential clients will go to your portfolio website, see your work, and imagine you producing that quality of work for them or their organization. After viewing your portfolio and work samples, the client or hiring manager should want you on their team.
In this article, you’ll learn how to create a portfolio that highlights your instructional design skill set, gains the trust of your intended audience, and moves you into the next stage of the hiring process.
Before you start working on your own portfolio, it’s a good idea to draw inspiration from others. This will help you get a better idea of the functionality and look-and-feel that you’d like to see in your portfolio, as well as what’s standard for the industry.
We'll explore several examples here, but check out the eLearning portfolio showcase to see over 30 successful portfolios. You can also explore this full guide to designing effective eLearning.
Since you’re already on my website, why not check out my portfolio page for some inspiration?
My portfolio homepage lists my public projects with brief descriptions for each. After selecting “Learn More,” you can see an in-depth write up to learn more about how I brought the project to life.
My portfolio includes much longer write-ups than most, but I’ve found that clients don’t like to guess about a freelancer’s involvement in a project. They want to know exactly what you did and how you did it.
I also include screenshots and videos throughout the write-up so that people can see the project itself, and I include an email opt-in to experience the full versions of the projects. We’ll get into my recommendations about these items later in the article.
Also, take a look at the other content I include on my site — testimonials, resources, an about page, and more. This content is part of the portfolio website, which plays just as much of a role in landing a client or securing a job as the projects themselves.
I’ve drawn inspiration from Cath Ellis’ portfolio since breaking into the field, and I suggest that you do the same! Cath’s portfolio is full of work samples, mockups, and live projects, and they’re laid out nicely in a visually appealing grid.
Take note of how Cath uses mockups to show off their projects on actual devices. This looks much more professional than simple screenshots.
Cath Ellis also includes a quote calculator, blog content, a modern about page, a brand bar, and a whole lot more. If you want to see a site that drives traffic and business while also looking amazing, check out Cath’s site.
Troy Ashman's portfolio website is comprehensive, branded well, and engaging. It features a wide range of technically demanding projects and projects that solve real-world problems.
Check out Troy's site to get some inspiration and see what a fully built-out site looks like.
Joe Stubenrauch's website helped him transition from tenured history professor to full-time curriculum designer at Amazon Web Services.
Joe features his instructional design problem-solving ability, his technical skills, and his attention to detail with visual design.
This website was built quickly by Joe as he was entering the field, so if you're newer to the space, then this is a great example to explore.
Helping Joe move through this process and secure his curriculum designer position helped me refine my approach to helping new instructional designers create their portfolios and land great opportunities. This approach serves as the basis for my Stand-Out Portfolio bundle of courses.
Also, if you're inspired by Joe's transition and would like to learn more about his journey, check out the Q&A session that we did with him.
Laura Strombergsson also quickly put together a highly effective eLearning portfolio website. She built it rapidly with SquareSpace, and this site helped her land a remote eLearning developer position at Sephora.
I had the pleasure of working with Laura in the ID Bootcamp, and she is an extremely talented designer. Check out her site for inspiration.
Check out my full review of Laura's site.
Amanda Nguyen is a positive force in this field with great design skills and a passion for learning. Her personality and skill set shine on her portfolio site, which features high-end projects for big brands alongside quirky, animated donuts and other illustrations.
Check out her site to experience it for yourself and soak up some sweet inspiration!
Aleksandra Drobik is an art teacher who is currently transitioning into instructional design. You may know her from the mock interview session that we did with Cara North, but she is active in the instructional design community as a whole.
She has also created a beautiful, simplistic portfolio website that highlights two of her projects. I was able to see these projects and this site come to life in the ID Bootcamp, and it was wonderful seeing how strong Aleks's design skills are (and how well she can take and apply feedback!).
Aleks uses crisp writing, intentional color choice, and careful design decisions to bring her story to life and draw you into her personality and projects.
At the time of this writing, Aleks has not yet started applying to positions, but we're all really looking forward to seeing where she winds up! Check out her site to see an early portfolio and get some inspiration.
Finally, Kassie Calvo has also created a wonderful portfolio website in the ID Bootcamp. Kassie used this portfolio (and the skills that she learned while creating it) to transition from science teacher to fully-remote corporate ID.
The straightforward website features microinteractions, a dark theme, and a powerful flagship project that highlights Kassie's attention to detail, process, and decision making skills.
Check it out to see another example of an early-stage (but highly effective) portfolio website.
You don’t need to limit your search for inspiration to instructional design portfolios. Many other creative professionals use portfolios to display their work: web designers, graphic designers, and product designers, just to name a few.
For example, if you know that you want your portfolio site to use a minimal design, then try searching for “best minimal portfolios” or “minimal portfolio examples.” You can also broaden your search to “best portfolios” to see a wider variety of sites that you can draw inspiration from.
At the end of the day, your portfolio is there to pique the interests of clients or hiring managers and help you land paid work. The methods that you use to do that across fields are often very similar.
Once you feel inspired and have a good idea about your direction for your portfolio, you need to decide which projects to include. If you've already done instructional design work, then you may want to adapt and polish the projects you've already completed.
I recommend including at least three projects in your portfolio: one flagship project, at least one supporting project, and at least one paid project.
Also, since the vast majority of instructional design work focuses on designing and developing eLearning, we’re going to focus on eLearning projects. If you want to focus on face-to-face instruction, you will need to adapt this advice accordingly.
The flagship project shows off your understanding of the full instructional design process. It demonstrates that you can 1) identify a problem that you can solve with instructional design, and 2) use your command of the instructional design process to solve that problem.
This will be the project that you’re most proud of. The one that employers and clients look at and say: “wow, we want this person on our team.” It's also what we spend some of the most time on in the Stand-Out Portfolio bundle.
So, how do we build the flagship project?
We need to start with a problem that’s caused by a lack of skill or knowledge, as these are the problems that instructional designers can solve. Draw on your own expertise and past experiences to come up with this problem: think about these types of problems that you’ve encountered on the job, at school, or even in your personal life.
For example, maybe you’re a teacher and you find that many of your colleagues do not know the best way to deal with angry parents. Maybe you’re a fluent Italian speaker and you realize that children in your country don’t know any Italian. Or maybe you’re a secretary and you find that many professionals in your office don’t have the skills to use Outlook effectively. You get the idea.
Once you’ve identified a problem that’s caused by a lack in skill or knowledge, try to think about who would come to you to solve this problem. Be specific.
In our school teacher example, imagine that the principal asks you to design a solution that will help their teachers interact with parents more positively. Maybe an Italian language school comes to you to help them design an online Italian language-learning solution for their students. Finally, imagine that an office manager comes to you to design a Microsoft Outlook course to help their employees use the software better.
Framing your problem from an actual client will help you contextualize it better. When you conceptualize your problem in response to a “real” client and a real problem, you’ll be following a process more similar to that which you would follow in the real world.
After you’ve identified a problem and you know who’s coming to you to solve this problem, it’s time to identify the best solution. The best solution is not determined by the solution that you would most like to include in your portfolio. It needs to make sense given the target audience and the problem itself.
For example, if all of the teachers at the principal’s school are available in-person at the same time every day, it would probably make the most sense to host an in-person workshop. If their school is remote (either permanently or due to the COVID-19 pandemic), then maybe a self-paced eLearning module would be best.
You need to justify why the solution you’ve come up with is the best solution for the situation. If you find that it’s not, then you need to either change your solution or change the facts of the situation to ensure that the problem, solution, and needs of the target audience are aligned.
If your goal as an instructional designer is to design and develop eLearning, then I recommend focusing on a problem and solution that make sense for eLearning. This is in line with what the market currently demands.
There’s also no saying that you need to limit yourself to one solution. Going back to our office manager and secretary example, perhaps you design a 30-minute eLearning solution and combine it with an infographic or job aid that people can refer to as needed. Pulling on different interventions to create a comprehensive solution will demonstrate your expertise as an instructional designer.
Now that you know which problem and solution you’re working with, write it down. Better yet, write down the exchange that you had with your “client” or “employer.” Write the email that they sent you describing the problem and giving you all of the information that you needed, then write the email that you sent them back where you identified the solution.
Again, this gives better context to your project and will work wonders when it comes time to write up your process and describe this solution to everyone who views your portfolio.
If you’re not confident in your solution or you’re not sure if the problem can be solved with instructional design, then I suggest returning to the instructional design basics.
Now that you know what you’re designing and why, I suggest creating a text-based storyboard. You will create learning objectives, then outline, script, and storyboard the full eLearning experience. You will not include any visuals during this stage.
Once you’ve finished drafting the script, try reviewing it yourself to ensure that there are no errors. Then, request feedback from anyone that you have available to you — colleagues, friends, or family. This will mirror the process that you’ll go through with clients and subject matter experts, and it’s good to get practice applying feedback early and often.
Also, if you’re not the expert in the topic area that you’re designing a solution for, then you should interview an expert to develop these objectives and write the content. The expert should also be closely involved in the review process.
After collecting and applying the feedback to the text-based storyboard, you’re ready to move forward.
Next, it’s time to design the visuals and layout for your project. I recommend doing this in a UI/UX design tool like Adobe XD or Figma. This allows you to quickly iterate on your designs as you get feedback.
This is important because your first design will almost never be your best design. You want your flagship project to look polished and professional, and to do this, you need to iterate.
Design the layout for your title slide, a question slide, a content slide, and any other slides that you envision for your project. Once you do this, request feedback from the same people as before. Ask them questions related to visual attractiveness, how they would interact with it, and more to identify where its weaknesses lie and how to improve it.
You can pull icons and graphics during this phase from places like Freepik, Pexels, Adobe Stock, and other image repositories.
Now it’s time to combine your visual designs with the text-based storyboard. Create the layout for each slide in your storyboard, then export each slide and include it in the text-based storyboard file.
Once this is complete, you’ll have a document that includes the script, programming notes, and slide designs for each slide in your solution. This is what you would show a client or stakeholder before moving the solution into development. Making changes at this phase will be much easier than making changes to the final product.
In other words, getting the experience creating a full storyboard (and being able to show it to potential clients and employers) will go a long way in establishing credibility.
With your full storyboard ready, it’s time to develop the end-product in your tool of choice. This should be straightforward since you have your storyboard to guide you.
Export your graphics and assets from your visual design tool and design the slides to mirror the mockups.
Do quality assurance testing as you go, and look at your project as if you were a client trying to catch every possible issue. Test all of the functionality, and ask people to review your project in case they catch anything that you did not.
Once the end-product is ready and error-free, you can host it on Amazon S3 to generate a link that you can share with others and post on your portfolio website.
It took me some time to realize this, but your write-up is almost as important as the end-product itself. We went through the trouble of storyboarding and mocking up the project before development not only because it helps us put more thought into our project, but also because it shows that we know what it’s like to work in a production environment.
So, you want your project write-up to do justice to this process. You will share this write-up on the web page where you link to the full project.
Describe the scenario with the “client” who came to you, and describe why your solution was appropriate. Describe your challenges and how you overcame them, and lay out your process clearly.
Show screenshots as they are relevant. For example, include screenshots from your Adobe XD file. Include a few pages of your storyboard, or even a link to the full storyboard file. Explain how you developed tough interactions in Storyline and show screenshots of your programming and triggers.
Save this write-up somewhere safe. You will need it once you’ve designed the portfolio site and are ready to bring your projects live.
Whereas your flagship project should show off your full command of the instructional design and eLearning development process, your supporting projects should show off different aspects of your instructional design skill set.
For example, you can include short eLearning projects that demonstrate your visual design and authoring tool skills. You may also create a tabbed interaction, a custom menu, or an eLearning Heroes Challenge.
On the other hand, you could include mockups for a potential solution to a different problem that you’ve identified — this shows that you know how to solve problems with instructional design, but you don't need to develop the end product.
These projects should be easier to create, and they do not demand such in-depth write-ups. They should show that you can use different design approaches, develop different types of interactivity, and respond to different types of problems.
It’s good to have at least one example of a project that you did for a real client or employer. If you’re new to the field, you want to answer “yes” when a potential client or employer asks you if any of the work in your portfolio was for a real client.
The obvious place to draw on this would be from your current full-time job. If you’ve done any sort of instructional design work, you may be able to strip it of confidential information, debrand it, and talk about the client generally.
If you do not have any paid work to show off, you can try finding a quick, beginner-friendly project on Upwork. You can also network with more experienced freelancers to see if they need a hand on any of their other projects, but I suggest having other projects in your portfolio first to show these freelancers what you can do.
Finally, if you’re not having any luck landing paid work, you can try volunteering your services for a nonprofit organization. This will let you support a cause that you care about while also gaining “real-world” experience, thereby serving as a stepping stone for paid work down the line.
Your portfolio website is perhaps the most important portfolio project that you will work on. Your website gives the first impression, and in some cases, may make the difference between a potential client or employer leaving your website or staying to look at your projects.
For this reason, the site needs to be professional, attention-grabbing, and memorable. This section will include my best advice on how to make this possible.
This section includes an affiliate link. Using it will help support me and the content on this site :).
If you’re looking to get a site online fast, then your best option will be something like Wix or SquareSpace. These What You See Is What You Get (WYSIWYG) editors let you drag and drop elements onto the screen, and they will appear exactly the same way when people access your site.
This makes these tools easy to use, but your ability to customize the sites will be limited. For example, if you don’t like how your Wix or SquareSpace site looks on the tablet view, there’s not much that you will be able to do about it.
You will also have to host your Storyline projects on a server like Amazon S3 because you will not have access to your website’s server.
Coding your portfolio website from scratch is an excellent way to learn more about front-end development. By learning the HTML, CSS, and JavaScript skills that you need to pull this off, you’ll set yourself up for new eLearning opportunities down the line (such as when it comes to xAPI and extending authoring tool functionality with JavaScript).
You will also have full control over your website and web server when you go with this option. This approach takes the most work, but it is the most rewarding.
If you’d like to get started with custom code, I recommend going through the freeCodeCamp curriculum.
If you’re looking for a combination of ease-of-use and full customization options, then you’re going to love Webflow (I used Webflow to build the website you’re on right now). This tool gives you full control over every visual aspect and breakpoint, and it also includes a visual editor.
It’s slightly different from tools like Wix and SquareSpace because, instead of dragging and dropping elements onto the screen, you visually edit the CSS properties that control how elements look on real websites.
This will give you the opportunity to learn about code and front-end web development without having to actually code the site from scratch.
They also have extremely fast hosting built into the product, but you cannot upload outside elements directly to their servers (this means that you will still need to use Amazon S3 to host your eLearning portfolio projects).
If you want to move forward with this option (which I highly recommend!), then you can create an account and go through the free Webflow 101 course to learn the tool.
After you know which tool you’re going to use to develop the site, it’s time to decide what you’re going to include.
Here are my general recommendations about what to include on your portfolio website:
These elements are the most important ones that I would recommend, but feel free to return to the sample portfolios I linked at the beginning of this article to get inspiration for what else you may like to include.
Once you know what you’d like to include on your portfolio website, you should design your site in a tool like Adobe XD or Figma.
This step may not be necessary if you’re using a pre-built template or a WYSIWYG editor. However, if you want to ensure that your site is unique, professional, and memorable, then this step is important.
Just as we designed the visual layout of the flagship project before moving it into development, you should iterate on the visual design of your portfolio website. You don’t want to go with the first design that you come up with. Get feedback and improve it while it’s still in Adobe XD so that, when you do develop it in your tool of choice, you have a polished blueprint to work from.
Don’t be afraid to let your personality show here, either. Use designs that resonate with you. At the end of the day, this is your corner of the web, and the more you can be yourself, the better your audience will know who you are and decide whether or not they would like to work with you.
With your site design in hand, it’s time to move into your development tool and bring your new site to life.
If you get stuck, look at the documentation for the site builder that you’re using. Or, if you’re building your site from scratch, Google the coding problems as you encounter them. Your question has likely been asked and answered on forums like Stack Overflow.
Ensure that your website looks good on all devices and screen sizes. This is called responsive design, and it’s important that users can have a good experience on your site no matter the device they’re accessing it from.
Finally, I recommend incorporating Google Analytics into your site so that you can see how many people access it, which pages they view, and how long they spend on each page.
Now that your portfolio website is live and it links to the projects that you want to show off, it’s time to get as many people to your site as possible. This is the fun part.
Put your website URL at the top of your resume, mention it in the first few lines of your cover letter or LinkedIn profile, and direct potential employers and clients to it every chance you get.
Also, once your site is live, it doesn’t mean that your work is done. Get feedback and iterate often. If you find that the site isn’t working for you, then ask people for feedback to figure out why. Keeping your site up-to-date and effective is an ongoing process.
Learn more about the evolution of my portfolio website.
Your online portfolio is often the most powerful tool at your disposal when it comes to securing a job or landing new projects. If you have an easy-to-use, well-designed portfolio website with projects that show off your skills, then you have a big advantage in the instructional design market.
If you'd like structured guidance while building your portfolio website and navigating the instructional design market, then feel free to check out the Stand-Out Portfolio bundle of courses.
