Tandem is a team of creative technologists, so creativity and coding come together in our branding via shapes and computational patterns. When we created the brand and website, we created each unique computational pattern in Sketch — and it was time-consuming!
Eli, product designer, wanted to create a way to simplify the process. He loved the idea of Tandem computing the patterns ourselves, so he thought about creating a pattern generator. However, he needed help coding it to work — that’s where Dominic, software engineer, came in! We sat down with Eli and Dominic to have a conversation about what it was like to pair together as designer and developer to create the Tandem pattern generator.
What was the process like working on the generator? Where did you start?
Eli: The idea came to me a few years ago. Originally, I needed to understand the coding part of it to even start the project. I’d heard about an older Java tool called Processing, which was designed for artists to learn how to code creatively. I learned there was a newer Javascript library version of it called P5.js, which allows you to make interactive visuals on a website using the HTML Canvas element.
Pages of geometry sketches and hours of tinkering later, I was able to compute many of the patterns but realized it was quite difficult to export them as SVGs using the P5.js library. This was something I wanted to be able to do because I wanted designers to be able to import their patterns into Figma or Illustrator. I researched similar libraries I could use and found paper.js, which we can use to easily export the patterns as SVGs.
Dominic: When Eli came to me about the pattern generator, I was surprised because I was unfamiliar with his coding experience. However, he had already mapped out how to create the shapes and patterns within the generator, and knew he wanted to use paper.js. I had looked into the libraries of paper.js before, but I had never worked with it, so this was my first project doing so.
I was relieved that Eli had already done all of the math behind the shapes because doing that would have scared me. This is also why I stayed away from Canvas in the past — I was intimidated by all of the math! We started pairing on the generator in February 2021.
What were some challenges you faced when working on the pattern generator?
Eli: We decided to build the pattern generator using React, but some of the React concepts took me a lot of time to understand. It really helped to keep revisiting State and Context to better understand them. Dominic and I would work together on one of the pieces of the site, and then I would go do it on my own for the other pieces, which helped it sink in. We ran into some roadblocks along the way, like trying to get the patterns to update. It took a lot of persistence and patience, but Dominic figured it out!
Dominic: The biggest challenge I faced was trying to not be too technical with Eli when we were starting off. I wanted to gauge his level of understanding with coding so that I could explain things correctly without going too in-depth right away.
The technical challenge was trying to use paper.js in React. We were blocked by the issue of patterns not updating, which was caused by us defining variables in a React component. React only updates when the state changes, and our paper.js variables weren’t being stored in the React State so the component wasn’t updating. Moving one line of code (a paper.js variable) outside of React fixed it. This took us weeks to solve, too!
Eli: There was another big struggle with the CSS too, as we were trying to get it to be responsive with the canvas. This ended up coming down to a few lines of code as well.
What did you learn from each other through working together on this project?
Dominic: I learned that design can be math-heavy! I didn’t realize how much math can be intertwined with design. Something else that surprised me was Eli’s ability to learn and pick up on things so quickly. He was working on the code outside of our pairing sessions, and would message me saying, “Hey, I added this to the codebase.” One time, we didn’t pair for a week and he came back with the styles updated to match the Figma designs. It was really impressive!
Eli: Dominic always knew what the answer was, especially when we were starting the project and React was so new to me. He was super good at explaining the “why” to me. It was very eye-opening to pair together. Dominic would let me drive and try things, but he’d also often have an idea of how to solve something, so it was cool to hear how he’d do it. One thing that I did find surprising, especially recently as I’ve been working on this longer and gaining experience, is that I am using my intuition a lot more.
Maybe I’m surprised because there’s this preconceived notion of what a software engineer is — being logical, having a reason for everything, etc. But I’ve found that as I’ve become more experienced with coding, it’s kind of the opposite. I get a sense of what the right answer is before thinking about why. It was exciting and cool to understand that that’s a big part of development. I was chatting about intuition with Dominic, and it resonated with him too.
Dominic: I think that’s how we solved the complicated problem of the state not updating correctly. We used our intuition to move that line outside the code.
Eli: It’s common to think of designers using intuition because we think in that way, and in critique, we often talk about how things feel — but I’ve learned that it’s a big part of development, too.
Looking back, what would you have done differently?
Dominic: One thing that helped was that I would continuously go back to what we had worked on previously and ask Eli if he had a good understanding of it or if I should give more explanation. Looking back, I would have provided examples or exercises on topics I was explaining to Eli, like passing props between the components and context API.
Eli: I really appreciated that Dominic had the patience to do that. I remember from my physics days that with some concepts, you just needed to go over them many times. For him to take the time to do that with me was really helpful.
When we paired, I was driving almost all of the time. Something I would have done differently is have Dominic drive more so I could see more of his thought process. Then I could see how he would approach something differently. Stepping back and navigating can help you see the big picture. It was super valuable to be driving so much, it gave me confidence — but it could have been cool to mix it up more often to see how that worked.
Dominic: It’s valuable to have someone navigating as you are both working through problems. The driving aspect of pairing does give experience through repetition, as writing things over and over again makes it stick after a while — but it’s important to maintain a healthy balance of driving and navigating.
How do you think your partnership will benefit your work in the future?
Eli: Lots of ways. One of the biggest benefits is how I approach design now. I think I now have a better understanding of how things will be built. Not that I’m an expert developer now, but for example, the design team has been working on a UI kit template that contains different components so designers on a new project don’t have to start a Figma file from scratch. [Because of this collaboration with Dominic] I’ve been more aware of how components are made through CSS, Javascript, and React.
Dominic: Working with Eli on this project has made us better team members at Tandem. We are building the connection between designers and developers to work together more often outside of client projects. Especially working remotely now, I think that pairing on this project bridged the gap between us and allowed us to build a bond. We better understand how the other person learns, how they respond, and how they ask questions. I hope that we inspire other Tandem designers and developers to work together on more projects.
Eli: I feel like traditionally, it can be hard to find time for developers and designers to collaborate on projects. People don’t always know what it’s like to work with a designer or developer. Bridging that gap to share work together and pair on something is important. It’s easy to be afraid that it’ll be awkward, like you don’t know what you’re looking at or what questions to ask. Being able to get over that and get comfortable working with each other is so helpful for growth.
Dominic: Wearing each other’s shoes to see the work and effort that goes into design and development is helpful — and fun!
What do you see for the future of the pattern generator? How do you hope it will be used?
Eli: For the website we’ve built for the pattern generator, there are two ways I hope it will be used: One, it is a tool for our team to make computational patterns for our design work. Two, it’s a fun, playful, and exploratory tool for anyone on the team (or anyone else who comes across Tandem!) to use. Soon, it will also be a Figma plugin so instead of exporting a vector file and importing it into Figma, people can have something fun to explore and play with in Figma. It has been really interesting to think about how the generator operates in different environments (as a web app and a plugin) — it has helped me grow more in learning coding.
Dominic: Currently, we haven’t implemented any test coverage, so that’s on the list of things to continue working on to keep improving the React website. We also would like to refactor the components.
Eli: I’d also kind of love a mobile responsive version of the pattern generator. 2022 project!
Dominic: One of my hopes is that this project can be used as an example to promote collaboration between developers and designers within Tandem and in general.
What part of the project are you most proud of?
Dominic: Overcoming the issue of the state not changing in React, causing the patterns not to update. Once we solved that, there were times where I was still in disbelief that we had fixed it. A haunting experience for me, haha! But still my favorite moment.
Eli: Me too, honestly. That was such a tough roadblock, so it felt amazing when that was fixed. I loved the moment we were able to change the patterns by selecting the right buttons — that was super exciting. Later, it was also magical when we began to play with the size and spacing of the patterns because it really started to come to life.
Want to try out the Tandem Pattern Generator? You can find it on Github! Learn more about Tandem’s core values and apply to join our team!
