Interning on the Design Systems Team at Gusto

Uncovering the significance behind systems thinking

I first discovered design systems while interning as a front-end developer in 2017. At the time, I had no idea what a design system was and the value it could provide. It’s now 2021 and I just finished an internship on the design systems team at Gusto. In the past 10 weeks, I’ve learned about systems thinking, designed and documented a component for Gusto’s design system, and uncovered exciting opportunities to collaborate with teams across the product design organization. It was challenging, rewarding, and an experience I’ll look back on as I advance in my career.

Coming out of a design bootcamp, I really wanted to focus on design systems. However, I quickly discovered there wasn’t a clear path to do so. To learn more about design systems, I reached out to design system designers on Twitter, observed their work, and listened to podcasts. One of the most important things I learned was that design system designers are great at thinking in systems, a concept young designers, including myself, are not often exposed to.

Interning on Gusto’s design systems team was a chance for me to start developing a systems thinking skill set. My hope in writing this article is to share how that experience was and what it was like to dive into design systems work. I hope by the end, I’ve encouraged young designers to pursue design systems as an avenue for standing out in a quickly growing industry.

Systems Thinking

What does systems thinking mean to us at Gusto? After discussing with my team, I determined that systems thinking is about:

• Increasing efficiency
• Thinking holistically
• Helping people work better together
• Maintaining and building relationships
• Asking a lot of questions

Identifying these attributes early on helped me figure out how to approach my internship and later informed my project work.

Setting Onboarding Intentions

What you do during the first few weeks will set you up for success. From a design systems perspective, it was imperative that I took the time to understand the product. Some of the questions I asked myself were:

• Why does Gusto exist?
• Who does Gusto serve?

To help interns learn the product, the onboarding team at Gusto created a worksheet with various tasks. When going through these tasks, I took note of the flow, how I arrived at my destination, what felt easy, and what seemed puzzling. Although this helped guide my learning, understanding the product wasn’t easy. In fact, I’m still trying to figure out all the intricacies!

Quick tip: It’s okay to focus on learning one part of the product at a time. Pace yourself, take breaks, and ask for help! As I transitioned into project work, it was hard to find time to demo the product. In hindsight, I should have been more intentional about blocking off time to do so. Even if it’s just 30 minutes at the start of your day, this adds up.

Getting Acquainted with the Team

My next step was to get up to speed on the design systems team mission and rituals. By understanding the impact of our work on the larger product design organization, I could determine how to integrate myself. Similarly to learning the product, this was a bit overwhelming.

Here’s some advice:

• Actively listen and don’t be discouraged if you aren’t able to contribute to conversations early on.
• Put on your systems thinking cap by asking a lot of questions!
• Study team docs.
• Shadow teammates by participating in pairing sessions.
• Share your input on team processes.
• Schedule conversations with teammates.

There’s a lot to think about but in time, you’ll become more comfortable around your team and start learning how you can make an impact as an intern.

Building Relationships & Creating Alliances

The design systems team is in a unique position. We promote design cohesion throughout Gusto’s products and advocate for standardization. As a design systems designer, it’s beneficial to have a community-oriented mindset and exhibit a curiosity for other teams and people. That’s why one of the first things I prioritized at the beginning (and throughout) my internship was building relationships. Scheduling conversations with cross-functional partners helped me acquire systems thinking skills, build trust, and opened doors for collaboration. They also helped me integrate myself into the product design organization, especially in a remote working environment. Remember to be an engaged listener during these conversations.

I used these questions to structure my meetings:

• How can design systems help support you?
• What are your specific needs as it pertains to design system tools?
• What’s your typical workflow?
• What’s your perspective on Gusto’s design system site and our design system in Figma?
• How do you collaborate with design? (a question I asked engineers)

After identifying opportunities for collaboration, I got input from my team and then followed-up afterwards with whomever I chatted with. This helps people feel included and valued.

Mentor Relationship

At Gusto, product design interns are assigned a mentor to work with throughout our 10 weeks. This was one of the best parts of the internship. It really helps to have someone to go to with questions, to bounce ideas off, and who knows what opportunities to take advantage of.

How can you make the most of your mentor/mentee relationship?

