This showcases one of my many skills - leading successful instructional sessions. Although I work as a UX/UI Designer now, I was originally trained as an elementary school teacher, and I still utilize those skills today.
When I first joined General Motors, a colleague showed me how to update items in the design system so I could help out. It took some effort to set everything up on my computer and required a bit of practice on my part. Before long, I became proficient in using git commands with Microsoft Visual Studio Code for all tasks related to the design system - updating visual specifications, expanding the content strategy section, and incorporating new brands into various component sections.
Problem
Only three of us could update the design system for quite a while. When we got more employees added to our group, it was great except no one knew anything about git or using Visual Studio Code. However, it became a large amount of items to update the design system every week and we realized it would be beneficial to spread out the work among more people. They just had to be taught how like I was!
Unfortunately, my two original coworkers were always busy and had very little time to show my colleagues how to do this. I saw an opportunity and volunteered my expertise.
My Role
This was a familiar role for me. I started my life as a teacher, then I returned to school and became a UX/UI designer. Now I was taking on the role of a teacher again for my designer colleagues, and I was pretty excited about this. I love using both parts of my training to accomplish great things!
I decided to lay out a series of lessons, much like lesson plans from when I was a teacher. It was to be step by step and make them easier to digest instead of having a ton of information thrown at them all at once. My goal was to instruct and make my lessons easy to recall, and encourage people to ask questions so I could help them in any way I could.
Before accessing the instructor part of my brain, the designer side had to ensure we had a good color palette to start with. Accessibility is the key and I wanted everyone to find these lessons both useful and accessible.
My favorite tool to use is a GitHub webpage that shows the acceptable contrast between various colors. Most websites just show the contrast between two colors, but this particular site takes all the colors involved and shows which ones will work and which won't. It's very easy to reference and I use it whenever I'm starting on a new design project, whether it's a logo or an entire website!
As I began mapping out the instruction series, an important thing occurred to me: When I was trained on how to do this, I was only taught the three steps: What to download, how to clone the repository, and how to update the design system. I was never taught why or what is happening or how - no background information. I learned that for myself later on, just out of curiosity. I saw this as a golden opportunity to start by including this in my lesson plans.
I also made sure to include possible problems and solutions to common things that might occur with cloning and updating the design systems. It was also good to let people know that they are not alone and to ask questions!
Since we were already using Figma for other design projects, I also saw it as a great tool for making a series of instructional slides. It was both useful and familiar to everyone!
One of my favorite parts of the background information section is using a visual step-by-step approach to what's happening with git commands when you update the design system.
I had the great opportunity to present these slides to the entire group on a large screen in one of the meeting rooms, which worked out perfectly - I wanted to go through the slides myself and be able to explain certain aspects a little bit more in depth.
I reserved a meeting room for two weekly meetings for a total of 6 sessions.
Week 1 - Part One: Explain all the parts and what is happening.
Week 2 - Part Two: Downloading all the correct files and cloning the repository. Answer questions and address roadblockers as needed.
Week 3 - Part Three: Instructor demonstrating how to use git commands in Microsoft Visual Studio Code, revisiting the slide series from Part One.
Week 4 - Colleagues observe as I go through a series of specs updates using git commands; explaining each step thoroughly at first, then asking "What comes next?" and letting them guide me a little bit.
Week 5 & 6 - Give them control and have them do some simple specs updates, reviewing the git commands again. Answer questions and address roadblockers as needed.
After three weeks of instruction and practice, we doubled our group from three to six who were knowledgeable about using git commands with Microsoft Visual Studio Code. We noticed, after a few weeks, the amount of work for updating the design system went from almost unattainable to completely manageable. The more practice my coworkers got with real-life updating issues, plus with the three of us welcoming any questions that were thrown out way, the better and faster they became!
I also made a couple of Word documents that were uploaded into the Microsoft Teams for easy access to everyone. The first was an easy step-by-step guide to updating specs in the design system, plus had a few "What if" common questions answered when things are not working.
I also made an always evolving document that had a list of components' names that were always being updated and then had a list of "alternative names" that brand designers might call them instead. For example, the component might be titled "Accordion" but the brand designer sending the updates calls them "Drop Down Menu". That way, it gives the people in charge of updating the design system the ability to look up this information on their own and give them their own power.