Color Matching
Can you get the best match for your customer?
I designed this concept project to help paint department employees work with customers who want to color-match a sample that is too small. Employees navigate a scenario in which they help a customer make a good color match by asking about the customer's project and offering solutions that best meet the customer’s needs.
Audience
- Reese Hardware Employees
Responsibilities
- Instructional Design
- Action Mapping
- Storyboarding
- Visual Design
- Mockups
- 3D Modeling
Tools Used
- Articulate Storyline 360
- Inkscape
- Figma
- Blender
The Problem
I designed this project for Reese Hardware, a fictitious hardware store with multiple locations. The paint department offers color-matching. Poor color matches are the leading cause of mis-tinted and returned paints for the store. This is costly, as mis-tinted paint must be resold at a high discount. Mistinted color-matches are often the result of paint associates attempting to use a sample that is too small, which is hard for the machine to match.
Employees know how big a sample needs to be for a good color-match. The reason employees are matching samples that they know are too small is that they do not know how to respond to customer objections or make recommendations based on the customer’s project.
The Solution
I proposed a scenario-based eLearning experience in which the employees could practice overcoming customer objections, asking questions about the customer’s project, and recommending alternative solutions to a color-match.
Since Reese Hardware is a chain, eLearning makes the most sense due to its scalability. I chose scenario-based learning because it lets employees practice in a risk-free environment while letting them experience the negative consequences of matching an undersized sample.
I identified some alternative solutions, but determined they would not be as effective as eLearning. The company could try to put up visual aids at the paint counter. This would be ineffective since there is no accountability with a visual aid. Also, employees wouldn’t be able to consult the aid while in the middle of a conversation with the customer. The company could also hold in-person training. I recommend eLearning over in-person training here. The company has multiple locations, and training would need to be held regularly. eLearning is easier and ultimately more cost-efficient to implement in this case.
My Process
After deciding on a solution for Reese Hardware, I designed an action map to determine the key actions employees would need to perform. Next, I scripted the project in a storyboard. Then I designed the visuals on a visual design board. After that, I designed a prototype in Articulate Storyline 360. Finally, I designed the full project in Storyline.
Throughout each step, I sought feedback from mentors and peers, and made improvements with each iteration.
Action Map
I served as the SME for this project, drawing on my previous experience as a paint associate.
The business’s goal is to reduce the number of mistake paints. Using Cathy Moore’s action map approach, I designed an action map that focused on what employees needed to do over what they needed to know. I started by developing a business goal based on the company’s needs. Then, I identified key behaviors that had the greatest impact on the business goal.
Text-Based Storyboard
I wanted to create an immersive scenario that would draw learners in. The actions and choices of the learners needed to feel like they carried weight.
I introduced a mentor character to help the learner if needed. The mentor doesn’t give away the answer but presses the learner to think about the situation, which is something learners have to do on the job.
The storyboard also includes visual and programming notes that I could refer to later. If I were handing this project off to a programmer to design the project, this information would give them a better understanding of how the project should look and how elements should interact with each other.
Backgrounds
I started the visual process with the background. I wanted the backgrounds to feel unified, like they were all part of the same hardware store. So, I modeled a scene in 3D using Blender. This worked well, because I could position the camera to get multiple, visually consistent backgrounds for my project. I changed some settings to make the scene appear 2D, which better matched the design I was planning to use.
Working With Vector Images
I downloaded pre-designed characters for this project. Then, using Inkscape I made several custom changes to the characters such as designing aprons for the workers. I did this to help the learner more easily identify which of the characters were workers and which were customers.
I also designed some project scenes using vector images in Inkscape.
Visual Mockups
I designed a style guide that laid out the common visual elements for the project. This helped keep everything visually consistent. I referenced the style guide more than anything else when working on the learning experience.
Before working on the mockup, I used wireframes to test the position of characters, text boxes, and buttons. This gave me a good idea of how different screens would look before spending the time and effort on visual mockups.
Then, I designed the mockups. I went through multiple iterations for the mockups. This helped solidify all of the visuals before putting them into Storyline.
Interactive Prototype
Next, I created an interactive prototype in Storyline 360. For the prototype, I only programmed up to the second question. I collected and applied feedback here before working on the remainder of the project.
I programmed questions to be attempted as many times as the learner needed to get the correct answer. I planned early on for the consequence scenes to act as learning experiences. It's unavoidable that some learners will try to force their way through the learning by selecting each answer choice until they land on the correct answer. To solve this, I programmed answer choices to shuffle each time that the learner has to retry the question. Learners trying to rush through the scenario will have to slow down and focus on the questions in order to move on.
I focused on adding animations to text boxes and characters to make the scene feel less static. I was careful not to distract the learner by overusing animations.
Full Development
After a few rounds of iteration, I was ready to develop the full project. I created the scenes for the remaining 2 questions and the conclusion scene. I gave the learner some autonomy by letting them enter their name and select a character.
I also focused on the expressions and poses of the characters. This not only makes the learning experience feel more authentic, but it adds to the gravity of the situation when a learner chooses a wrong response. The customer gets angry. The manager is disappointed. It wouldn’t have made sense if they were smiling in these scenes. I wanted to make sure that everything made the experience feel genuine, and that learner choices felt impactful.
Takeaways
Though this project was for a fictitious company, I did share this project with a community of instructional designers to review, which was overwhelmingly positive. Reviewers were especially impressed with my visual design and how real the character interactions felt. If this were designed for a real company, we would be able to evaluate the effectiveness of this training by comparing the number of mistake paints made before and after the training. We should expect to see the percentage of monthly mistake paints to decrease by about 15-20%.
I came to appreciate the value of iteration throughout this project. I made dozens, if not hundreds of changes, tweaks, and updates throughout. I learned that feedback and constructive criticism are necessary to improve and to make something meaningful. This is how I plan to view projects going forward: Progress over perfection.