summary
Building a Business Case On Higher Efficiency
While Sketch was once reigned as the undisputed primary choice for many designers, Figma has revolutionized the design and development landscape with its collaborative features and real-time editing capabilities.
My team had been using Sketch for roughly 3 years prior to my joining the team. With my previous experience in Figma, I was able to recognize the benefits Figma could bring to our team and our projects. I became a vocal advocate for making the switch to Figma in the pursuit of efficiency.
This is the story on how I gained buy-in from leadership to switch from Sketch to Figma, and reduced design time by 50%.
project overview
Upgrading Our Design System
I championed the transition from Sketch to Figma, persuading senior leadership of the transformative benefits Figma offers in terms of collaboration, efficiency, and scalability.
This encompassed the seamless migration of component libraries from Sketch to Figma, as well as the meticulous organization of numerous component libraries featuring intricate components within Figma. Additionally, I diligently documented the guiding principles, contribution processes, and provided handy usage tips for ease of reference.
problem #1
Learning About Others' Problems
As a new user to Sketch, I encountered considerable frustration while crafting complex components in Sketch, and I wasn't alone in facing these challenges. Through various conversations, it became evident that many other designers were experiencing similar difficulties.
In learning this, I proposed to my team the idea of conducting interviews to dive deeper into these frustrations, aiming to gain a comprehensive understanding of the challenges at hand. I wanted to "UX ourselves."
Everyone was excited about the possibilities this presented and were ready to be the users!
I built interview questions around the exploration of designers' workflows, their challenges, successful practices, and their aspirations for a new design system.
Through the 7 interviews I conducted, I gained valuable insights, including common pain points such as the following:
Difficulty in Icon Discovery: Designers struggle to find specific icons, due to naming conventions and categories used, often resorting to manually searching through every dropdown in the Sketch UI kit.
Constantly Breaking Components: Components were not fully developed in Sketch, leading to wasted time spent searching through dropdowns and files to locate required elements only to discover they didn't provide the flexibility needed.
Undocumented Colors: Color Styles were not trustworthy due to a lack of process around adding or maintaining new colors, adding complexity to designers' workflow and slowing down the process.
solution
Foundational Framework for High Impact
Design principles play a pivotal role in projects like this, offering a structured framework for decision-making. By aligning our choices with the goals, values, and requirements of the design system, we can approach decisions objectively rather than subjectively.
To establish robust design principles, I dedicated several days to researching existing design systems and collating valuable insights, tips, and best practices. From this research, I curated a comprehensive list of words and phrases, each linked to its significance within the context of a design system.
After thoughtful consideration and conversations with leadership, I deliberately selected the words intentional, reusable, and flexible to summarize the requirements of our library and to address the frustrations uncovered during user research.
I presented my case to our design leaders to garner their support for the transition, proposing an outline of the process and secured alignment with our overarching design objectives.
With consensus achieved for the transition to Figma, I proceeded to initiate the audit process.
problem #2
32 Shades of Gray
I started auditing all of our libraries to gather a list of components and all associated development documentation. I noticed an issue with our colors that was leading to the undocumented color issue. The color palette didn't feel intentional, nor align with the design principles I set forth at the beginning of the project.
There was an overwhelming assortment of gray shades currently in use, 32 to be exact. This diversity caused confusion and inefficiency among designers and developers alike.
I meticulously mapped out each hex code and its corresponding usage across our displays to assess our current color palette. This thorough analysis enabled me to visually identify which colors were predominantly utilized, detect any overlaps between colors, and pinpoint hues that didn't align cohesively with our palette.
solution
Google Dark Theme Color Properties to the Rescue
Building upon my research, I explored various strategies to harmonize our existing color palette. While starting from scratch might have been preferable, all colors have already been integrated into our codebase and this approach would add too much time and complexity to alter at this time.
The challenge was compounded by the fact that we have multiple development teams utilizing disparate semantic color palettes. Any alterations could potentially impact multiple codebases.
To address this color issue, I familiarized myself with Google's dark theme color properties, particularly focusing on surface levels. Implementing this knowledge, I worked and reworked our palette at least a dozen times until I was pleased with the result and had a concrete idea to share.
This process hinges on the base color of your lowest surface level. Once identified, I created multiple squares of the same color on top of the base, and added a different opacity level to each square. Then I used the eyedropper tool to extract the color at 100% opacity from each shape, serving as my starting point.
I applied this strategy specifically to our grays, determining which shades harmonized best together. By considering undertones and the prevalence of one color over another, I made informed decisions to refine our palette.
The result was a color palette halved from its original size. I put together a presentation, invited stakeholders, and shared my proposed list of colors.
The response was fantastic—there was heaps of praise and not a hint of pushback. I managed to win over everyone by showing how reducing our use of grays could speed up decision making for our designers, and it only required minimal changes in our codebase.
problem #3
Facing the Inconsistent Design Language Head to Head in User Testing
With a solid color framework in place and the completion of the auditing process, I proceeded to craft the first draft of two of our major libraries in Figma and prepared it for testing.
Guided by our design principles; intentional, reusable, and flexible, I created a variety of atomic components, enough to construct a few full layouts, each with customizable properties.
Collaborating with one of our UX Researchers, we devised a usability test tailored specifically to our participants, our designers. One of our primary objectives was to validate or invalidate my hypothesis regarding the efficiency gains achievable in Figma compared to Sketch.
To achieve this usability test, we decided to pit Sketch against Figma head to head. I devised three tasks in Sketch and replicated them in Figma with slightly different scenarios. We tested 6 of the same 7 designers I initially interviewed over a 2 day period.
During the usability testing sessions, we meticulously recorded the time taken to complete each task, gathered user feedback on difficulty ratings, and conducted System Usability Scale (SUS) evaluations to gauge overall satisfaction.
Solution
Clear Components, Easy Decisions
I utilized Figma's robust tools to meticulously organize our components within the design system, ensuring both coherence and flexibility. My goal was to make it so easy, so intuitive that designers wouldn't have to think, just like Steve Krug suggests in his book, "Don't Make Me Think."
By employing intuitive categorization and effortless navigation, I helped minimize cognitive load. By layering components into templates and layouts, and using Figma's robust properties feature, I was able to bring consistency to the forefront, and I was ready to share this with participants in testing.
This initiative resulted in a remarkable reduction of task completion time by half for our designers, while simultaneously skyrocketing our SUS scores.
Through meticulous research and analysis, we gained valuable insights into the unique challenges and requirements of our design system. By aligning our design decisions with these insights and the overarching design principles, I was able to craft a solution that is both purposeful and adaptable, and drive buy-in from leadership as well.
results
A Strong Foundation for Scalability
"Once the transition is made...I can’t imagine opening up Sketch again."
"Certainly a lot more intuitive than working on our stuff in Sketch, hands down."
"I think just about everything in Figma I can do easier [than Sketch]."
Designers felt so strongly after this round of user testing, it's exciting to imagine how they'll all feel once the libraries are fully released. The research I conducted to develop a new design system has been instrumental in shaping a comprehensive and effective solution.
Guided by design principles, I created the foundation for a design system that not only addresses our immediate design needs but also sets a strong foundation for future growth and scalability.
What's Next?
Lessons Learned and Next Steps
These enhancements collectively contribute to a smoother, more cohesive design process, allowing us to deliver high-quality results more rapidly. As we continue to iterate and refine our design system, we remain committed to identifying and implementing these valuable time-saving measures, ensuring our team can operate at peak efficiency and creativity.
With buy-in secured and the necessary design resources in place to finalize the libraries, my current focus is on developing an onboarding program to train our designers in Figma.
Integrating intuitive documentation and quick-reference guides into the design system will empower team members to find answers and resources swiftly, fostering a more self-sufficient and productive environment.