PROTOTYPING FOR LEARNING

A resource for getting started with prototyping

Why We Prototype


One of our biggest challenges in developing learning solutions is to insure that our stakeholder’s vision, organizational needs and the audiences requirements are met to deliver the best possible experience. In the past we’ve jumped right into development. Now, by introducing prototyping, we provide a way to simplify the development process by experimenting, testing, and gathering feedback before the development process.

There are dozens of tools today which enable and provide simple ways to effectively prototype. For reference, we have selected and shared the latest toolset that we use within our team to design, gather feedback and test ideas for millions of learners that we provide contents and tools to each year.

Visual

Communicate Visually

Create a Visual Story

Road Map

Road Map

Get everyone on the same page

Better Results

Improve Results

Use feedback to make it better!

Steps for Prototyping

analyze

Define the
Problem

Ask questions, understand the need, don’t make any assumptions. Ask to speak to several audience (participants) who can provide feedback.

feedback

Understand the
Audience

This is critical! How will they use the deliverable? Where will they use it? What type of environment? What device will they use?

brainstorm

Brainstorm
Options

Use you sketching and prototyping apps to evolve the concept. Get feedback and once everything is good, start development.

Prototype evolve repeat

Prototype, Feedback,
Evolve, Repeat

Use prototyping tools and process to gather feedback, test concepts and once approved, develop, gather feedback, launch and repeat.

Get Feedback in between each step!

Get Started Sketching

The easiest way to start is by sketching out ideas and concepts as you are thinking, brainstorming or working with your stakeholder.

Start out with a pen and paper and start sketching as you are collaborating with your team. The following apps will allow you to use your device to digital sketch, collaborate and share ideas.

Use Sketching to Tell a Story

Instead of just presenting a mock-up, think about presenting your idea as a story. Use your prototype to help tell a story of a user interacting with your app. What can this user expect to see? How will they navigate between areas of the app or interact with the content?

Once you have the answers to these questions, make sure your answers are illustrated through the story your prototype tells.

screens

Basic Sketching Objects to Use

Below are quick examples of how to draw sample content within your sketch.
sketching

Try This Sketching Activity

Grab some paper and a pencil.

Draw a sample menu with 4 selections. and then a secondary content page that shows how you may use a headline, visual image or video and additional content.

Content Strategy for Design


Think about each device size, orientation and how a user will be interacting with it.

screensize

Ready to Prototype

XD for Wireframes and Prototyping

Design, prototype, share — all in XD. Learn More about XD
screensize

Don’t forget to experiment, play and adapt your process.

For homework, download and test one app a month (at least) to see how you can enhance your process.

Resources:

Tools, Apps, and Books to Check Out

Books to Open Your Eyes

Four great books to expand your imagination, learn about design and how people interact with content to managing your projects.

User Testing

Unlock customer insights and increase your revenue craft

Visit Website
Usertesting

Capturing Feedback

One of the key aspects of prototyping is getting feedback from your audience as often as possible to help evolve an idea and test its effectiveness. Check out these two great apps to grab and record anything on your Mac or Windows screen.

snagit

Snagit

Easy capture, edit and share anything on your Mac or Windows screen.


Explore
Camtasia

Camtasia

Capture video and audio of anything on your screen to document, share or instruct your audience.


Explore
Jing

Jing

A simple, free way to start sharing images and short videos and esily share them on the web.


Explore
lorem ipsum

iPad Pro with Apple Pencil

One of my favorite tools today is using Apple iPad Pro with the Apple Pencil to quickly sketch, screen grab and annotate elements.

Feedback Loops

Look for ways to connect and gather feedback during every phase of your project. A couple tools to explore.

usertesting
User Testing See, hear and talk to your customers as they engage with your products, apps and messaging. Make better decisions.


Explore
miro

Miro

Capture video and audio of anything on your screen to document, share or instruct your audience.


Explore
mural

Mural

Think and collaborate visually. Anywhere, anytime. Great for teams.


Explore

Creating Placeholder (fill-in) Copy

If you need to start conceptualizing content and layouts without any content, you can start with these fun text generators.

lorum

Lorum Ipsum

Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.

Explore
cupcake

CUPCAKE IPSUM

How about using auto-generated text that will actually make people love your project even more? Pretty sweet, right?

Explore
XD

Lorem Ipsum for XD

Download this plug-in in Adobe XD to instantly be able to add text to your wireframes.

Explore

Get Feedback in between each step!