Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, I genuinely don’t think I could be more excited to have Mina Markham on the show. As some of you may know, we have been shifting gears a little bit and talking with the people who make responsive designs happen rather than talking about large company redesigns. Mina is just starting as a senior engineer at Slack and has a long history of doing some really amazing work. Mina, thank you so much for being here.

Mina:

Thank you so much for having me.

Karen:

Well, I bet you’ll do a better job than I could do of perhaps giving our listeners a little bit of your background. Could you introduce yourself, tell us a little bit about the work that you’re doing now, and some of the work you’ve done in the past?

Mina:

Sure. I’ve been working in web for about five years full-time. In my past life, I was a print designer; I did mostly print ads for the phone book—if people remember the phone book—I used to do that for AT&T. I shifted my gears into doing full-time front-end about five years ago, and I worked for companies like IBM Design, and my most recent experience was with the Hillary campaign—I worked on both the redesign of the site and a design system called Pantsuit, which we’ll probably talk about later. So yeah, that’s my history up until now.

Karen:

Mina, maybe you could start out by telling me a little bit about the transition from moving to being a print designer to being a front-end developer. I bet there’s a lot of people in the audience that have either made a similar transition or maybe even some people who would consider doing that themselves. How did you make that shift?

Mina:

I did my shift using temporary gigs. I wanted to work in the tech industry for a long time, and the company I was with at the time, AT&T, just didn’t let me transition inside the company the way I wanted to. So, I looked towards temporary talent agencies and I let them find me temporary jobs where I could test the waters and figure out whether or not this was the industry I wanted to be in and if this was the industry that I would thrive in, and if my skills were useful. So, I did a couple stints of three-month gigs at a couple agencies around Dallas, where I lived at the time, and from there I was able to sort of build up my skill set as a developer and get used to working in that type of way. Eventually I decided to go full-time, and I found a company that would give me a full-time permanent job doing it.

Ethan:

Mina, I’d love to hear, as somebody who works on different kinds of gigs all the time but who hasn’t really shifted industries, can you tell me a little bit more about what it was about front-end development that felt right to you? There’s a page on your website that has always stuck with me, about how you use Sass not just because it’s a great utility but because it’s got a great community around it. I’m just wondering, when you’re transitioning from one industry to another, how do you actually know when you’ve found your community?

Mina:

Those are kind of two different answers, but I gravitated towards the Sass community because it felt very warm and welcoming. Being new to not just front-end but to tech in general, I felt very self-conscious at the beginning, where I didn’t know if I really knew anything of importance or if I really knew how to do anything, and I never felt that way when I was talking to people who do Sass and talking to the people who maintain the repo with things like that. So, it felt very comfortable and it felt very much like I genuinely like these people, and I feel safe here and I feel welcomed here. Shifting more towards front-end was more of an organic experience for me. My background as a designer, I tend to think of things in more visual and UI ways, and it just seemed like a more natural transition from designing print, then designing website, and then trying to figure out how to make my designs come to life. It wasn’t a thing I did intentionally, it was just more like I naturally gravitated towards, more and more, I wanted to understand how designs get translated from the PSDs to living and breathing in the browser.

Ethan:

This might actually be a great time then to ask a little bit about Pantsuit, which you mentioned in your intro. I’ve read some of the interviews that you’ve done after it came out, some of the articles you’ve written, but the process you went through to actually create that pattern library has always been kind of fascinating to me. Could you talk a little bit more about how that came about and how you made Pantsuit happen?

Mina:

Sure. Pantsuit came about very early on in the campaign. I was actually the first engineer that was hired on the campaign, there were four or five in the office, and one of the very first things I was asked to do was create, the way they described it, “A bootstrap for us.” I recognized immediately the need for it. The first version I did was a complete code rewrite. I didn’t change anything, visually speaking. It was more just start from scratch with a clean codebase and with a more manageable and maintainable codebase, but do not change the visual presentation of anything.

The first thing I did was I looked at the site as it existed at the time, I looked at what the visual presentation was, I looked at the UI, and I tried to break it down to the smallest pieces possible, like what elements were there, which ones I could abstract out. Since I couldn’t change the UI, normally what I would do at that point is try to make things work consistently and try to combine certain elements. But since I was given the direction to not change anything, I just looked at it and figured out what pieces I could abstract out from each other and sort of decouple things from the markup and the CSS, and I went from there. I did an actual inventory, where I created this Google Slides presentation where I did screenshots of all the buttons, all the different elements, and I presented it to both the director of the front-end and the director of design and I was like, “Okay, here’s the current state of things and here is how I’m going to approach rewriting everything.” Because it was just me doing it, I didn’t have a lot of chance to bounce ideas off of people, I just kind of had to make a decision and then run with it and hope that it was the right one. Luckily I tended to guess right, for the most part. [laughs] But it was a very quick process; I think I finished the first version of Pantsuit in about two months, which I would have liked to have been able to take more time, but given the pace of the way things work on campaigns, that actually felt like too long.

