I created an onboarding Figma file to help new designers learn how to use our design system through interactive tasks.
Discovery
Background
This idea originated from research our design system team was conducting for the redesign of our design system. Conversations with various product teams laid the groundwork for a comprehensive service blueprint crafted by our team. I uncovered five takeaways by synthesizing the gathered insights and identifying key pain points. One main issue was a widespread lack of understanding and training surrounding design system principles and documentation. Despite its significance, this challenge found itself deprioritized by the team. Recognizing the importance of this problem and its potential for resolution with minimal investment, I passionately advocated for its elevation in priority. With the backing of my manager, I was able to take on this work as a side project.
Goal
After evaluating many different design systems and their onboarding processes, I determined that Figma was the best platform for our onboarding file. Given its widespread adoption among designers and its status as our primary design tool, Figma offered a seamless transition for new designers. Additionally, its interactive capabilities provided an opportunity to enhance learning retention, a concept supported by research in educational psychology. Therefore, the goal was to create an interactive Figma file aimed at educating new designers on design system principles, familiarizing them with our Figma components, guiding them in accessing documentation, and empowering them to leverage Figma more efficiently.
Design Process
Learning Objectives
The initial phase in constructing a training program was to establish clear learning objectives. I worked with another designer to thoroughly research existing design systems to gather insights and ideas. Additionally, we conducted an audit of our own system to identify any pre-existing materials. These efforts yielded an extensive list of objectives that we prioritized using a value matrix to rank all the items by value and effort. The results helped us formulate an outline for the initial version.
Draft
The training was structured to offer users ample practice examples to equip them for designing our products. I developed the content before proceeding to craft interactive scenarios aimed at reinforcing the material. These scenarios drew upon real examples from our application, providing users with practical experience in solving authentic problems and recreating entire pages. Additionally, I made the file easy to navigate by creating a tutorial on its usage and distinguishing interactive pages with a vibrant, distinctive color scheme.
The Final Product
Rise Onboarding
The training file comprised five modules, each centered around a main learning objective. These modules covered three key design system topics: design principles, components, and foundations, which progressively built upon one another. Nearly every informational slide was followed by an interactive task designed to reinforce the user's understanding of the material. Next, I included a module dedicated to utilizing auto-layout. While not specific to our design system, the topic is essential to how our application is designed and provides designers with tips to streamline their workflows. Recognizing that practice is integral to learning, the final section focused on design practice. Users are given the opportunity to recreate simple screens from our application in Figma. Furthermore, the module guides them through the process of soliciting feedback from the design system team to ensure the accuracy and pixel perfection of their recreations. While we have yet to onboard new designers using this training, upon sharing it with the team, several designers eagerly utilized it to refine and refresh their design skills.
Takeaways
The Importance of Onboarding
My primary takeaway from this project underscores the critical importance of onboarding. While we aspire to design products that are intuitively easy to use, the reality is that not everything can be self-explanatory. Joining a new company can be an overwhelming experience, and mastering the company's unique design workflows, principles, and components presents its own set of challenges. Effective training not only benefits the company by enhancing the productivity of new designers more rapidly but also serves as a conduit for new designers to connect with the design team and foster a supportive learning environment. An unexpected result from feedback was the need for better onboarding for the file itself. Therefore, I expanded the before you start section to include more details on how to duplicate, move around, and understand the file. This seemingly minor adjustment significantly enhanced the user experience and once again underscored the importance of robust onboarding processes.
