As a contractor, I was hired by NewMind Technologies, a company that creates neurofeedback assessment tools to take their dark-themed design system and translate it to light mode. The team was also switching over to Figma from Sketch, so while working on the light mode design system, I transferred all existing design files over to Figma.
For this project, my goal was to create a light theme for the NewMind design system and apply it to existing designs.
Role: Lead Product Designer (Contractor)
Dates: Winter/Spring 2023
The user base at Newmind had a wide level of experience with technology. Because of this, the NewMind team wanted to create a light version of their UI for those who find a light theme more natural and legible. This included updating the basic elements such as buttons and form fields, along with NewMind-specific components such as charts and other data visualization components. I also had to ensure the design system would be usable for future projects and designers.
Newmind Customers
Clinicians in
Health-Related Fields
Coaches or Wellness
Practitioners
Newmind Team Members
NewMind UX/UI Designers & Developers
The main focus of the NewMind Training app is mental wellness and allowing providers to use neurofeedback and brain training to help treat clients with mental health problems.
This project was unique because it affected both internal contractors and employees and external product users.
Users need the option to view and use app in light mode
Light mode must be accessible with high contrast and easy navigation
Design system should be easy to navigation and search for future designers & developers
Research & Discovery
Transfer Dark UI System to Figma
Create Light UI Components
Design for Accessibility
Finalize Variables & Apply Light UI
My research time was spent on looking in to existing design systems with both dark and light user interfaces and how they translated their palette from one mode to the other. I also focused on the best way to create components and variables for design system usability.
The NewMind design system, originally built in Sketch, was thoroughly built out with many connecting components and files. Along with importing all the files into Figma, I had to reorganize and create new variables and components using Figma tools. This is a tedious task and required detailed thought on how a future designer might search for and adjust components in new design files.
To create the light UI theme, I went back and forth between redesigning screens and building and organizing components. I also focused on making sure the new light mode designs both matched the existing branding, and were readable and accessible.
Throughout the process of translating all dark mode components to light, I used Figma accessibility plugins to ensure my designs followed the Web Content Accessibility Guidelines. The original design system also had a very extensive color palette that allowed me to match the already accessible dark mode color to a new light mode color. This added another layer of confidence in the accessibility of the light mode palette.
To create the light UI theme, I went back and forth between redesigning screens and building new components. I focused on making sure the new light mode designs both matched the existing branding, and were readable and accessible.
Create better navigation and smoother flows for administrators in the ThruText application.
Read the case study »In an extremely important election year, the ThruText messenger needed an overhaul of bug fixes and branding updates.
Read the case study »