Creating an Instructional Design Portfolio

Published on 
July 13, 2020
Updated on 
August 12, 2020
Creating an Instructional Design Portfolio article cover photo

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.

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 target audience, and moves you into the next stage of the hiring process.

Instructional Design Portfolio Examples

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.

Let’s consider some examples.

My eLearning Portfolio

Since you’re already on my website, why not check out my portfolio page for some inspiration?

Devlin Peck's eLearning and instructional design portfolio screenshot

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.

Cath Ellis

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.

Cath Ellis' eLearning portfolio projects screenshot

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.

Tim Slade

Tim Slade also has a well-designed portfolio. The portfolio includes appealing visual mockups, and when you select them, you can learn more about the premise of the project. Some of the projects even include video highlight reels where Tim highlights the project’s functionality and design.

Tim Slade's custom eLearning portfolio screenshot

Check out the rest of the site to see Tim’s accomplishments, services, and blog. While you may not be as experienced or accomplished in the eLearning space, it’s good to see how other people position themselves for success.

eLearning Portfolio Lists

If you’re looking for more inspiration (and I highly encourage you to), then you should check out this list of 34 instructional design portfolios and this list of 14 eLearning portfolios.

Look Outside of Learning & Development (L&D)

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.

Create Your Instructional Design Projects

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. 

Create the Flagship Project

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

So, how do we build the flagship project?

Start with a Problem

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.

Identify the Solution

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.

Describe the Problem and Solution

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.

Write a Text-based Storyboard

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.

Mock Up Your Visual Designs

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.

Create a Full Storyboard

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.

Develop the End-Product

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.

Describe Your Process

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. 

Create the Supporting Project(s)

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.

Land the Paid Project(s)

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.

Design and Develop the Portfolio Website

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.

Choose a Tool

This section includes an affiliate link. Using it will help support me and the content on this site :).

Wix or SquareSpace

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.

Custom Code

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. 

Webflow

If you’re looking for a combination of ease-of-use and full customization options, then you’re going to love Webflow (I used Weflow 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.

Decide What to Include

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:

  • Projects: Your instructional design projects should be front and center on your portfolio site. Since most people will be going to your site to view your work, it only makes sense to have your work as easy to find as possible.
  • Picture of Yourself: This one is entirely optional, but I’ve found that viewers tend to feel more comfortable when they can see the person behind the site that they’re on. It helps establish credibility and gain trust, so I recommend including a high-quality photo of yourself somewhere on your site.
  • About page: For many people, a photo will likely not be enough. Viewers may want to know more about who you are, where you’ve come from, and what you can do. You can answer these questions (and more) on an About page.
  • Testimonials: It took me too long to realize how important testimonials are on a portfolio website. Potential clients and employers don’t want to just take your word about how great you are — they want to see what others have had to say. If you don’t have testimonials, don’t worry. Ask peers, previous employers, mentors, and anyone else who may be able to comment on the skills that you use as an instructional designer.
  • Logo: This one is not mandatory, but including a logo and branding assets will help differentiate your site and make it more memorable. 
  • Contact Page or Info: The “call-to-action” on your portfolio site should invite the viewer to take the next step and reach out to you. Don’t make this hard to do. You should have a contact form on your site, or, at the least, a prominently displayed email address.

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.

Design the site

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.

Develop the Site

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.

Next Steps

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.

Conclusion

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 want to learn more about instructional design, eLearning, and xAPI, then hop onto my mailing list. This will also give you access to my eLearning Slack channel and the wonderful community of instructional designers within.

You may also like...

View all articles