Ethan:

Yeah, that’s interesting. Given the speed at which you were working—and I’m guessing iterating over it a little bit—did you ever have to go back and revisit any of your assumptions as more people started using Pantsuit?

Mina:

I did. There were two different versions of Pantsuit. The first one was with the UI as it existed when the campaign launched, and then later on, about six months later we did a complete redesign of the site, and that one I was able to start from scratch, working closely with our web designer and we built the UI and Pantsuit at the same time, which was a much smoother process. But I initially started with an architecture. I used atomic design for the first version of Pantsuit… This is not a knock on atomic design, because it’s a great thing, but I noticed that as more and more engineers started to use Pantsuit, they didn’t quite understand the metaphor of it and were constantly confused as to what a molecule was or what an organism was. Maybe it’s just I didn’t do a good job of explaining it, but it became very clear to me that that particular metaphor and methodology wasn’t going to work for our team, so I tried to switch gears on the second version of Pantsuit. I didn’t do any complete rewrites between version one to version two because it was live and many different codebases were pulling into it, and I didn’t want to disrupt the flow and disrupt our shipping schedule. But when it came time to do the new one, I completely redid everything; the codebase, the architecture—I just started from scratch.

Karen:

Mina, I guarantee I could sit here all day and ask you questions about Pantsuit and the campaign, but that would take away from my opportunity to ask you some questions about your work with Black Girls Code and Girl Develop It in Dallas. Can you talk a little bit about teaching and helping to educate other people in the community about what you know?

Mina:

Sure. I actually haven’t done either of those things in a couple of years because I’ve been kind of consumed with other things. [laughs] But I really, really enjoy teaching others. I learned from reading blog posts and doing tutorials; I learned via people putting their skills out there, so it felt like I didn’t really have much of a choice but to contribute back to that process. Particularly with Black Girls Code and Girl Develop It, I gravitated towards those—first, Girl Develop It as a student, just because I was trying to learn as much as I could—and once I felt like I knew enough to teach others, it didn’t seem like a choice I had to make. It was very easy for me to be like, “I want to share what I’ve learned with other people, because that is how I learned and I want other people to feel like they have a place to go where they can learn.” I started the Dallas chapter kind out of necessity. I wanted to be able to teach people, but there was no chapter in Dallas. I went back to Girl Develop It HQ and asked about how does one start a chapter, because it just seemed like Dallas is such a big city, how did it not have one? And I went through the process, it took me about a month from asking to the chapter launch. Ironically, after I started the chapter and I was leaving the chapter, I actually didn’t get to teach very often because I was too busy running the thing.

But for Black Girls Code in Dallas, I think I did the pilot program there where I taught a class of thirty students from age ten to fifteen. I gave a full-day workshop of how to build a website from scratch, and it was really great and fascinating and gratifying to see all of these little black girls coding and really getting excited about it. I remember this ten-year-old girl made this web page that was completely about Doctor Who, which, as a “Whovian” myself, I was so in love with that little girl at the end of the day! Sorry, it makes me really, really happy; it makes my heart grow and swell thinking about it. But I thoroughly enjoy seeing that light go off in people’s heads when they finally understand something, because I’ve been on the other side of that, feeling like I don’t know what I’m doing, and then when it finally clicks it’s like an amazing feeling.

Ethan:

Mina, I hope this isn’t too much of a gear shift, but as somebody who sits kind of in the intersection between front-end development and front-end design, do you have to bring any of those tools around empathy building and communication into the work that you do on a daily basis? How do you actually collaborate with other engineers, with other designers? Tell me a little bit about that.

Mina:

Because my skill set straddles both of these worlds, I really just talk to people like they’re human beings. I don’t know how to explain empathy. I tend to understand the way designers think because I used to be one, so whenever I talk to them, I kind of approach any situation first from a design point of view. Like, I try to think about the intention behind designs, and I explain to them how their vision is going to be translated into code, and basically I try not to make a lot of assumptions about what people know and what is an appropriate amount of knowledge for someone to have. It’s a similar skill set I use for teaching, like I really try to make no assumptions. It’s been my experience that particularly bad learning experiences stem from people assuming a certain level of knowledge off the bat, and it makes for kind of a learning curve and a hurdle that sometimes isn’t easy to overcome. So, I try to approach any given situation by not making assumptions about the other person I’m talking to, and I feel like that has probably helped me to have pretty good relationships with both designers and engineers.

