Darkmatter Theme
This project involved the development of a new theme plugin for Open MCT. Initially, we offered two themes—Espresso and Snow—which catered to dark and light mode preferences. I designed and implemented a new theme tailored for a more commercial environment, with the goal of appealing to a broader audience.
BACKGROUND.
Open MCT in Espresso Theme
Open MCT in Snow Theme
The primary use case for this design was the audience for DIY Mission Control. The users of DIY Mission Control were the general public– people with an interest in learning more about VIPER and watching real-time updates from the mission. The expected audience was very vast– just about anybody with a mobile or laptop device and access to the internet.
USE CASE.
The main challenge with designing this new theme was the particular use case. DIY Mission Control is an application that utilizes a very data-driven software (Open MCT) to portray very technical data from VIPER. So, the real challenge here was building an aesthetic that was able to entice the general public from a marketing and commercial standpoint, while still continuing to be able to portray mission data effectively and accurately.
THE CHALLENGE.
GOAL.
Implement a new theme for Open MCT such that is catered to the general public. This theme must be aesthetic and enticing for users to want to use the software, yet portray complex data in a simple fashion.
With the main goal in mind, I spent a some time looking into fake UI examples. I pulled in interfaces from sci-fi TV shows, movies, video games, and more. Fake UIs from "The Martian" were particularly interesting, as they were inspired by real NASA Mission Control centers.
While so many of these fake UIs were great examples, it is important to note that what we see in media is more for aesthetic rather than functionality. That is something I quickly realized– while at first glance a UI design from a movie like Iron Man looked incredibly cool and exciting, if you were to delve a bit deeper into the elements that actually made up the interface, the components really didn't make much sense together. This realization was particularly challenging for me, as I was designing for both– aesthetic AND functionality.
RESEARCH.
Research board for Darkmatter
During this period of research, I had a lot of interesting and new discoveries with fake UIs:
Dark Mode
A dark background with a neon foreground– such as blue/green– seemed to be a common practice.
Glowing and Gradient Elements
Glowing elements were also very common– particularly a blur around graphics and pictures. A lot of the main colors were gradients, rather than solid colors as well.
Balanced
Lastly, the most interesting fake UI examples always had a good balance between presenting data visually and with numbers.
MOOD BOARD.
Fonts
The first line of fonts come from NASA's Artemis branding. VIPER and Artemis are both lunar NASA missions– in fact, the findings from VIPER are planned to be used to help accelerate Artemis. This connection between the two missions made me wonder if we could cleverly utilize the NASA Artemis style guide and sprinkle bits of it in for the Darkmatter theme.
Colors
These are some early examples of color palettes I was brainstorming for Darkmatter. I tried different palettes– some inspired by the colors of the moon, the night sky, and a combination of both.
DESIGN.
These are two examples of layouts utilizing the Darkmatter Theme. Key features include:
1. Organized Information: To manage complex layouts, data is grouped into sublayouts, with blue highlights marking their corners for clarity.
2. Minimal Use of Gradients: I used gradients sparingly, because testing revealed they made data harder to parse.
3. Thematic Background: The Darkmatter theme features a subtle image of the lunar surface, taken during the Apollo missions, reinforcing the theme of space exploration.
For additional examples of Darkmatter designs, visit my DIY Mission Control project, which is entirely based on this theme that I fully designed and developed. There, I go into more detail about some of the unique design elements.
DEVELOPMENT.
After I completed the designs and had a strong vision for this theme, I used Javascript to create a new plugin for the theme. Additionally, I used HTML, CSS/SCSS to develop the entire theme and match them to my designs. I focused on design system creation– developing reusable components that developers could integrate easily into their codebase. This ensured for consistency and sped up future development.
TESTING.
After developing the Darkmatter theme, I collaborated with our testing and accessibility engineer to write end-to-end visual tests using the Playwright platform. Our goal was to ensure that both Darkmatter and Espresso (the theme used by NASA to fly VIPER) were fully compliant with Section 508 WCAG AA standards. As a federal mandate, Section 508 compliance is required for Open MCT technology to be used in the VIPER mission.
We developed an accessibility test suite that included tests for contrast violations, keyboard accessibility, and screen reader compatibility. My primary focus was on addressing contrast violations, ensuring that the color schemes for both Darkmatter and Espresso provided sufficient contrast to accommodate users with varying visual abilities.
Snow Theme
Espresso Theme
Darkmatter Theme
View 2
FINAL PRODUCT.
Below is a side-by-side view of two example views of Open MCT, and how they look in all 3 themes that are currently available.
Snow Theme
Espresso Theme
Darkmatter Theme
View 1
©2024 by Rukmini Bose
If you would like to check out the different themes yourself, download the Open MCT repository. In your browser's console, type in one of the following commands below.
openmct.install(openmct.plugins.DarkmatterTheme());
openmct.install(openmct.plugins.Espresso());
openmct.install(openmct.plugins.Snow());