In our work, we create custom learning solutions that aim to engage and delight our learners by being fresh, innovative, and, most importantly, human-centered. In order to do this, we use a design thinking framework that includes research and concepting to focus and inform the building of our learning experiences from the perspective of our users. This framework allows us to strategically create the most effective and impactful learning experiences, which is really the name of the game.

Before we dive into each stage, take a look at our design thinking framework (Figure 1):

This design thinking framework includes discovery, content architecture, concept, visual and interaction design, development, and testing and implementation.

Figure 1: A design thinking framework

Discovery

Discovery is the team’s jumping-off point. We conduct discovery at the beginning of projects to understand what learners need from our products and digital learning experiences. Our aims here are to understand who our learners are, and to identify and validate the problem we are solving for our clients. In this stage of the project cycle, we ask the big questions:

  • What is the purpose of this project?
  • What is the learning strategy?
  • What are the core learning objectives?

During discovery, we conduct user research and look in-depth at the goals, needs, and personas of the users to drive design and learning experience (LX) decisions. We will conduct interviews, surveys, card sorts, field research and analysis, etc. This is also our chance to read any secondary research that may give us a deeper understanding of the specific learning environment.

Tool tip: There are many tools available for these sorts of activities, and most of them provide sophisticated back-end aggregated data functionality, which helps cycle through research-based activities quickly and efficiently. It could be a simple Google Form or a more complex research platform, depending on your research needs. #getyourresearchon

Content architecture

In this stage of the framework, we begin to connect strategy with execution. It is traditionally where an instructional designer or content strategist comes into play. We begin by chunking the content and establishing our content hierarchy based on source material. We can then easily create user flows, wireframes, and sitemaps, depending on the particular project specs and modalities. As we employ a learner-centered approach, we validate our choices at each step with our SMEs, our clients, and our learners by integrating a continuous and collaborative feedback loop.

Tool tip: Our in-house team has been using (and loving) InVision’s Freehand application to rapidly validate and edit our assumptions within our user flows, wireframes, and content architecture (Figure 2). There are also other tools such as UXPin, Balsamiq Mockups, Axure, Google Slides, etc. It’s important to find a tool that works for you. #youdoyou

A diagram of content architecture, used with permission of InVision.

Figure 2: Content architecture (used with permission of InVision)

Concept

The concept phase is our magic moment where we get to design forward for our clients to create that impactful learning experience. We start off the concepting and creative direction phase with a concept board (or mood board, if you will). We document project objectives, brand guidelines, and key brand words, and we curate and pull visual and creative inspiration that sets the creative direction for the project and all corresponding components. This step is crucial, as it allows the client to interact with the concept in a meaningful way and also stands as our creative direction road map throughout the life cycle of the project.

Tool tip: We love InVision for this phase. It is an epic tool for concepting and creative direction. You need to bring the creativity, though, as any tool is only as powerful as your imagination will allow. #creativitytakescourage

Visual and interaction design

By harnessing the experiences and expertise of our team, we have adopted a process that is more closely aligned to web development or app design. It is during the visual and interaction design phase of our process that this becomes most evident as we begin to aggregate all of the pieces (Figure 3).

An animated GIF shows the visual and interaction design phases: concept, creative direction, content, wireflows, static screens, prototype.

Figure 3: The visual and interaction design phases

We use our concept, creative direction, content, and wireframes to create our first static and interface designs. The static mockups combine a selection of screens from the more complex wireframes. This allows us to quickly finalize the overall look and feel and move into digital prototyping. During this stage, we can rapidly iterate on our visual designs while also tweaking the content and instructional/interface copy as we test our assumptions.

Tool tip: In the past we have used Adobe XD, UXPin, and InVision to prototype our digital learning products and facilitate a smooth handoff with our development team. If this is an approach that you want to incorporate into your next project, do some testing to ensure you choose a platform that works for you. #bebold #beawesome

Figure 4: Handoff to development team (used with permission of InVision)

Development

Moving into development is an exciting stage of the process. By now, when following this framework, all concept, content, and design components and UX/UI pieces are 100 percent, and development is focused exclusively on the build, not on solving problems or validating design decisions, as that work is already done. (High five!) During development, we typically cycle through an alpha build, a beta build, an accessibility build, and, once we are prepping finals, a product sheet with all tech specs for reference. It is important to think about how your client will interact with and review these builds, especially if web-based.

Tool tip: Depending on the project specs, the tools you can use for development will vary. For digital learning, Articulate 360 (including Rise) and Adobe Captivate are the powerhouses. Articulate 360 has an amazing review tool with versioning that is super sophisticated in terms of client experience. If you are doing a web-based experience, the tools you use for these builds would be based on the language used and the project team’s skill set. #toomanyoptions

Testing and implementation

Testing is an important part of the project life cycle. In an ideal world, testing is done not only by the project team and client stakeholders but also by a cross-section of users. Being able to pre-launch and conduct user acceptance testing is optimal. This is a very web-based approach, and the digital learning world can definitely benefit by following suit. Being able to test with active users allows you to continuously iterate and deploy until official launch. This is a true iterative space that can push your experience to its best place by seeing and analyzing how the user testing groups are interacting with the content.