The Color Scheme Picker is an xAPI-enabled tool for instructional designers and learning experience designers new to graphic or visual design in eLearning. The tool consists of ten curated color schemes intended for specific industries and provides an example of the scheme applied for an eLearning project. Instructional designers and learning experience designers can confidently incorporate them into their eLearning projects, effortlessly copying the identifying specifications (known as hex-codes) to clipboard from their favorite schemes. 

Audience: Instructional Designers and Learning Experience Designers new to graphic design in eLearning

Responsibilities: Instructional Design, eLearning Development, Graphic Design  

Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Sublime Text, Veracity LRS

What People Are Saying

Problem and Solution

Instructional designers who are new to graphic design often find it difficult to choose an appropriate color scheme for eLearning projects. However, color plays an integral part in the learning experience, and incorrect color choices could negatively impact learning gains.

After interviewing instructional designers who were new to graphic design, I determined that the Color Scheme Picker would help address some of the biggest knowledge and skill gaps. Conscious of how color impacts learners’ cognitive load, I curated ten different color schemes that instructional designers could use in their eLearning projects.

Process

To start, my main focus was on curating the color schemes. I leaned on my background in visual art and design and some UX research to curate color schemes based on mood and industry.

From there, I sketched wireframes for the user interface and quickly brought them into Adobe XD. To accommodate my written designs, I created buttons from scratch in Adobe Illustrator.

Once I had a visual prototype complete, I collected feedback and applied it before moving on to the final functional product (created with Articulate Storyline 360).

Finally, I added custom JavaScript to leverage xAPI and track exactly how people interact with the tool. This data, along with my qualitative analysis, helped me continuously revise and refine the tool.

Visual Mockups: Hand-drawn Sketches - Adobe XD - Adobe Illustrator

To brainstorm visually, I hand-drew sketches of wireframes in my notebook, a practice that I’ve been using since attending art school. Then I moved into Adobe XD where I created visual mockups and continued iterating on my designs. 

My goal was to make the Color Scheme Picker look minimalistic yet functional. I drew inspiration from popular color scheme generators, and I consistently requested feedback from people in my intended audience to refine the design. 

Once I achieved the desired look and feel, I moved into Articulate Storyline 360 to develop an interactive prototype.

Interactive Prototype

I used Articulate Storyline 360 to create the interactive prototype, which I planned out visually in Adobe XD beforehand. The prototype consisted of the opening screen, navigation tutorial, and the first color scheme. 

The navigation screen was the most complex to prototype. I challenged myself in creating the entire walk-through of the navigation as “states” on one slide. As the user goes through the tutorial the states are tied to triggers with conditions and variables that make them appear and disappear within the slide. 

In the first color scheme, I wanted to ensure that each interaction would adequately work as intended. On that slide, I created a base layer, states within the layer, and independent layers tied to triggers with conditions and variables. 

As I continued to work through each section of my prototype, I consistently tested the functionality in preview mode. To improve the user experience and check for issues, I watched people in my target audience use the tool and collected their feedback. 

One of the improvements that I made was to lock steps in the navigation tutorial, requiring the user to go through the steps in proceeding order (unless they chose to skip). I conducted additional testing after applying the necessary changes from the feedback that I received. Once the prototype was approved, I moved the project into full development, working in Articulate Storyline 360.

Full-Development 

I developed the final project in Articulate Storyline 360, using custom components that I created in Adobe Illustrator. Intrigued by user experience and data, I implemented xAPI, which tracks user behavior. When the user interacts with the tool, it executes JavaScript that sends xAPI statements to a Learning Record Store (LRS), where the data is stored.  

Features

• Opening Screen: Before beginning the experience, the opening screen provides a glimpse of the curated color schemes.   

• Custom Navigation Tutorial: The tutorial provides a walkthrough of the tool with step-by-step directions or allows the user to skip the tutorial. Building the navigation screen was the most challenging aspect of development, yet one of the most rewarding. 

• Dropdown Menu: The user can fully interact with the dropdown menu by quickly accessing a specific color scheme. To make the dropdown experience even more unique, when a user “favorites” a color scheme(s), a heart appears next to the color scheme(s) in the dropdown.  