• Maintain a record of how things are going: This is not only useful to your personal and professional development, but it will help you recollect things you did throughout the internship. Documenting your work on a specified cadence throughout your career is something beneficial to get into the habit of doing.
• Identify 3–5 goals: Something I learned from my People Empowerer/PE (these are what managers are called at Gusto) was to be specific with my goals in order to help others create opportunities for me. Align your goals with what you want to work on, advocate for projects that interest you, and create an action plan for working toward your goals by identifying what you need to participate in.
• At the end of each week, do a retro: I shared my retros with my mentor so we could have open discussions about my performance.

For reference, here’s the retro template I used:

1. What went well?
2. What could have gone better?
3. What did I learn?
4. Updates on key projects/workstreams
5. Help needed/feedback for me

Project: Re-imagining Gusto’s Tabs Component

As I started to think about project work, my options were open. I thought about what would align with my interests as a designer and what would amplify impact across the business. After talking with my mentor, we decided that re-imagining the tabs component would be an end-to-end project all the way from working in Figma to writing documentation for our design system site. Tabs were a good component choice because they’re a common form of navigation used across the product. They were due for responsive behavior and accessibility updates — two things that would result in a better user experience for our customers.

Solving for responsive behavior and accessibility

Figma Proposal Process

On the design systems team, we have a dedicated component proposal template in Figma that follows the Gusto product development process.

Component proposal template

When building a new component, it’s imperative to think systematically. My team encouraged me to approach the process from this lens:

• Do tabs currently exist in the product? If so, how/where are they being used?
• How do tabs currently behave? Are they meeting the needs of the product?
• What should tabs have based on the use cases of the product?

Formulating answers to these questions helped me understand the problem I was trying to solve while clarifying the design and business goals. My next two steps were to conduct a UI audit and dive into design explorations. As with any design process, there was a lot of iterating in Figma. Reviewing concepts and explorations with the design systems team was critical too.

Pairing Sessions

Throughout this process, I worked closely with design system designers as well as design system engineers. Pairing with engineers helped me to understand what was feasible in code as well as define parameters and interaction expectations for tabs. Since accessible and inclusive design is a top priority for the Gusto design systems team, we had many conversations about the impact design decisions had on all users.

Working effectively with engineers comes with practice, but here are some tips to get you started:

• Involve engineers early and often and bring them into the design process.
• Be responsive and open to feedback.
• Always clarify your design intentions.

Additionally, pairing with another design systems designer helped me to further think about things in systems. In our conversations, we discussed:

• Edge cases and constraints
• The ins and outs of how tabs work
• Ideas and pain points from the greater design team
• Component setup, efficiency, and ease-of-use in Figma

One thing I know for sure is that being a design systems designer encourages you to think. It’s part of why this work is so challenging.

Writing Documentation and Guidelines

Once the Figma proposal wrapped up, it was time to switch gears into writing documentation for the tabs component. At Gusto, documentation helps designers confidently use components. It exists to guide designers, rather than limit them.

This was my first experience writing documentation and although it was difficult, it forced me to think in a different way. It was important to pair with my team to nail down the purpose of each section in the documentation.

Here are some things we include when documenting components:

• Usage guidelines: Clarifies when to use a component over another, why to use it, what problem it solves, and for whom.
• Anatomy: Breaks down the various pieces of a component.

Tabs anatomy

• Writing: Helps designers understand how to write a component. We work closely with UX Writing here.
• Accessibility: Communicates component keyboard interactions.
• Do and don’t examples: Helps guide designers down the right path when using a component.

Overall, when working on projects, it’s critical to be vocal, transparent, and work in the open. To do this, I attended design critiques to practice explaining my design rationale, shared my work in Slack channels, and even experimented with FigJam to gather feedback asynchronously.

That’s a Wrap!

By now, I hope you’ve gotten a glimpse of what it was like to dive into design systems work. In the larger design community, we often see the shiny parts of design systems but there is a lot more that goes unnoticed.

Working in design systems has taught me that design is so much more than how something looks. It’s also about all the moving parts, how they’re connected, and the value they provide. I still have quite a bit to learn about systems thinking, but I’m glad I got the opportunity to work on a team that values it.

Now that I’ve finished my internship, the best advice I can share is to make work fun. Be creative, put yourself out there, and prioritize your growth.

Thanks, Gusto!