Dark Mode for Jamf Now

Our hackathon-winning project that went on to fulfill our most requested feature.

Spotify's Friend activity feed showing who is currently playing what music.
Rotate for a close-up.
One of the marketing assets that I created to welcome users to the new Dark Mode experience.

Overview

Jamf Now is a cloud-based SaaS mobile device management (MDM) platform, empowering small businesses that use Apple products. More than 500,000 devices are configured and managed through Jamf Now.

Our mission was to build and ship the easiest and best MDM for organizations that may not have IT experience on staff.

Every year, a hackathon is held during Jamf's internal company conference. The Jamf Now crew saw it as an opportunity to figure out the latest hotness in UI: Dark Mode. Not only can it look great, it can also help with readability and eye fatigue if done right. And it happened to be our most requested feature.

My role

As the Product Designer for Jamf Now, all user-facing workflows, features, interactions, UX roadmaps and strategies were my responsibility. I collaborated with our Product Manager and frontend engineers to bring this to life.

Goals

  1. Win the hackathon. (Spoiler: We did. 🏆 )
  2. Build a way to choose between Light Mode, Dark Mode, or detect system settings.
  3. Use Jamf Marketing's existing color palette to create a production-ready Dark Mode experience.
  4. Keep utilization low by modifying SVG path and fill colors with code.

Process

The hackathon was a one-day, eight-hour event that took place at the International Congress Centre in Katowice, Poland. I sat at a table with our Product Manager, UI Engineers, fantastic moral support, and a lot of coffee.

After the hackathon, the UI Engineer on this project and I worked to finesse, test, and ship it. For about a month, we met almost daily to review the most recent build and create refinement tickets.

Discovery

Detecting system preferences for Light or Dark mode was achievable using CSS media queries. We also worked on a Javascript-based approach to allow users to manually choose which theme Jamf Now uses.

For color implementation, I studied Apple's then-new Human Interface Guidelines on Dark Mode and scoured the web for best-practices from other designers, developers, and design systems.

Jamf Now uses illustrations throughout the app. I extensively researched and experimented with how to modify SVG markup to colorize paths and fills using calls for CSS variables. In lieu of preloading two instances of the same illustration, we only needed one instance that could change colors as the theme changed — a boon for resource utilization.

Product

We developed a system-responsive, human-override-able Dark Mode proof-of-concept that wowed the crowd when our Engineer switched macOS from Light to Dark and Jamf Now automatically changed with it. We competed against more than 15 teams, including another Dark Mode project, and won the competition by popular vote.

Spotify's Friend activity feed showing who is currently playing what music.
Rotate for a close-up.
I built a Sketch library for Dark Mode components, based on the feature set that Sketch offered at the time. It included recreated key app screens like the Devices dashboard.

Along with mockups of full key pages, I designed static mockup vignettes of key mouseover interactions to break the work out into chunks to help the Hackathon and QA teams visualize the ideal states.

Mouse cursor hovering over a card that displays a Mac Pro, the user assigned to it, and status icons.
An example notification of a billing failure due to a credit card decline.
An example of celebrating the user's Jamf Now anniversary, listing the number of years on the service and the number of devices enrolled.
A password reset notification that displays only for the current user.
Vignettes helped us focus in on key states across the platform, and double as marketing assets later on.

Our SVG images were given id tags in code so that we could change stroke, border, and fill colors using CSS. Instead of loading two separate sets of SVG code into the user's browser, we only needed to load one. CSS media queries then told the browser what colors to show based on whether the browser was in Light or Dark mode.

Wrap-up

We received a lot of praise from customers and coworkers alike. Dean Hager, Jamf's CEO, gave us praise during a company all-hands, and again during the keynote presentation at the next Jamf Nation User Conference.

Want to take it for a spin? Try using Jamf Now's Demo mode:

  1. Go to the Login screen
  2. Click Try the Demo
  3. In the bottom-left of the window, click Demo, then Account
  4. Click Profile
  5. Then scroll to Appearance
  6. Have fun!

Finding illustrations in the demo mode can be a challenge. The APNs, Auto-Enrollment, and Volume Purchasing areas in the main navigation will show you how the colors change as you toggle your system preferences.

Credits

Other Jamf Now studies