Note: This is a personal class project created after observing confusion with Discord's user interface. It is not officially affiliated with Discord and was developed as part of Cal State Fullerton's MSIDT program.
Embedded Files
Introduction to Discord Text Communication
Introduction to Discord Text Communication
Developed using: Articulate Storyline, Articulate Rise, Adobe Illustrator
Why did I choose eLearning? The eLearning format allows me to replicate the Discord window and make it a guided presentation that mimics what it's like to use Discord. I aimed to make the experience feel authentic and applied to the adult learner. I also took advantage of Rise's capabilities by consolidating all the content in one page to minimize navigation confusion.
Situation
Situation
Discord is an instant messaging app that allows large groups to communicate in 'servers.' These servers use Text Channels, Threads, and Voice Channels for organization. With potentially hundreds of users in a single server, learning to navigate these options is crucial in order to keep up with conversation.
Task
Task
A micro-learning Articulate Rise course was created to be linked by a Discord Bot for new users upon server entrance. It is designed to be completed in about 10 minutes and includes Articulate Storyline blocks embedded within a scrolling Rise file. Although optimized for computer use, it is also accessible on mobile devices. The course incorporates design elements from Discord’s official branding guidelines and is meant for adults.
Learning Objectives
Learning Objectives
Navigate a Discord server interface for the first time.
Define the three types of Discord communication styles in a server (Text Channels, Threads, and Voice Channels).
Differentiate the use cases for Text Channels, Threads, and Voice Channels.
Figure 1: Diagram depicting the alternating input/output components of the overall lesson.
Development
Development
The lesson was designed carefully considering alternating between input and output activities for the learner. Articulate Rise was chosen as the primary platform for the micro-learning object because it can contain all the content on a single web page, which supports the overall linear format of the lesson (see Figure 1: Lesson Structure). Immediate feedback for the learner was included in every output section to reinforce the lesson content. Embedded Articulate Storyline files allowed for more complex interactions that align with Discord's style guidelines. These files also gave learners a simulated experience of Discord on a desktop, mimicking a computer screen.
Figure 2: Storyline file that reviews basic navigation.
Background Knowledge
Background Knowledge
The initial hook of the lesson engages learners with a universal texting experience: receiving group text messages. Learners enter their responses in a text-entry box within an embedded Articulate Storyline file, enabling them to share their experiences.
Learning Objective 1: Navigation
Learning Objective 1: Navigation
The Discord navigation micro-lecture and quiz are built into a second Articulate Storyline file (Figure 2). The micro-lecture is linear and self-paced, with an option to skip the lecture if learners are already familiar with instant messaging platforms.
Figure 3: The three options learners can choose from in the final Storyline file, and the green checkmark after they finish each section.
Learning Objectives 2 & 3: Text Styles
Learning Objectives 2 & 3: Text Styles
The text styles micro-lecture and sorting activity were created using Rise blocks to avoid embedding another Storyline file and utilize Rise's built-in functionality.
To complete the text styles portion of the lesson, however, a final Storyline file was included to review how to navigate and access the different text styles. The text styles are presented in order of increasing difficulty. True/false variables and state changes were incorporated into each branching path to indicate to the learner which styles they have completed after going through each category (Figure 3).
Final Knowledge Check
Final Knowledge Check
The final knowledge check is a short quiz reviewing the navigation and functionality of the different text styles. Explanations for both correct and incorrect answers are provided after each question to reinforce the lesson content for the learner.
Visual Design Choices
Visual Design Choices
The Storyline file was designed with the illusion of a 'seamless scroll' (figure 4) throughout the lesson. This was achieved by making multiple 'transition' assets on Adobe Illustrator with vector scaling using .svg files and Storyline files with backgrounds matching the theme colors in Rise. Discord's official branding guidelines were used to guide the overall project's design, fonts, and color choices.
Figure 4: TThe seamless transitions between elements.
Original Assets
Original Assets
A number of original visual assets were created from scratch on Adobe Photoshop and Illustrator (Figure 5). Discord Illustrations created by Kevin Dam inspired assets. However, I created and drew the ones for this project entirely. Other assets drawn for the project include phones, monitors, tablets, clouds, stars, etc.
Figure 5: Example of assets I drew.
Reducing Visual Cognitive Load
Reducing Visual Cognitive Load
Throughout the project, my goal was to minimize elements to enhance clarity for the learner and reduce visual clutter. For example in figure 6, pass 'A,' many shapes for each category created excessive lines and high contrast against the background, making the design visually overwhelming. In pass 'B,' I addressed this by enclosing the white ovals in a single large shape, simplifying the design and reducing the number of repeating shapes.
Similar examples could be seen in the first quiz of the lesson below (Figure 7 and 8). Rather than have all information present at once, I utilized Articulate Storyline's features to break down the information one at a time, and restricted the different regions of the screen to only be visible with hover states.
Figure 6: Shape simplification.
Figure 7: Before. Many bright pink regions and draggable circles.
Figure 8: After. Regions are hoverable; circles appear one by one.
Page updated
Google Sites
Report abuse