Prototyping with Adobe XD

Starting a new e-learning project can be exhilarating, confusing and exhausting all at the same time. Development tools like Captivate and Storyline are incredible but these tools are intended for the actual construction of e-learning courses. How do we test the user experience, the visuals, the layout, and the basic navigational logic before we devote a lot of time to actually building the course?

A lot of professionals turn to Microsoft Powerpoint for their prototyping needs. It makes sense because it is a tool that we are all familiar with, it’s slide based, and it is readily available. But does that make it the best choice for prototyping an e-learning course?

While wrestling with some design concepts for a new Storyline course, it hit me. E-learning is not only about the content, it’s also about the user experience. If your learners can’t easily get to the content that they want, you have failed–and most likely they will too. So why not use a tool made specifically for designing and testing user experiences? Enter Adobe XD.

In 2016, Adobe released Adobe Experience Design CC, a new product aimed at web and mobile designers for the sole purpose of prototyping the user experience. Adobe XD, as it has come to be known, makes creating wireframes, mockups, and working prototypes easier and faster than working in traditional development tools.

Wireframing the User Experience

Wireframing a project lets you quickly visualize basic layouts and navigation. If something doesn’t feel right, it is easily changed without spending a lot of time. Adobe XD has only simple drawing tools so you don’t get distracted by the minutiae of graphics creation. This lets you focus on developing your slide layouts and course navigation.

No Slides, Just Artboards

Artboards are a lot like slides in Storyline or Captivate. Choose from preset artboards sized for mobile devices and common screen dimensions, or create custom sizes to fit your specific needs. Adobe XD makes it easy to add, remove, and reorganize artboards so that you can quickly map out the content of your course.

Re-Purpose Your Content

Not only can you create simple wireframe graphics in Adobe XD, you can also create a working library of visual elements to be used across the project or even in other projects. This saves you a lot of time recreating more commonly used items like form fields, checkboxes, buttons, and other interface elements. But the best part is that you can update a library element and it automatically updates throughout your project. Talk about a time saver.

Want to save even more time? Download device specific elements from companies like Apple, Google, and Microsoft. Incorporate menus, buttons, text treatments, and a host of other interface elements into your e-learning courses without ever drawing the first shape. The best part is that these graphic libraries are absolutely free to download and use. 

Full-Color Mockups

When you are ready to move on to a full-color mockup, you can quickly replace your wireframe elements with live text, images, and even vector graphics. Use a traditional menu command approach or just drag and drop content from the desktop directly into your Adobe XD prototype. You can even drag and drop multiple items at once to really speed up the process.

Prototyping Course Navigation

Adobe XD makes it easy to add interactions between artboards with a simple drag-and-drop system. Select an artboard or an object on that artboard, then drag the interaction tab to the artboard you want the learner to see next. It is really quite an ingenious process, and it makes creating a working prototype really fast.

While the process is quite ingenious, it is also a very different approach than slide based applications. Instead of multi-state objects and layers, you must create additional artboards with the new appearance or content. Then, you must add a transition between those artboards to create the illusion of animation or state changes.

This is the only caveat that I have found with using Adobe XD for course prototyping. Fortunately, it is one that is easily overcome with a little practice. Keep in mind that you are creating a prototype, not the final product. It doesn’t have to be an exact representation of the course, just a close proximity. 

Sharing your XD Prototype

Using your free Adobe account, you can share your XD prototypes via a hyperlink and get feedback with built-in commenting tools. You can even privatize these hyperlinks to control who can participate in the review.

Take your prototype with you on your phone or tablet using the Adobe XD app. Demonstrate your design while meeting with your client or other stakeholders, no matter where you are. If your design is not intended for mobile, then log into your Adobe account from any computer to access your prototypes everywhere you go.

Can’t be there in person to demonstrate your design? No problem. Use Adobe XD to record a video presentation of your prototype that you can share with your clients or other stakeholders. Walk them through each step of your prototype and explain your design choices so that they get the full picture. I have used this feature many times during my development process to pose questions to my team about a design choice when an impromptu meeting was just not possible.

From XD Prototype to E-Learning Course

Once you have finalized your prototype and have gotten approval, how do you move your prototype into an e-learning development tool like Storyline or Captivate? Here again Adobe XD makes that very easy. Select and mark prototype assets for export as .jpg or .png. Export design specs including colors, typefaces, and dimensions to be used while building your course. 

So the next time you are faced with building a new e-learning course, give Adobe XD a try. I think you’ll enjoy the many prototyping features it has to offer. If you would like to learn more about Adobe XD and how to use it in an e-learning workflow, feel free to contact me.