From UX Design to Coding: How This Design Professional Sharpens and Gains Technical Skills

At FireHydrant, cross-functional collaboration and an emphasis on L&D empowers team members to sharpen their skills and expand their horizons.

Written by Lucas Dean
Published on Sep. 27, 2023
Brand Studio Logo

The world of UX design is in constant flux — user expectations shift, new technologies emerge and designers must adapt swiftly to bridge the gap between developing trends and preexisting knowledge. 

To remain at the cutting edge, UX designers must continually sharpen their technical skills. These skills are like a knife — they grow duller and less effective over time without proper upkeep and refinement. 

This sharpening process has as much to do with learning new tools, techniques and trends as it does with unlearning outdated practices and recalibrating one’s approach to the industry’s evolving landscape. 

At FireHydrant, Senior Design Manager Kate Farrar has recently delved into a domain that is closely intertwined with UX design, yet generally someone else’s responsibility: coding. Armed with a deeper understanding of the engineering team’s codebase, cross-functional collaboration with the developers has opened up new possibilities and technical contributions. 

“Code serves as the canvas for what we design, so the more we know about it, the more it benefits us as designers,” said Farrar. 

Farrar detailed how she gained this newfound skill set, what resources she tapped into and why continuous learning pays dividends. 

 

Image of Kate Farrar
Kate Farrar
Senior Design Manager • FireHydrant

Thousands of engineers use FireHydrant’s comprehensive reliability platform to integrate tools and resolve incidents in Slack.

 

What technical skills — whether new or preexisting — have you acquired or sharpened in your current role?

In the last few months, I’ve gotten the opportunity to spend more time in our codebase, particularly focusing on React.js. I’ve been able to partner with my engineers and do more than just move components around or add props.

Some of the impetus around this was getting curious and wanting to learn more about how our front end works. The bigger part was the willingness of my engineers to collaborate with me and teach me new things. Previously, I would do a couple of pull requests a month to help with polish and clean up, so it’s been insightful and fun to dig in more.

 

What resources have you used to pick up new technical skills?

Our front-end team has office hours where they hang out and work together on Zoom, and I’ll join that and see if anyone wants to pair with me or troubleshoot things together. We also have a Swarm on Fridays, where we pick a focus each week and tackle something in the product as a team. Plus, FireHydrant has an annual Hack Week that provides a chance to work on different product areas and collaborate with teammates you don’t normally interact with. Having both unstructured and structured time together has really helped to foster an environment where we can learn together.

 

Having both unstructured and structured time together has really helped to foster an environment where we can learn together.”

 

While I’m actively working on a feature within a team, we have daily meetings where we demo our progress and share any blockers we have. I’ve found that even if I’m not in a place where I’m actively getting design feedback, it’s still super valuable to be in those meetings to hear about challenges that engineers are facing and provide support whenever possible. Being on a call together provides opportunities to collaborate that might have been missed otherwise.

 

How have your sharpened technical skills paid dividends at work? What skills did you flex and why were they central to your success?

In the last six months, we’ve been working on UI improvements in the product. There were a few areas that we hadn’t been able to prioritize, but we had a pretty good idea of what improvements we wanted to make. Myself and two engineers jumped into the code together to see what we could accomplish in a short amount of time. We were able to move way faster than if we had started in Figma first and then implemented the designs. This often consisted of me getting as far along in the code as I could and then pairing with one of my engineers to get things functional and production-ready — allowing us to make a ton of progress quickly. This isn’t the right approach for every project, but it worked out well given our timeline and goals. 

I don’t believe that every product designer needs to know React.js or even how to code. For me, the more I understand about the development process, the more confident I can be in collaborating with engineers. Understanding even the basics of code and how the product you are working on is built can be a huge level-up for any designer. 

 

Responses have been edited for length and clarity. Images provided by FireHydrant and Shutterstock.