Atom Dark Mode

Atom Dark Mode

This was a 20% time project to experiment with applying dark mode templating to our platform as an option for users. This coincided with our theming and accessibility project.

Project Snapshot

MVP Release:

Q4 2019

Team Members:

1 Product Designer

Project Overview

Anthony took over this project from my initial low-fidelity concepting work and led it to completion by validating that dark mode theming works with our template structure and design system. He also had to create the ability for the users to turn it on and off through a settings panel. He was able to validate dark mode by several high-level templates and content flows.

Dark Mode User Settings

The settings to turn on dark mode and visual impairment modes. There is also a quick toggle for the dark mode coming from the user drop down to save clicks.

Student Desktop Experience Dark Mode

20 Activity Library Search & Filter Quiz 2.jpg

19 Activity Library Search & Filter Quiz Copy 3.jpg

16 LP Module with Resume Activity Copy.png

15 Learning Path Sub Module with Completion Copy.png

14 LP Quiz Review Playlist Expanded Copy.png

10 LP Playlist Expanded Activity 3 Quiz Start Copy.png

009 LP Playlist Practice Test Q2 Copy 7.png

009 LP Playlist Practice Test Q2 Copy 6.png

009 LP Playlist Practice Test Q2 Copy 3.png

09 LP Playlist Collapsed Activity 3 Quiz Copy.png

08 LP Playlist Collapsed Activity 2 Article Complete Copy.png

06 LP Playlist Collapsed Activity 1 Video Copy.png

04 Learning Path Module View Notification DM Yellow.png

05 LP Playlist Activity 1 Video Copy.png

07 LP Playlist Collapsed Activity 2 Article Copy.png

Student Mobile Experience Dark Mode

025 M Activity Library Article Complete.png

011 M LP Playlist Quiz Review Expanded.png

Gradebook Desktop Dark Mode

In his 20% time Anthony experimented with skinning a dark mode version of the Gradebook UIs to add to the backlog. The UIs still needed to be validated for color contrast. I suggested that certain color palletes may need black or dark gray text to make them have better contrast particularly on the yellow background.