• Favorited Heart: This feature was an essential component of the tool, as a heart is synonymous with liking or favoriting something. I intentionally added an extra detail in the dropdown menu to reflect which color schemes the user preferred.

xAPI & JavaScript 

I was eager to push myself to learn how to create xAPI statements and implement JavaScript into this tool. Following a series of xAPI tutorials, I took my time working through each line of code in Sublime Text. I found it essential to connect with the online community to receive feedback and ask questions I had about xAPI. 

In Articulate Storyline 360, I added custom JavaScript to specific interactions within the tool. Each time a user makes a choice, such as favoriting a color scheme, this triggers the JavaScript to execute. 

I meticulously wrote down notes and checked boxes off as I added each line of code into Articulate Storyline 360. Testing the JavaScript was essential in ensuring that it would execute and send a statement to the LRS. When the JavaScript wouldn’t execute, it motivated me to investigate where I needed to make adjustments to get a successful result.

The LRS & Data 

Every time a user interacts with the tool, it assigns a unique user number and sends a statement to an LRS. I intentionally chose specific interactions to track with xAPI. This data can be used to understand the user’s behavior and for future improvements of the tool.

Interactions

• Initiated: Initiating is the first interaction that the user gets with the tool and their first chance to glimpse the curated color schemes. This data is helpful as it shows that an instructional designer is interested in experiencing the color picker or looking to find colors to use in their project.

• Navigation Viewed, Completed, or Skipped: After the user clicks the start button, this executes the JavaScript and produces a viewed statement in the LRS. Then, in the navigation screen, one of two behaviors can be executed and tracked if the user chooses to go through the tutorial or skip it. Capturing this data helps show that an instructional designer is interested in using or exploring the tool. It also provides insight to see if they take the time to learn how the tool works or skip past and revisit the tool to access the color schemes. This data can help shape the tool in a future iteration and help decide what guidance is needed or not.

• Favorited: A user favoriting a color scheme correlates with a positive response and potential use in a project. The data from this interaction helps me understand which colors instructional designers prefer over others and which color schemes were the most liked. It can also reveal the type of industry the instructional designer may be in or the message their project conveys. 

• Information Viewed: When the user clicks on the information button, it describes the mood created by the colors and the intended industries. The data helps me understand if the person is looking for extra guidance by looking into getting more information on the type of industry the color scheme is appropriate for and mood. 

• Example Viewed: When the user clicks on the example button, it provides them with a visual of applying a color scheme in an eLearning mockup. The data allows me to see if examples are needed for instructional designers to see what it could look like and future iterations of having or omitting them. 

• Copied: The tool enables users to copy hex codes to clipboard for personal use. Seeing the hex codes copied helps me understand what color schemes are being implemented into an eLearning experience. As well, it provides me with the additional support of what color schemes instructional designers preferred.

Final Testing

I conducted user acceptance testing by asking instructional designers to give feedback before finalizing and launching the Color Scheme Picker. I wanted others to test out the functions on different devices to ensure the tool was fully functional and testing on multiple devices myself. 

The feedback from acceptance testing helped me identify an issue in the Navigation Tutorial wherein the information box would not go back to a hidden state on mobile and handheld tablets. To troubleshoot, I went back in and changed the information box from a state to a layer and adjusted the display trigger.

Further testing uncovered that the information button in the color schemes had trouble properly functioning on mobile and handheld tablets. Using the same method of changing the hidden information box from a state to a layer helped resolve the issue. This quality assurance process allowed me to make necessary changes and ensure that the tool performs to its full potential. 

Reflection

The process of creating the Color Scheme Picker has provided me with several key takeaways. 

• Authoring Tools: This project allowed me to incorporate advanced interactions in Articulate Storyline 360 by using states, variables, and conditions, which pushed my skill set and knowledge of the authoring tool.

• Code: As I continue to work on my developer skills, this experience allowed me to implement xAPI and Javascript. I feel much more confident working with code, and I look forward to new opportunities to do so.

• Data: It has been a thrilling experience observing and analyzing the data pulled by the xAPI statements in the LRS. In the future, I would like to analyze the data thoroughly to improve the tool and get user feedback from people who implement one of the color schemes into a learning experience.