Uplift, Inc.

Design Systems • DesignOps • Product Management

Uplift, Inc., with its headquarters in Sunnyvale, CA, and additional offices in Toronto, New York, Reno, and Guadalajara, Mexico, is a leading entity in the Buy Now, Pay Later (BNPL) industry. Uplift has carved a niche for itself by specializing in offering point-of-sale loans tailored for the travel sector. Their extensive network comprises approximately 200 travel partners, featuring renowned names like United Airlines, Kayak, Southwest Airlines, and Royal Caribbean. It's worth noting that Uplift, Inc. has recently been acquired by Upgrade, Inc.

Driven by their commitment to design excellence and a desire to reduce technical and design debt, Uplift has embarked on a significant undertaking – the creation of a scalable design system from the ground up for all its digital products. In this context, my role as the Design Systems Lead takes center stage. I am tasked with establishing and overseeing the design systems team, where my responsibilities span from devising design processes to formulating strategic roadmaps and facilitating sprint events. This is all part of our comprehensive effort to ensure the success of the design system initiative throughout the entire organization.
 

Educating the Team and Securing Buy-In

For a design system to thrive, it's essential to educate key stakeholders, enabling them to fully comprehend its benefits and utilize the appropriate tools. The strategic implementation of processes across various departments necessitates the cultivation of a culture and mindset that aligns with the organization's core objectives. To achieve this, I created tailored presentations for specific audiences within the organization and presented them.

Design System Governance

When laying the groundwork for a design system, governance emerges as one of its vital pillars. It plays a pivotal role in providing clear expectations and guidelines for the team, ensuring that they can fully harness the potential of the design system. Establishing processes that comprehensively address optimization scenarios for the platform should seamlessly align with the workflows of all verticals within the organization. This harmonious alignment is key to a successful and efficient design system.

Design Audit

I conducted a thorough design audit, involving a systematic evaluation of the company's design assets, guidelines, and processes. This encompassed a meticulous review and analysis of all design files, with a focus on identifying redundancies, eliminating duplicates, and organizing elements following the atomic design methodology. The audit served as a valuable tool for identifying areas in need of improvement, streamlining design workflows, and preserving brand cohesion.

Design System Structure

Once all the essential elements are identified through the extensive design audit, a successful design system hinges on structure and collaboration. To achieve this, I initiate the creation of a FigJam board, serving as a central hub for organizing brainstorming sessions involving both designers and developers. These sessions are instrumental in identifying all components, variants, instances, and content essential for the design system. Additionally, I foster a culture of continuous improvement by encouraging the team to conduct regular Jam sessions, providing a forum for discussions aimed at refining and evolving the system's components.

Understanding the Design System Story Points

Prior to establishing the design system backlog in Jira, it is crucial to ensure that the team understands how to accurately assess the size and complexity of each task. In this regard, I have introduced key metrics and conducted training sessions to equip the team with the skills needed to effectively size their tickets. This empowers us to systematically measure the progress of each task and generate quarterly reports for management.

Design System Adoption Plan

A robust adoption plan is the cornerstone of a successful design system implementation. To ensure the proper integration of our design system, I spearheaded a collaborative adoption plan brainstorming session involving Product Managers, Design Managers, and Engineering Managers. This collective effort aimed to secure buy-in, allocate necessary resources, and achieve alignment on which product should be the initial beneficiary of our design system adoption.

The Design System Team Backlog

With clarity on the first product for design system implementation, I took the initiative to establish the design system backlog. Here, I diligently populated Jira tickets in alignment with our created roadmap, thoughtfully prioritizing elements for design and implementation. This prioritization was based on factors such as complexity and reusability across all our products.

In addition to backlog management, I play a pivotal role in facilitating various sprint events for the design system team. These events include daily stand-ups, retrospectives, backlog refinement sessions, and Design System Office Hours. These activities are essential for maintaining collaboration, efficiency, and continuous improvement within the team.

Design System Onboarding

Training and educating designers, developers, and stakeholders in the effective utilization of Figma's design system is a vital aspect of their onboarding process. To achieve this, I've developed personalized onboarding guides for designers, engineers, and stakeholders, each meticulously tailored to their individual knowledge levels and understanding of the design system. These presentations are designed to ensure that each member comprehends the advantages and practical usage of the design system thoroughly.

Furthermore, to enhance the learning experience, I have incorporated interactive activities, providing an immersive and hands-on approach to mastering Uplift's design system. These activities promote a deeper understanding and more effective adoption of the design system's principles and best practices.
 

Accessibility

At Uplift, we are steadfast in our commitment to accessibility, ensuring that the Uplift Design System caters to a broad audience. Our platform streamlines essential tasks such as keyboard interaction, screen reader compatibility, and seamless support for both light and dark color schemes. Accessibility isn't an afterthought; it's at the core of our component design philosophy. We uphold the stringent standards set forth by WCAG 2.1 AA guidelines, ensuring not only compliance but also a holistic and inclusive user experience for individuals with diverse needs and preferences.

Foundations

Foundations, often referred to as "atoms," are the fundamental elements of our interfaces. They function as the cornerstone, shaping all aspects of our user interfaces. These foundational elements encompass crucial components like corner radius, breakpoints, colors, grids, shadows, spacing, and typography.
 

