Home > Collaborative prototyping > Instructional design and interactive prototyping
Instructional design is about creating experiences that facilitate learning. Here’s how you can apply it when prototyping

Instructional design is about creating experiences that facilitate learning. Here’s how you can apply it when prototyping

Instructional design is an often overlooked but important element to UX. As designers, we can be tasked with the problem of designing learning solutions, whether explicitly in the form of learning platforms or implicitly in the way we create easy to use user experiences.

In this post, we’ll go into what instructional design is and how this can be applied to the prototyping process. Then, you’ll be empowered to make the right choices when creating your own designs in Justinmind.

What is instructional design?

According to the University of Michigan, instructional design is the development of specifications using instructional theory to ensure the quality of learning.

It is the entire process of analysis of learning needs and goals and the development of a delivery system to meet those needs.


It includes development of instructional materials and activities, tryout and evaluation of all instruction and learner activities.

According to an article on Online Learning Insights, there are three main principles of instructional design: analyze, develop and implement.

Essentially, instructional design is about:

  • Understanding learning theories
  • Analyzing your audience and their needs
  • Designing in a way to meet their needs
  • Implementing quality training

Models of instructional design

There exist frameworks which can be used to develop training. These models outline the process you should take to create training and offer guidance as you move through the development process.

The instructional design models are:

  • SAM
  • Rapid prototyping
  • Gradual release

The model you choose should align with your workflow, team and the content. A flexible team might benefit from the rapid prototyping model whereas if you’re working with short deadlines, SAM may be the better choice.

A more comprehensive outline of instructional design models can be found here.

Apply instructional design principles to your interactive prototypes. Download now.

Download free

How does instructional design relate to UX?

Instructional design is about designing and delivering learning experiences. Designing a learning experience must, by its nature, be a user experience. Why? Because it is your users who learn.

Instructional design implicates other areas of UX including, but not limited to:

  • Content
  • Layout
  • Navigation
  • Information architecture

That means UX designers throughout their careers are undoubtedly going to be involved in the creation of learning experiences as there is a lot of crossover between both fields.

Imagine you create a new app with an interactive walkthrough. This walkthrough should be designed in a way to facilitate the user’s understanding of the app and the acquisition of skill required to continue using it with ease. Want more on designing your own walkthroughs? No problem.

Take a user interface – UX designers will want to design a user interface in such a way that it is easy for users to understand. It wouldn’t be advantageous to have a UI which requires the user to learn something new every time they use it.

Let’s take a look at how you can combine UX, ID and prototyping for an even more powerful design process.

Catch up with instructional design expert David Sherwin over at this Q&A

Instructional design and interactive prototyping

The principles of instructional design can equally be applied to interactive prototyping.

Prototyping in the design process is used to define requirements (analyze the problem), devise a strategy to manage requirements through building designs of screens with UI elements (developing a solution), and ultimately to reinforce the design strategy through feedback and iterations (implementing the solution).


Analyzing the problem with prototypes

Building a prototype allows you to identify potential problem areas and diagnose weak points to overcome them early on, because you’re not wasting time with the details when you should be focusing on the bigger picture.

When it comes to your training processes, creating an online, or eLearning, environment for your employees can be really beneficial.

Prototype your own elearning platform with Justinmind.

Creating a prototype of the final design wastes time and money. But consider another point of view: by creating a prototype of your training material, you focus on providing your employees with the facts and the essentials.

How do we figure this? Because by not wasting time on the finer details that go into the end design, you concentrate on the problem at hand, and how you can offer up an effective solution.

Prototypes, depending on their fidelity, are not meant to be polished, pixel-perfect designs. They are designed to help us get a better idea of what we’re working towards, and learn from each iteration.

When we’re looking at the bigger picture, we have space to think. And, by simplifying our ideas, we can get everyone on the same page.

With Justinmind, you can create prototypes that allow you to analyze problems by gathering requirements and setting them out clearly in a visual format.

You can implement requirements using Justinmind in two ways:

  1. by importing them into your prototypes
  2. by creating them from scratch, and customizing them within Justinmind.

Applying instructional design to UI elements

Once we’ve analyzed the problem, the next step is to devise a strategy to overcome the problem, with the user in mind.

Keep your user at the front of mind with your own empathy maps.

In this case, we want to improve learning methods by trimming the fat off the traditional training processes.

When learning is done through documentation, it can feel tedious and the information doesn’t always stick. Likewise, when we engage in group classes someone is bound to feel neglected.

Prototyping offers a unique way of implementing and communicating ideas into solid, coherent and visual solutions.

Using prototypes, UI designers can establish the basic look-and-feel and functionality of their to-be webpage or mobile app, without having to work at simulating a complete set of interactions or presenting the visual design.

In this way, their designs are both coherent and easy to use – exactly what you want in a learning environment! By learning with prototypes, we can focus on the important information and not waste time documenting it, as it’s already been done for us.

Justinmind can be used to create tutorials and demos of existing applications, with a series of low to high fidelity wireframes and prototypes, and build up your design by adding interactive components as you need.

Additionally, you can create and simulate scenarios to track the user flow and get a better idea of how our users navigate certain screens. What a great way to create interactive learning tutorials!.

Start defining your personas and scenarios today.

Create easy-to-use prototypes in Justinmind. Download now.

Download free

Implementing that solution with high-fidelity prototypes

With high-fidelity prototypes, you can build a culture of sustainable learning. Imagine you’ve been handed an eLearning app: you’re able to read and interact with the app, and this helps you to visualize complicated concepts more easily. With a high-fidelity, interactive prototype, concepts come to life and tasks become more coherent.

“Learning is an interactive process: interaction is closely linked to successful learning; interacting with others or with information can help clarify concepts, improve problem solving, and enhance retention.” Educause

Moreover, it’s important to ensure that the information applied sticks. Learning and problem solving is an iterative process, as we rarely learn something once and fully understand the concept without having to retrace our steps – knowing and understanding are very distinct concepts, as we can see here.

With an iterative prototyping process, we can create knowledge and feedback loops that help to manage learning.

Justinmind’s Teamwork features encourage idea sharing and feedback by enabling multiple users to work together, collaborating and learning from the same screens simultaneously.


Adding instructional design to your prototyping process can really help you when you need to design systems and interfaces which facilitate learning experiences. Mix in a healthy dose of empathy and you’ll be on your way to making sure your user not only has a great user experience but learns along the way.

Emily is Marketing Content Editor at Justinmind

1 comment

Your email address will not be published. Required fields are marked *