Color: Accessibility, Dark Mode, and Tokenization
I was heavily involved in projects relating to color. This included updating the site’s color palette to reflect new branding colors, a new color scheme for data visualizations, creating dark mode variables for the site, making sure these colors aligned with accessibility guidelines, and tokenizing the colors in both Figma and code libraries.
Accessibility
With creating new color palettes, accessibility is a major consideration. After the initial colors were picked out and the shades of these colors were determined, testing was done to ensure that they passed WCAG requirements for text accessibility. The colors for font pairings were assigned to each of these shades to ensure that they were AA compliant at minimum for both normal size text (under 19px) and large sized text (over 19px). There had been some feedback about the previous colors being difficult to navigate from colorblind users, so I took this as an opportunity to test what these colors looked like for all types of colorblindness. This was especially important for the data visualization palette and any semantic colors, as red and green were among the colors used to represent severity. Unfortunately, this work was deprioritized and I had limited time to continue the research I was doing into further work for accessibility within the platform.
Dark Mode
A huge push for the platform as the UX team was working on a redesign was to include dark mode as an option for users. To do this, new color palettes had to be created that had a higher contrast with much darker background elements. Semantic colors and the data visualization color palette had to be altered to maintain contrast. Colors associated with interactive elements were also adjusted to make sure they were still usable and as intuitive to users as their light mode counterparts.
Tokenization
Since there were now two separate sets of colors, one palette for light mode and one for dark mode, tokenization was very important. I worked with engineering to make sure that these tokens were aligned both in Figma and in the code library. This included coordinating token names, tracking which tokens were applied to each component, and handing off tokens to engineering when a new component was built. I also kept a changelog to note which tokens were changed if an unexpected issue was found during production, and which tokens had specific “rules” for use.
Iconography
I created and maintained an icon library for the site. Initially, I worked on creating new icons for the left navigation but due to time and resource constraints, this was changed to using icons from an open source catalog. This change allowed me to replace icons on all pages of the site to have a uniform look (previously, icons were pulled from various resources and there was no consistency between style, weight, size, etc). Being in charge of this icon library streamlined developer handoff, as all icons were sorted and labeled according to page and component associated.
Data Organization
A large portion of the projects I was assigned were related to data visualizations. Many of the existing visualizations attempted to show a large amount of data, but due to the volume of content, a lot of the information was hidden from users. I approached these issues by meeting with data analysts to find out how the data was being sourced and what data was actually relevant for users. This helped me to determine the hierarchy of data when applicable and also helped to decide whether some data could be omitted. From there, I looked into whether the data was visually represented in the best way by doing research into the types of charts and graphs similar data was typically put into. Though this process was straightforward, it made a huge difference in the usability of the platform.
Collaboration
Contract Designers
Contract designers were hired for a time to speed up the redesign effort we were working on. I worked primarily on adjusting designs they had created to work with the existing UX, as the designs being handed off to me were either mostly UI changes or had concepts that were out of scope with the amount of engineering resources available at that time. This included getting feedback from both the internal UX team and the team of contract designers.
Partner Companies
I worked closely with a designer from a partner company to align branding and UI between the two sites. This allowed for a seamless transition for users who had access to both. For this collaboration, I created and updated a file for the partner company to access finished components from the UI kit, as well as typography styles and color tokens. I met with this other designer on a semi-regular basis to check in and share any updates from either side.
Internal Teams
As a UX designer, I primarily worked with the UX team, the overall product team, customer success managers, data analysts, and engineering teams. The handoff process between various teams was changed throughout my employment, but I was able to consistently establish an effective line of communication and delivery of UX files within each of these changes. Within my own team, there was a lot of collaboration, whether this was scheduled feedback, being paired up for projects, or impromptu design sessions.
UI Kit and Component Library
I worked on creating new components for the UI kit. This included documentation of the components, implementing them into other design files, handoff to engineering, and desk checking with the QA team. Because my team was working to redesign the platform for all business units, this was a big effort. Many components were initially proposed but had to be changed due to frequent requirement changes, and a lot of pages were affected by this. Proper documentation of components was critical to ensure correct implementation.
Specific Projects
Page Metrics and Header Redesign
The requirements for this project weren’t super specific- the key issue that needed to be solved was that the current data visualization on the page needed a higher emphasis, as it was representing a valuable piece of information for clients. I took this as a time to turn this data visualization into one that made it clearer to users what it was showing them. I also wanted to provide users with a more streamlined process when arriving to this page, so I took this as an opportunity to simplify the header section as well. The solution that I came up with was to reduce the amount of data being shared at the top of the page, which was accomplished by doing discovery to determine which metrics/details were the most important and useful to users. I came up with a new way to display these key details and included the improved data visualization within this header. This new header section would be reused on similar pages and to avoid being repetitive with data, I created a condensed version as well. This also saved a large amount of vertical space, which was important since these pages were very content heavy, and allowing for more real estate was valuable.
Unfortunately, I do not have any concrete statistics on how this project impacted users. Internal feedback from client-facing employees was positive, and though there is no official analytics to back this up, this was a very well-received change for users.
User Management Capability
As the platform continued to grow, there was a need to add more features. One of these features that I was in charge of creating designs for was adding role-based access for users. This is something that was requested by users, as it would have a positive impact on their experience with the platform. I approached this project by discussing requirements with a project manager, a customer success manager, and data analysts. After brainstorming a flow for this, I created initial wireframes to get feedback on. I then took that feedback to make updates to the process that I had created before finalizing the design to hand off to engineers. This project resulted in adding an “admin mode”, which allowed users with administrative permissions to add and edit roles, assign roles to users, and add/remove/edit users. This was an important update to the platform, as adding user management enhanced security by minimizing unnecessary access and ensured that users would only have access to the features they needed for their roles.
Initial Redesign Concept
One of the first projects I worked on was to come up with a concept for a redesign of the client-facing portal. I spent a few weeks working on this, and it was shown to higher management. My main focus for this was to modernize and refresh the UI of the platform, while also coming up with solutions to some of the biggest pain points users were facing when interacting with the content. Those pain points were primarily addressed by visualizing the data in more simplified charts or graphs, reducing the amount of data when possible, and adding key metric callouts so that users could be informed at a glance of what mattered most. This effort resulted in my team gaining the official approval needed to begin redesigning the platform.
