H5P REFRESH
H5P is a third-party software used within Learning Management Systems (LMS) to provide interactive content to the learners. I was tasked with mocking up the H5P question formats and then updated the Style Sheets to make the embedded H5P content fit our LMS content refresh.
The default H5P colors, font, and UI was generally lack luster. Shown below, it was just plain grey, which barely changed in value with the hover states, and selecting an option added both a black and blue outline to an option simultaneously.
Our center wanted something less watered down, with more saturation, more of our own company colors added, and a different visual style overall.
COLOR TEST 1
The first test we did was seeing if we could spruce up the basic greyscale by just updating it to our brand's own greyscale palette and updating the selection state. We quickly decided we wanted more color involved.
COLOR TEST 2
We at first tried going with a monochromatic theme, shown first with the orange options. This, I thought, was a bit overwhelming and not very clear.
I then tried using the default taupe, which stayed in the final design, but had the selection be green. This got confusing when submitting the answers to get feedback, so instead I deferred to a color language system to implement.
FINAL COLOR
The color palette we had for the center was a brighter version of what you see to the left. To adhere to WCAG accessibility guidelines, I chose new tints for the established colors.
The colors laid out to your left are the final colors we decided on; however, it took several test combinations to settle on these.
To maintain a strong color language, certain colors were only used in certain scenarios:
Taupe is the default color without interaction.
Blue is for action items, like submit and select.
Red is for incorrect feedback, and green is for correct feedback.
FINAL DESIGN
After laying out the color system above, I applied those changes and created a final mockup to ensure that it looked as good in a functional context as a static one. After this, I applied the necessary color changes to the H5P CSS code and overrode the default style sheets provided by the site.