The Challenge
After the initial launch of the new w3 Homepage (IBM’s intranet),many requests came in from users requesting a dark theme.
One of our top requests from users was to include a dark option. Our users requested this theme for accessibility purposes, working during the night hours to reduce eye strain, or general color preference. Our 350K+ users span the globe and have different abilities and working hours that needed to be taken into consideration.
My role
As design lead of the IBM Intranet redesign, I took on the task of creating a dark theme.
I was interested in learning more about accessibility and wanted to ensure that our site was compliant and offered an experience for everyone. I worked with accessibility experts, users, developers, and the design system team to create this UI theme.
The Goals
I set out to create a new theme that both met accessibility requirements for differing vision abilities 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. The theme would be included in the design system and used across our internal ecosystem of tools.
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 and focus states, and how different eye disorders affect perception of colors. I took courses in accessible design and WCAG compliance. 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. I worked with the development team to ensure a seamless transition when toggling themes.
I 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. I worked with the development team to ensure a seamless transition when toggling themes.
I tested this new dark theme with users and sent it out to other teams to test with their products.
Business value & Outcome
30% user adoption rate
We released Dark Mode as an option on the w3 Homepage with 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 created a dark version for every new 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.