The e-learning development process is one of sustained collaboration, and one of its exciting aspects is seeing a course come to life on the screen. But how do you take something that previously only existed as text and give it a look and feel that pleases the client and—most importantly—their learners? At NogginLabs, our visual design strategy includes distinct phases that build upon one another, allowing us to continually move forward while taking into account feedback from everyone involved. It results in a final product that is not only brand-consistent, but also intuitive, engaging, and fun. Two development phases help us make the leap from concept to reality: mood boards and mockups.
Mood boards: How do they work?
“A mood board is a staring point for the conversation with the client about the course’s visuals,” explains Max Hudetz, a designer at NogginLabs. “It’s where we’ll make global design decisions that propagate through the course as a whole. Usually all we need to get started is some branded material from the client and the ‘feel’ that they’d like for the course.”
A mood board includes aspects such as typefaces, UI elements, and photos or illustrations. By way of example, Max created this sample mood board for the Tyrell Corporation. It provides this client with an opportunity to give feedback on the basic elements to be used in their upcoming training simulation.
Mockups: Replicating the experience
The creation of mockups comes next. These provide the client with a clear vision of a given screen or game included in the course while conveying functionality. Mockups adhere to the design guidelines established in the mood board.
“Once a mood board is approved, I use Adobe's Creative Cloud Libraries feature to store all of the typefaces, colors, graphics, and layers styles into a cloud-based library that I can then share with other designers working on the project,” Max says. “This helps team cohesion and cuts down on time spent digging through Photoshop files for the right graphic/font/logo/et cetera.”
As for conveying functionality, Max finds InVision to be a useful tool. “InVision lets us build in functionality to our mockups,” he says. “This elevates them from a static slide show to interactive prototypes—which is much more fun for our clients.”
We don’t have a fully functional InVision mockup in this blog, but Max did create this static mockup derived from the Tyrell Corporation mood board. In this case, the mockup demonstrates a human resources simulation. We now see how those design aspects are applied to a gamified branching conversation with the goal of training HR reps to interview and evaluate current and prospective employees. Looks like Leon’s really killing it at the office!
Mood boards and mockups are a vital phase of bridging the virtual and the actual with custom e-learning. If you’re a client, they’re a great chance for you to weigh in on the look and feel of the course early on. Specific, prescriptive feedback is best, according to Max.
“Clients who have a clear idea of what they want tend to give the best feedback. I much prefer something like. ‘Try a larger font for the header,’ to something like ‘Make it more dynamic.’”
When it comes to tips for designers working on mood boards and mockups, Max puts thoughtful engagement and preparation at the top of the list.
“Make sure to set aside some time to research, find references, and think before you even open Photoshop. Write out what you want to achieve visually and refer back to it as you work,” he says. “Time spent cultivating your ideas before making something always pays big dividends.”