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.


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


Define the

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


Understand the

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



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!

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


Basic Sketching Objects to Use

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


    Draw some squiggly lines to represent copy from a headline to a paragraph.

  • text

    Hamburger Menu

    Add to allow the user to reveal additional commands or menu items that are not critical to the primary purpose of the screen.

  • yesbutton


    Can be rounded or squared and allows a user to select a call to action

  • text


    Can be used within a rectangle to represent a media element such as audio or video.

  • text


    Allows you to present choices that may expand upon selection to reveal additional choices.

  • text


    Can be used to call attention or alert the user to a particular interaction such as a warning or prompt.


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.


Ready to Prototype

XD for Wireframes and Prototyping

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

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.


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.

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 great apps to grab and record anything on your Mac or Windows screen.



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



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



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

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.

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 Ipsum

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



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


Lorem Ipsum for XD

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


Feedback Loops

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



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



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


User Testing

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