Client Portal Dark Mode

Client Portal Dark Mode

Client Portal is a web application developed by the Allegis Group for its companies TEKsystems and Actalent, streamlines the recruitment process for both consultants and recruiters. It facilitates various activities associated with hiring professional consultants from diverse fields to serve clients across different industries on a global scale.

The Problem ⚠️

Despite 80% of users using dark mode and nearly 90% of popular software offering it, our application didn't offer this important feature. 70% of our daily users, primarily recruiters, some of whom experience eye strain due to the bright interface, have consistently requested a dark mode option. However, a prior attempt fell short of accessibility standards and wasn't easy to integrate with our branding.

The challenge lies in designing a user-friendly and accessible dark mode that seamlessly integrates with the three distinct client brands utilizing the application. This solution should prioritize accessibility compliance, brand consistency, and user comfort.

The Process ⚙️

• Researched the topic of Dark Mode, exploring different successful Design Systems and their approaches to dark mode design solutions.

• Defined the key objectives for this design solution: meet accessibility standards, seamlessly integrate with the 3 different brands' themes, and ensure easy usability.

• Generated early prototypes applying the research results, testing, and iterating to arrive at a visually appealing UI solution.

• Designed the foundation of this dark mode and implemented it consistently across all app components and features, while also documenting it.

• Integrated it into the UI Library and Documentation from our Design System.

The Solution 💡

Recognizing this challenge, my team and me introduced Dark Mode, a user-centric feature that fulfills the accessibility, usability needs, this visually appealing design enhances the app's UI and seamlessly adapts to the different brands and their themes.

I also defined the Design System foundations for this theme including Color Ramps, Elevation Levels, Design Tokens, and the respective variables and styles following Tailwind Naming conventions to easily handoff to the web development team.

My Role ✨

I led the design of a dark mode theme for the Client Portal app. This included user research, benchmarking, statistics and exploring color options. I meticulously created design tokens that could be easily integrated with our existing design system. I designed the color palettes to be flexible and work for different brands. After defining design tokens, I mentored another designer to help them apply the theme to various screens. I presented the design to business stakeholders, product owners, and the UX team, working closely with the product owner on the user research. Finally, I ensured a smooth transition for the development team by partnering with the tech lead.

Take a deeper look of the design files in the next link

Skills & Tools:
Figma, Tokens Studio, Design Systems, Research, ADA, WCAG, Design Thinking, Agile.