Date
June 2021 - June 2022
Hats Worn
Design System Creation/Curation
UX/UI Design
UX Research
Testimonials
"Matt is one of the most talented designers I've worked with. Though early in his career, Matt contributes to the team as a mid-level UX professional. I am constantly impressed by his quality of work and impact not only on our team but design at IBM. He championed/built our Figma library with senior designers and shared his work with hundreds of designers across IBM, and influenced the decision to adopt Figma IBM-wide. He's an amazing person too–everyone on the team loves working with him. Any team would be lucky to have Matt working with them!"
- Senior UX Manager @ IBM
Awards
iF Design Award - x2
European Product Design Award - x2
Webby Awards Honoree
W3 Award Silver
Indigo Design Award - x2
Stratus Award
The Brief
"Hey Intern Matt! Our design system in Sketch is slow and clunky and it's costing us a lot of time and money - rebuild it from the ground up, while also convincing IBM to switch to Figma!"
The Solution + My Role at a Glance
Over my year and a half with IBM, my main focus was creating the most dynamic and accessible design system for my team, Red Hat Marketplace (RHM). 185 components and 100K+ inserts later, we helped pioneer a great migration across IBM teams to Figma.
I was responsible for everything from researching various options to get us away from our Abstract + Sketch workflow, how to create a good design system, and learn about every nook and cranny of Figma. Besides creating design system itself, I also had to shepherd our team into Figma by hosting various workshops, as this was the first time many of the team had ever touched this new design software.
After creating a majority of components, I also created fully living and breathing screen libraries for our most frequently used pages, like the storefront and product description pages. This allowed our designers to fully customize and edit these up-to-date pages, without needing to recreate them every time.
The Research
How did we start?
Where do you even start going about rebuilding an enterprise-grade design system from the ground up?
I had no idea either, so I did a whole lot of research. I had barely even used Figma at the time of being assigned this project.
I started with making a collaborative note to hold all of my research. I explored topics like; What are best practices of using Figma as a design system? What other large companies have made the switch to Figma? How do you build dynamic and complex components in Figma?
Some of my main takeaways included:
It's worth completely rebuilding a system during a transition like this, to let us make a much more dynamic system and lean into what makes Figma special.
The best way to understand how other complex enterprise design systems are created and handle complex components is to find as many as possible and then break them apart and learn everything you can.
Use Atomic Design theory, or the idea that you iteratively design with different levels of building blocks.
The idea of constantly building on top of each other is something that I kept in mind the entire time of making building this system.
Building It
How did we make it?
Like my research told me to do, I started off with the most low level building blocks - text styles and color styles. This allowed my fellow designers to stay on the same page and stay consistent across any and all of their designs in RHM.
I then started building out the lowest level of components, like Buttons, CTAs, and Links, that I knew would be vital and a building block for any more complex components. I made sure to always keep any and every component that I made as dynamic and flexible as possible, allowing our designers to have total creative freedom in their designs without straying away from our guidelines.
Sometimes for the more complex components, sometimes I would have to draw out on a sticky note exactly how I wanted to go about designing it. Shown here is an example of my sketch for the Header component, as well as a behind the scenes of how it's built. Just within this one component are custom dropdowns, links, a CTA, multiple buttons, and the ability to toggle between our 4 main products that use this system. Like every other component, everything is fully customizable and dynamic, right down to the 8th option of a dropdown menu.
I'd also love to highlight the Accordion component, which by itself has 1221 unique variants. Again, it's fully dynamic and responsive and allowed our designers to focus on actually designing, instead of making sure that they cross reference every tiny detail.
There are so many more examples and nuances to this process, but I hope this was a good appetizer! By the end of this process there was 185 unique components, over 100,000 component inserts, and it was used by 13 unique teams.
Wrapping this up
Takeaways!
This was such an exciting and eye-opening project I was able to work on. I went from never using and barely knowing about both Design Systems and Figma, to someone that will never shut up about either of them. I came away from this project with 3 big takeaways:
Be ready to fail. You learn so much by actually doing this process, and grow so much as a designer and a thinker without realizing it. Don't be afraid about having failures, instead dive headfirst into them and use it to learn.
It's an iterative process. There's nothing wrong with looking back at some of the first things you make in a long project like this, wonder "what was I thinking" a few weeks down the line, and then revamp what you originally built.
I'm not building for myself, but for everyone else. This is a system and a project to be used by dozens of people, and it's so much more important to make sure that it feels good to them first and foremost. I asked them questions about how they used their components, did A/B testing, etc - because at the end of the day you’re trying to make their lives the easiest.
Finally, don't take my word for it! Here's two raving reviews from fellow IBMers:
"You have done an incredible job sharing the goodness of Figma and transforming how designers can work better at IBM as a whole. The design community was so excited to see how Figma works for our team and even more of them are interesting in changing how they work to adopt the best practices you’ve shown us. We are so lucky to have you." - Senior UX Manager
"Thank you SO much for all of your hard work getting our team to a more functional and efficient place. The speed at which you work is astounding, and we are so lucky to have you on our team. You are so talented, and we would not be at the same level without you!" - Senior UX Designer
The Solution
Final Solution Gallery
A beautiful collection of additional deliverables or media.
I've got a few more videos for you to take a look at, but there are so many more components that we barely scratched the surface just now. If you want to learn more, shoot me a message and I'd love to talk some more!