My Role
As design lead of the w3 Homepage project, I took on the task of creating a dark theme for the homepage and across all other related internal sites.
The Challenge
After the initial launch of the w3 Homepage (IBM’s internal homepage), many requests came in from users requesting a dark theme.
Our users wanted this theme for accessibility purposes, working during the night hours, and color preference.
The Goals
I set out to create a new theme that both met accessibility requirements and was a visually pleasing alternative to our default light theme.
I took all of our user feedback into consideration. The colors used also had to be included in the w3 Design System color palette.
Discovery & Process
The first step I took was to research how dark themes are used on other sites in terms of the color relationship from light to dark, color use in the background and foreground, use in hover states, and how different eye disorders affect perception of colors. I pulled examples of other sites, apps, and operating systems that successfully implemented dark mode and based my initial color discovery on those designs. I mostly adhered to the w3 Design System color palette, but found that I needed to pull in some similar outside shades for better contrast.
Once I had the initial palette, I used it to mock up different pages on our site to assign colors to each component. I used a color contrast analyzer app to make sure that all text, icons, and any foreground elements passed contrast tests against the background colors. I then created a guide that mapped the colors of each component in light mode to its dark mode counterpart.
We tested this new dark theme with users and sent it out to other teams to test with their products.
Once I had the initial palette, I used it to mock up different pages on our site to assign colors to each component. I used a color contrast analyzer app to make sure that all text, icons, and any foreground elements passed contrast tests against the background colors. I then created a guide that mapped the colors of each component in light mode to its dark mode counterpart.
We tested this new dark theme with users and sent it out to other teams to test with their products.
Outcome
We released Dark Mode as an option on the w3 Homepage with about ~30% of users opting to switch to the theme. We received positive feedback overall from users and other teams who wanted to adopt the theme, which I then helped integrate into their sites. I worked with the design system team during their redesign, and I created a dark version for every component. Dark Mode was then included in an updated release of the w3 Design System for all sites to use.
Note: Images and text are placeholders as to not disclose any confidential internal information.