Tips To Help You Design eLearning With Adobe XD
It's been almost two years since I completely changed my design process. When I first started creating eLearning, my design process was almost non-existent. And it certainly did not focus on User Experience.
When I would get an eLearning request, I would either design using PowerPoint or go straight into an eLearning authoring tool to create the first draft of a course.
I really loathed working in PowerPoint to design because it felt clunky, manual, and tedious. How many hours did I waste updating slide after slide? Say I want to change a button in one place, then I would have to change it on every slide it was used on and replace it. That's not efficient, and my focus wasn't on the user. My focus was on getting all of the content into the PowerPoint because it took so long just to design in PowerPoint. On top of that, I could not view the experience as a whole. I'd only be able to view the slides in a linear fashion.
When it comes down to it, eLearning UI design is really not – and should not be – that different from web design. In my frustration, I sought out a new way to design. I downloaded a free trial of a tool called Sketch, and I became hooked.
Sketch allowed me to quickly create artboards with UI designs. My design time was cut in half, and the tool allowed me to spend my time iterating on my designs to better fit users.
After using Sketch for some time, Adobe announced that they would be coming out with a design and prototyping tool, Adobe XD (Experience Design).
I had to sign up to test it out. While I still use Sketch, Adobe XD has become my main design tool. Adobe's other products integrate really well with XD and that was the main selling point for me. Not only is it a design tool, but you can also super quickly prototype in the tool to test your products with users.
Since I started using Adobe XD for my eLearning products/projects, I've had a lot of interest in learning how I use it. In order to illustrate my design process, I decided to redo a form that I had not previously designed.
A few weeks ago, I created a form in Storyline that would pass a user's username and email to a Learning Record Store. This form would help to create an xAPI enabled project. I used Adobe XD to redo the design of the form.
In the following videos, I have recorded myself going through the design process in order to prepare the form to be developed in Storyline.
Sketch And Wireframe The Project
Before beginning a design in Adobe XD, I sketch the possible designs out on paper. I then use Adobe Capture (an Adobe mobile app) to upload the sketch to my Adobe CC Library. I then am able to pull the sketch into the project to refer to. I, then, create a wireframe for the form. Typically, this would be a good opportunity to then prototype the project before designing more.
Begin to work on the mockup and make design decisions.
Next, I begin to add color, imagery, and more styling to the project. I like to really think about how I can create a consistent User Experience and questions the user might have. I'll look at proven design patterns to help me when I am sketching or to make decisions along the way. I generally may have fonts, colors, and icons I already will be working with on the project.
Finish The Mockup, Prototype, And Export For Development
Finally, I start to finish the mockup, dabbling in prototype mode, and export the form to be used in Adobe XD. In the next article, I'll be sharing taking the design into development and making everything function.