Team
Product Experience
Design System Team
My Role
Product Design Intern
Tools Used
Figma
Duration + Year
May 31st - Jul 19th, 2023
Overview
Salesloft, the top sales engagement platform, assists businesses in cultivating meaningful customer relationships through an array of sales tools that streamline workflows and automate processes.
Collaborating with Salesloft's Design System team, I created the Cards and Panels components, getting us closer to a completed design system. The detailed variants I developed for these components crucially expedited design workflows, providing designers with ready-to-use, flexible design elements.
Highlights
Designed and integrated components into the design system, accelerating team productivity by facilitating quicker design processes.
Successfully navigated Figma complexities, enhancing my skills by creating dynamic components with variants.
Jump to Reflection
Design System Components
In collaboration with the Design System team at Salesloft, I took on the development of the 'Cards and Panels' components, two items in our backlog. This effort not only moved us closer to completing our design system but also streamlined our design process.
Through this project, I learned how to create components with variants in Figma, a new and challenging skill. With lots of research and guidance from my team, I overcame this learning curve.
Showcased here are card components with various state options.
Displayed here are panel components, showcasing distinct variants for both the panel header and footer.
The value of this project extends beyond team efficiency. It also enriches our user interface, enhancing both the usability and aesthetic appeal of our product.
Looking ahead, these components are prepped and ready for presentation in design and engineering reviews. Once approved, they will transition into development. This project, although challenging, enabled me to refine my skills in design system development and serves as a stepping stone for more complex design projects in the future.
Panel variants I created in Figma: a basic panel and panels crafted from our application, showcasing easy switching for designers.
Reflection
Reflecting on this project, I've thought about a few areas where I could have altered my approach to enhance the process:
Tackling the learning curve with Figma Components could have benefited from more upfront research, reducing the time spent on trial and error.
Maintaining detailed records of the learning and creation process could serve as a valuable guide, simplifying similar challenges in future projects.
Testimonial
“Kirstyn was a huge help to our design systems team this summer. She shipped two heavily used components with robust controls and provided input on several others. Overall, she did a great job — she was eager to learn and asked great questions. I would highly recommend Kirstyn.”
Sam Solomon
Staff Product Designer at Salesloft
Key Takeaways
Looking back, some of my key takeaways for this project include:
• Designer Efficiency Increased. My contribution to creating Figma components fast-tracked design workflows, showcasing a notable boost in efficiency.
• First-Time Experience with Design Systems. Contributing to Salesloft's Design System marked a career highlight, positively influencing both the design process and project outcome.
• Personal Growth through Learning. Despite the challenge, mastering component creation in Figma bolstered my design skills, readying me for future intricate design system engagements.
If you want more information about my work at Salesloft or have additional questions, please reach out to me at kirstyn.fagnani@gmail.com