Company
Mineral, Inc (Now Mitratech)
Role
Product Design Lead
Skillsets
Weighing legacy verses new design styles.
Managing a Figma Library with flexible and strong components.
Design System implementation.
Working across cross-functional teams.
Introduction
Project Overview
The Mineral Platform is a web-based product designed to simplify HR and employee benefits compliance, allowing users to focus on what they do best–running their business. It is a product that is customizable to a client's brand, or fully integrated into a partner's platform.
During my time at Mineral, I managed the Quartz Design System and its corresponding Figma Library. As the sole Product Designer for much of this period, I collaborated with multiple project managers across various platform features. Recognizing the growing scope of responsibilities, I eventually advocated for hiring a contract designer to support ongoing design initiatives.
Key Contributions
1. Standardization of Components
Challenge: Working with a design ecosystem with inconsistent UI elements and flows.
Approach: Conducted an ongoing audit (using a FigJam Board) of product components, identifying discrepancies and overlaps. Prioritized component designs and worked with product managers to get them into production.
Result: Established a reliable process to implement a cohesive UI and design system.
2. Documentation of Interaction States
Created comprehensive documentation outlining interaction and design states for new components.
Ensured seamless collaboration between designers and engineers by aligning design intentions with technical constraints.
3. Atomic Design Methodologies
Implemented general Atomic Design principles to structure and maintain the Quartz Design System.
Decomposed complex interfaces into smaller, reusable elements, ensuring scalability and flexibility.
4. Typography and Color Rebuild
Standardized the typography and color variables to align with (new 2023) brand guidelines and accessibility standards.
5. Collaboration with Engineers
Partnered with engineers to negotiate and reconcile new designs with legacy implementations. Established processes to address constraints without compromising user experience.
Above: Figma screen for elevations.
Challenges
1. Legacy Systems and Styles
Navigated inconsistent legacy UI elements, flows, and outdated brand representations.
Overcame the lack of initial design standards and front-end support.
2. Resource Constraints
Balanced multiple high-priority projects with limited time and resources.
3. Low Prioritization of Mobile-First Design
Addressed the absence of mobile-first considerations in the platform design.
Initiated conversations to prioritize mobile design standards for future releases.
Above: This is a Figma screen for a the initiative to standardize the modal component. On the left, each page title was reference of the .js component as given to me by the engineer I partnered with.
Success Story: Standardize the Modal Component
The Mineral Platform utilized hundreds of modals for various functions, including:
🏁 Status awareness
🛑 Confirmation of impactful choices
🔍 Advanced search
🛟 User awareness and interactions
Process
Audit: Partnered with a front-end engineer to identify and catalog all modal types across the platform.
Created a detailed spreadsheet categorizing modals by purpose and design.
Standardization: Polished inconsistencies and established consistent design standards for modals.
Implementation: Collaborated with engineers to apply the new standards across the platform.
Impact
Reduced UI friction and enhanced the user experience.
Introduced reusable design patterns for modals, ensuring scalability for future releases.
Modal Update Examples:
Above: Modal to alert an administrative user they are entering a mode of impersonating another company profile view of the platform.
Above: A customizable welcome modal displayed within a partner platform. The platform allowed colors to align with a partner's branding. On the left, annotations provided by Intuit's product team highlight areas for improvement. This example demonstrates the opportunity for impactful updates through addressing low-hanging-fruit design inconsistencies.
Above: A complex modal component composed of multiple elements, including a search input, pagination controls, table design, and interactive select/hover states with buttons.
Key Takeaways
Managing the Quartz Design System provided valuable experience in creating scalable, consistent design solutions within resource-constrained environments.
In my role, I recognized that not everything could be accomplished at once. I focused on strategically advocating for change as new projects arose and establishing processes to align the design system with the platform's current implementation.
The success of the modal redesign highlighted the importance of cross-functional collaboration and a systematic approach to design updates.
For the majority of my time as a Product Designer at Mineral, I was a team of one. Despite being the sole designer, I worked diligently to meet the demands by leveraging Figma's extensive capabilities to create and maintain a robust library of design language.