It’s not hard for me to do a lot of context switching, like I can go back and forth between a more design-oriented workflow and a more engineering workflow pretty easily, which I think is pretty unique for a lot of people. I’ve noticed it’s hard for some to make that context switch, whereas I think I make it pretty easily, which helps me with my collaboration and my communication with both.

Karen:

Let me just extend that question a little bit and ask if you have any thoughts or advice or techniques that help you present your work to stakeholders or executives or people who are outside of the design and development world.

Mina:

I draw back on the similar skill where I don’t assume a certain level of knowledge, and I try to explain technical things in a distinctly non-technical way, which I feel like makes it a lot easier for people who are outside of both of those realms to understand. So, I tend to use language that’s not particularly jargon-y or particularly specific to either one of those skill sets. I keep saying this, but I just talk to people like they’re human. I talk to people like they are intelligent people, but I don’t assume that they know the intimacies and ins and outs of the world that I find myself steeped in all the time.

When I was presenting Pantsuit to both the design director and the front-end director, they’re both very good at their distinct skill sets, but I didn’t know how much they knew about each other’s skill sets, so I just sort of explained everything from the beginning, as if they were a blank slate. Sometimes I feel like that might be underestimating people or possibly people may think that I think that they don’t know certain things, but I’ve found that it’s best to err on the side of “over-information” as opposed to providing too little. In that particular instance, I just kind of laid out the entire groundwork, “Here is where we are. Do you see how we have all of these different buttons, all of these different colors? If I was given a chance to consolidate these things,” which, at the time I wasn’t, “but if I could consolidate these things, here’s how I would approach it.” I got a lot of positive response from that presentation and I was kind of able to just, from there, have free reign to make Pantsuit what I thought it needed to be. Yeah, so I just talk to people as I normally would and I just try to explain things very clearly from the beginning and without making assumptions of what they already know.

Ethan:

Mina, one of the things I hear most from my clients and folks at conferences that I meet is people feeling overwhelmed by how much change there is in our industry. As somebody who’s been a fairly vocal advocate for technologies like Sass, I’d love to hear, as a working web developer, what’s interesting to you right now? Are you really into SVG, or virtual reality, or AR? What’s caught your eye at the moment?

Mina:

Right now I’m really into CSS grid, which has just shipped in both Chrome and Firefox, and I really am excited about playing with it and seeing the limitations of it. I’m in the process of—well, I’m constantly in the process of redoing my personal site, but I’m in the process of redoing it using CSS grid, and I’m really, really excited about the possibilities that it presents. I also am really enjoying working with SVGs. I did a little bit of that on some work for Hillary, but I didn’t get really too deep into it, so I really want to dive more into using SVGs, and basically “SVGing all the things.” I am kind of excited about virtual reality, just sort of to see what happens with it, but it’s not really a realm that I work in, so it’s more of excited as a potential consumer of it, about its possibilities. But as far as working with it myself, I don’t see that happening.

My personal excitements, I really want to get more into diving deep into JavaScript. It’s not a realm that I know a lot about because I tend to gravitate more toward UI and CSS, but I definitely want to get more into using ES6 and using React, things like that.

Karen:

Mina, this has been fantastic. I am just delighted that we got a chance to talk to you. I think there’s probably lots of people in the audience that would probably love a chance to talk to you. So, if you were thinking about advice that you could offer, maybe to somebody in a similar position as you were a few years back transitioning into front-end development, or a young designer/developer just getting started in the field, what advice would you have for those people?

Mina:

My advice would be just try it. Just reach out to anyone you admire, anyone that you want to talk to. If you want to talk to me, feel free. I’m on Twitter, you can email me… I might be slow to respond, but I will respond eventually. But yeah, just sort of try and see. You guys say you’re excited to talk to me—I’m really, really excited to talk to you. I’m kind of internally fan-girling at the moment. Yeah, we’re all humans, so approach anyone you particularly want to learn from and just sort of see what happens. That’s the best advice I can give, is just try it and see. The worst that can happen is someone will say no. So yeah, just try.

Ethan:

Well as you said, Mina, Karen and I are two people that do admire your work quite a bit and we’re so glad that you said yes to chatting with us. We’re so excited to see what you do with Slack in the next few years, and thanks so much for taking some time with us.

Mina:

Thank you. It’s been great.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week. No newline at end of file