TALNT Lightmode
TALNT is an executive search start up which tracks executive level job moves, providing business insights, information and analytic data to its users. After reaching MVP the next goal for our MMP stage was to increase user growth and user retention. So we decided to enhance the products user experience by redesigning the products outdated light mode, using this redesign as an opportunity to modernise the UI of the platform, solve design debts and improve the functionality of TALNT. This case study examines the process and outcomes of integrating light mode.
MY ROLE
UX/UI research, prototyping, UI design
THE TEAM
1 Product Designer (Me), 1 Product Manager, 1 Technical Lead, 1+ Engineer, 1 Tester.
TIMELINE
Jun 2024 - Jul 2024
TOOLS
Figma, Confluence, Pendo, Microsoft Clarity
The challenge
TALNT was originally designed with a focus on dark mode. However, data revealed that users 20% of our users switched to light mode up 6.1% from the previous year indicating it's popularity. Focus groups and feedback made us recognise the need for an update, we faced the challenge of creating a visually appealing and functional light mode that maintained readability and user comfort. This update also included implementing a new style guide and establishing updated design standards to solve design debts.
Goals
The primary objectives were to:
1. Increase user satisfaction and engagement on the platform aiming to increase the account adoption by 10%.
2. Maintain usability and accessibility across different lighting conditions.
3. Increase adherence to the updated style guide.
My impact
I led the initiative to redesign the light mode for our platform by conducting thorough research, which included user feedback and revising accessibility standards. I collaborated closely with developers to implement the new design seamlessly, using standardised design principles to ensure consistency and quality. My efforts culminated in the creation of a comprehensive new light mode style guide and the redesign of several pages, which not only enhanced the visual appeal but also significantly improved usability and accessibility.
Identifying current design system challenges
While evaluating our design team’s workflow, I identified a considerable amount of design debt; our Figma component library had diverged from the actual production implementation. This situation emerged because as designers we aim to craft optimal user experiences. However, even with feedback sessions involving developers to address complexity and project scope, our product occasionally veered away from the design system. This deviation led to accumulating design debt, which in turn slowed down development processes, created bottlenecks, and increased the overall workload.
Challenge 1: An unclear colour library
Our colour library was not aligned with what was used in production. Occasionally, we used hex codes directly, leaving developers to find the corresponding variables in the codebase.
Challenge 2: Our design system didn’t match production
Our design system included components and patterns that the design team wanted to implement, but these were not yet in production. This misalignment caused challenges for our development teams, as refactoring components introduced added risk and could complicate QA processes. The components in production didn't always match the expected behaviour, which made testing difficult.
Like many rapidly growing companies with a lean design team, we lacked the time and budget to consistently update our design system. Despite these constraints, the outdated design system became a bottleneck, hindering our development teams' ability to deliver updates quickly.
Team exercise
Although the issues in our design system were clear, the real challenge was finding the time to address them retroactively. Despite this, we recognised that it was essential to tackle these problems promptly to make way for the introduction of dark mode. Here’s how our team approached and resolved the issue.
We evaluated the colour library
The first thing we did was evaluate the colour library. We checked the existing colours against the design system and production to find any mismatches. This review helped us spot inconsistencies and ensure that the colour's used in our designs matched the standards we wanted to follow. By doing this, we aimed to fix any issues and make sure our colour system was consistent and reliable.
We started looking at the code
We started by diving into the code repository. This gave us a clear view of the issues the engineering team was facing and how design inconsistencies were impacting their work. By examining the code directly, we could pinpoint problems and better align the design system with production needs.
Collaborated with the devs
We worked closely with the developers to tackle design system issues. This collaboration helped us understand their challenges and find practical solutions, ensuring our updates were both feasible and effective.
Solution
Our initial design systems had been outsourced to a design agency which hadn't properly implemented a consistent system we could scale or clearly followed any principles we could replicate as we added more components and features. Our solution for this was simple implement two known design principles:
1. Less saturated colour
2. Higher elevation, lighter surface
Less saturated colour
Our initial design systems had been outsourced to a design agency which hadn't properly implemented a consistent system we could scale or clearly followed any principles we could replicate as we added more components and features. Our solution for this was simple implement two known design principles
Higher elevation, lighter surface
Higher elevation and light surfaces improved the design by enhancing visual hierarchy and making key elements stand out. This approach added depth and a modern look, while light surfaces with subtle shadows improved readability and focus, creating a more intuitive and appealing user experience.
I took this rule and applied it to TALNTS dashboard. As you can see below, the cards on our board are lighter in colour than the background, creating depth and hierarchy for the user. The design went through several iterations till the team was happy.
Iteration
Final Delivery
Final delivery
Delivering light mode was a fulfilling challenge. It required careful planning, close work with developers, and attention to design details. We updated our colour system and enhanced visual elements to create a cleaner, more modern interface. This project also helped align our design system more closely with our overall business goals. I'm proud of the work we've done and the improvements it brought to our design consistency. TALNT light mode is currently in beta and will be deployed soon.
.gif)
.gif)
Conclusion
Delivering light mode was a rewarding experience. The product now looks modern and has been well-received by beta testers. However, I still noticed minor inconsistencies between the product and Figma designs, indicating that more work is needed for standardisation. As we move forward, the success of this redesign will be measured by account adoption to light mode which is currently at 17.9% on beta, reduced support requests related to the new interface, and increased overall engagement metrics. Initial feedback is positive, I'll continue refining our design to ensure consistency and alignment with our design principles and product goals.