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
Get everyone on the same page
Improve Results
Use feedback to make it better!
Steps for Prototyping
Define the
Problem
Ask questions, understand the need, don’t make any assumptions. Ask to speak to several audience (participants) who can provide 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
Options
Use you sketching and prototyping apps to evolve the concept. Get feedback and once everything is good, start development.
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.
-
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.
-
Button
Can be rounded or squared and allows a user to select a call to action
-
Play
Can be used within a rectangle to represent a media element such as audio or video.
-
Accordion
Allows you to present choices that may expand upon selection to reveal additional choices.
-
Blind/Modal
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
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.
The Design of Everyday Things
Don't Make Me Think
Creativity, Inc
Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days
Books for people who make web things.
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.
Camtasia
Capture video and audio of anything on your screen to document, share or instruct your audience.
Explore
Jing
A simple, free way to start sharing images and short videos and esily share them on the web.
Explore
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.
Explore
CUPCAKE IPSUM
How about using auto-generated text that will actually make people love your project even more? Pretty sweet, right?
Explore
Lorem Ipsum for XD
Download this plug-in in Adobe XD to instantly be able to add text to your wireframes.
ExploreFeedback Loops
Look for ways to connect and gather feedback during every phase of your project. A couple tools to explore.
Miro
Capture video and audio of anything on your screen to document, share or instruct your audience.
Explore
User Testing
See, hear and talk to your customers as they engage with your products, apps and messaging. Make better decisions.
Explore