Design Tokens

Design tokens are a set of consistent, reusable variables or constants that define key elements of a design system. These tokens encompass properties like colors, typography, spacing, and other design-related attributes. Design tokens provide a structured and centralized way to maintain design consistency across various platforms and applications, making it easier to manage and update design elements consistently within an organization. They serve as a bridge between design and development, ensuring that design decisions are accurately implemented in the final product.

Additionally, design tokens enable the seamless adoption of features like light and dark modes, as well as different themes for design system elements, enhancing the adaptability of the design system.
 

Components & Patterns

Upon identifying the essential components and patterns needed for our pilot product, I meticulously prioritized and designed these elements for seamless integration by our engineering team. This meticulous preparation paves the way for their widespread adoption across our entire product range.

Furthermore, I'd like to highlight that all these components and patterns have been thoughtfully crafted to cater to both light and dark modes. Leveraging Figma's versatile variables feature, we've ensured a smooth transition between visual preferences, providing users with an adaptable and consistent experience.

In addition to our design considerations, we've chosen to adopt a single-file element structure. This decision not only eases maintenance but also mitigates potential memory concerns that a single-file UI library can encounter. It also grants us the ability to create comprehensive documentation and establish version control for each component, ensuring an organized and efficient design system.

Autolayout & Variants

When it comes to designing products and establishing a robust design system, Figma stands out as one of the most powerful tools at our disposal. To enhance the efficiency of our design processes, I've fully utilized the extensive set of features that Figma offers, including autolayout and variables. By leveraging these capabilities, our designers can create more refined products, while our developers can seamlessly access component specifications and variants, ensuring a smoother and more collaborative design-to-development workflow.
 

Storybook

We implement our design system elements within Storybook, serving as the definitive source for our developers. Within this platform, we provide comprehensive component documentation, conduct accessibility testing, outline properties, and showcase theme-switching features. This ensures that everyone has access to live components and a clear understanding of their behavior in action.

Design Audit and QA

In each sprint, I perform a meticulous design audit of all work generated by our team, comprising four product designers. This process is crucial in guaranteeing the consistent utilization of existing components, detecting any component overrides, pinpointing design overlaps, and upholding design coherence across the entire product.

Furthermore, we prioritize maintaining a well-organized design environment. We ensure that all files are clean, accurately labeled with components sourced from the design system, and ready for seamless handoff. This is efficiently managed through Figma's section status function.

For a clear before-and-after perspective, you can observe below the transformation of the product both before and after the implementation of the design system. You'll notice that the design adhering to the design system is characterized by a grid structure, scalability, and enhanced accessibility, all contributing to a more refined and cohesive user experience.
 

User testing

At Uplift, user-centricity is a foundational aspect of our approach. We consistently prioritize the user's perspective in every decision we make. That's why we regularly engage in user testing to obtain insights directly from our end users, letting their preferences guide our choices, rather than relying on our own assumptions.

This approach enables us to unearth the issues, frustrations, doubts, needs, and desires of our users. Armed with this invaluable information, we can develop high-impact design decisions to enhance web and app usability, boost conversion rates, and drive revenue growth.

Design Jam

Collaboration is paramount within the design system team to ensure its widespread adoption and the recognition of its value. I facilitate regular design jam sessions to provide a platform for designers, engineers, and product managers to sync up and have their perspectives taken into account prior to component design. This practice not only fosters alignment but also heightens awareness regarding how a component's design will be influenced by the functionality we collectively discuss, ensuring that everyone is well-informed and on the same page.
 

Communicating Updates and Changes

Effective communication plays a crucial role in keeping team members informed about updates and the current status of our design elements. To facilitate this, I consistently share updates with the team via Slack and provide a link to the Changelog on Confluence for detailed information on changes. Simultaneously, I meticulously maintain the status of design elements, offering stakeholders clear visibility into the readiness and accessibility of the design system components they require.

Furthermore, I host the bi-weekly Design System Office Hours every Tuesday afternoon. This session serves as a platform to discuss and showcase the latest components under design, fostering a broader understanding of design systems and addressing specific queries.

This proactive communication strategy ensures that both stakeholders and the engineering team are well-informed about any changes and updates in the design system. By maintaining alignment with diverse team expectations, it facilitates a shared understanding and a seamless transition during the implementation of design system updates.

In conclusion, the establishment and maintenance of design systems are multifaceted undertakings that encompass more than just the development of a UI library. They necessitate a comprehensive strategy, detailed planning, clear and consistent communication, and effective collaboration across various teams and departments.

Design systems are indispensable assets for any organization seeking to deliver a cohesive and harmonious user experience across all its products and services. They serve as the backbone that ensures brand consistency, enhances efficiency in design and development processes, and ultimately fosters user trust and satisfaction.

I trust that this portfolio piece has not only shed light on my daily responsibilities but also provided valuable insights and practical guidance for those who may be navigating the complex landscape of designing, facilitating, and managing their own design systems and strategies. Building and maintaining a successful design system is a complex journey, and I hope this content has clarified the path for those undertaking this important mission.