Doing It Wrong

Nov 28, 2017

–

3:30 pm

–

Alamo Drafthouse New Mission

Mina Markham

Senior Engineer

Slack

Just as there’s no one way to make a website, there is no one way to make a design system. While there are several “best practices” that have emerged, there is no one-size-fits-all solution for creating a design system. And sometimes, the best solution means going against industry standards.

In this talk, Mina will discuss her experiences building systems at two highly visible, and vastly different, organizations: Hillary for America and Slack. She’ll tell you all the things and all the ways she got it wrong, while somehow making it work.

Transcript

Una Kravets:

So, I'm going to introduce Mina. Okay. To round out day one, we have someone I greatly admire. She's not only a talented engineer currently working on the growth marketing team at Slack, but she's also a really power advocate for people in tech. She founded the Girl Develop It and Black Girls Code. We met when we worked at IBM design right before she started working on the Hillary for America. She's here to tell us about her experiences. I heard she's prone to standing ovations so express yourselves however you feel…

(Laughing)

Una:

…is right.

(Laughing)

Una:

And welcome to the stage, Mina Markham.

(Applause)

Mina Markham:

Hello. Is the mic on? Hi, my name is Mina. You can reach me online at my websites and my Twitter. As Jina said, I work currently at Slack on the growth marketing team which means I do not work with product. Their feature requests don't come on me. I work on Slack.com, which did a big overhaul and I created a marketing design system for them.

Before that, I worked for Hillary for America, which was the campaign for president. Spoiler alert, it didn't work but we tried our best.

(Laughing)

Mina:

Why introduction into the world of design systems started with a very innocuous conversation. Kyle Rush came to me. He said we need a pant library or something to create all these applications more efficiently. He also said, and it needs a really good name. So, in hindsight, the name, Pantsuit, feels kind of like inevitable. Because, I mean, hello? I was fairly unconvinced when I thought about it. It went like this in my head. Oh, no, I can't call it. Oh, yeah, I can call it that.

(Laughing)

Mina:

I went back and forth for so long and so I finally just uttered it to somebody and they said, that's a brilliant idea. What I made for Slack is call oh, thank you. So, Design System that I made for Slack earlier this year is called spacey. I'm a one trick pony.

(Laughing)

Mina:

There was thought behind this. Slack, their well known emoji is rocket ships. This is how my brain works. It was

(Laughing)

Mina:

So, I've done two of these things now. Or, you could say three, if you count the major rewrite I made of Pantsuit half way through the campaign. Surely I know what I'm doing. Yeah. No. Not even a little bit. So, what I'm going to tell you is tell you all the ways that I got it wrong. All of the things I look back on and go, you know what? That wasn't the right way. There is no one right way to create a Design System, there's just a way that works for you and your organization, for your team, and the products. For all of our community norms that have emerged, the first one of the norms is something that Elyse touched on earlier, which is desire to keep things simple. So, according to her, like, a component should be flexible enough so that you can support its use cases without being unwieldy our confusing.

This is two different components that I made for the spacesuit system for the marketing site. Now, they look fairly similar, they're composed of a couple different elements, headline, copy. What do you think these two things are called? Can someone shout out one thing these things are?

Audience member:

(Inaudible).

Mina:

Big marketing bubble? No.

(Laughing)

Mina:

Now, if you look at them, they probably should be the same exact thing. They're very, very similar. The only difference is that the headline on the top one is slightly bigger. That doesn't have to be built into the component itself. That could have been applied with the utility class or a slightly modifying class. These two things should be combined and one object. So, why aren't they? I don't know. I don't know what I was thinking when I made these two separate things. Probably what happened is I was looking at designs as page per page and not thinking systematically. I shouldn't have done that. I was looking at designs, page per page and coding and when I looked at the whole system together, I was like, oh, wait a minute, these things should probably be one.

There is a panel that has a box that has an icon or image with some descriptive text. One is the outer panel itself and the other is inner, like media objects and there's a panel title called title plain title. What the plain does is removes the carat you see. The one in the middle doesn't look the same as the other two and yet they're both a panel title so clearly something weird happened there. Come component drift happened.

Part of the problem with this component is it's way too generic. It probably shouldn't be its own component because then people try to sandwich and shoehorn a bunch of different things in it and you end up with this slightly off, but kind of, sort of, similar style like you see here. I figured this out, like, maybe two or three weeks after I initially built the component. You know, deadlines are real, I couldn't go back and fix it and I was like, I should know this. I did thing two years ago when I worked at Hillary for America. So, I took some designs like this. These are some various different pages, various different layouts on different products for Hillary Clinton's website. So, if you look at this, you will see a couple of patterns emerge so I saw a image with text below it. Common buttons, inputs, drop downs, topography and highlight style. I'm used to be able to Abstract out some components and create more a unified UI system which translated to our designers who create a file they can use.

For the most part, this wow, that is really jerky. So, for the most part, this worked out pretty well, but because I wasn't as context agnostic at Elyse suggested we be, I ran into problems when I tried to put them in various areas. Some had patterns associated with them so when I tried to create the same form in five different contexts, I ended up with some really funky problems happening because you'll see, this component is made of three same basic elements, headlines, inputs and action, which in some cases, usually is a button but you'll see down at the bottom left, there's actually a text line. Because I still have the same, like, basic make up of this particular component, but I cause trying to shoehorn these things into different context and I didn't account for these different context, I ended up with some really weird code happening.

(Laughing) Mina:

That's how I felt it.

(Laughing)

Mina:

You know, just this was terrible and I still, to this day, feel really, really bad about it. But given the nature of the environment I was in, we had a more of a, do it fast and let it go mentality. Because of situations like this, trying to change anything in that CTA component resulted in a weird, devastating domino effect.

So, the second norm I observed is the need to favor community or control. Favor community and design versus one, single solitary person. Models and systems. He says a solitary model a basically one team created a system that works for them and trying to onboard other teams to use it, which is what I did at Hillary for America. It was to serve the team I was on and we decided to open it up for everyone to use, which meant that for the entirety of the campaign, the Design Systems team was just me. Or as Nathan calls it, a unicorn overload. Or as I envision 2, like this.

(Laughing)

Mina:

Now we didn't really set out to do it this way, it just kind of happened organically. When we first started when I first started on the campaign, it looked like this. It was about seven or eight people? Actually, it was much smaller. When I joined, there were about four people and I was the only person who had the skills that could attempt to make something like a Pantsuit so it became my responsibility. As we grew, we grew very rapidly to about 80 people. The need to keep the system, to keep the velocity of the project was overridden by the need to make more projects and create other applications that were more important than creating a Design System, which I know is not something to say at a Design Systems conference. We have limited resources. It was an internal project that only our engineers would truly use so the decision was made to allocate resources to other projects and just leave me to do this in addition to everything else I was doing so it was my job to build this system that, in the end, served the products we built in 579 days that was used by approximately 80 people.

I had to get used to shifting things quickly and setting it and moving on which is how those things happen.

Truth be told, if we didn't ship our product on time, we shouldn't ship them at all. Debate days, caucus days, election days, things that could not be changed no matter how hard I tried. I needed to ship and ship fast.

So, the first version of Pantsuit was made in six weeks. Doing a one to one to one UI re creation, and creating a new sample project that other engineers could see using Pantsuit and documenting everything, all that had to be done in about six weeks, which is not a lot of time, but also felt like really, really long in campaign years. That was probably the span of three different projects in campaign years. So my point is, the solitary model worked for us because of the velocity we were moving at. I didn't screw everything up in that situation. I created a Pantsuit council, which consisted of all of our stakeholders and partners and support members for the team, for Pantsuit. So, it looked a little bit like this. I would preside over this meeting we'd have once a week. They would be there to help me kind of talk about the system, what they were building, should they add to the system? Things like updating, things of that nature which was for being able to value community over control is, it's all right. In the beginning, I was the overlord dictator. In the end, I tried to do as much inclusion and collaborate as much as possible.

One of the last things that one of the other norms I have seen is being able to share your knowledge and this whole conference is about sharing your knowledge. But what that usually means in the world of tech is that you need to do open source. Jina, herself, says an open source designer contribute to the web in an even larger way by contributing. There are so many examples of open source design samples. There are two logos missing from this slide, happen to be the two places that I worked. There is no Hillary for America for Slack. Ironically, when I wrote the Pantsuit Blogspot, the intention was to open the source at the same time. For several reason, that was not possible. The main one being the advent of fake news, something I did not anticipate having to deal with. It was just people writing articles and getting things oh, so very wrong. This one reporter decided that it included using greenhouse. No, that's not true. That's not really true at all. Sometimes the fake news was more insidious and had a direct impact on the way I did work.

Towards the end of the campaign, there was a guerilla campaign on social media to encourage people to vote for Hillary for America via text message or hashtag or Facebook or any means that was not how you actually vote for president. The idea was if they could convince enough people that this was a new thing, they'd be able to suppress those for Hilary. They do so with our brand. We encouraged people to text us via text message for contacts or the next time she'll be in town. Some people tried to take this and encourage people to do activities that were not wouldn't benefit them in any way.

You'll see here a couple of different fake posts that were put out that were trying to mimic the Hilary brand. Vote for the hashtag or vote from home via text message. They did so using our fonts, our color pattern. People were trying to actively download the font from the website. Someone came to me and said, can you prevent them from downloading it. So, I made a decision not to do that knowing this would probably happen. You can say whether or not that was a good decision in hindsight. Someone created an entire website looking similar to our site, encouraging people to vote on this site. What they did with the information they collected, I can't imagine.

Now, with Slack, I also wrote an article describing the process of redesigning and doing creating a new Design System and what I learned from the post on a brand like Slack that has lots of people, lots of eyes working on it, and working for Hillary, people have a lot of opinions about decisions. When I wrote about Pantsuit and Slack, I got a lot of warm, friendly comments saying how much they enjoyed reading the article. Sometimes I get exposed to not so friendly opinions.

(Laughing)

Mina:

This phenomena happened after the blog post and people became aware I was a developer for Hillary Clinton. They were telling me that I, you know, shouldn't possibly be as talented as people think I am. What did people hate about me the most? That I'm a woman? That I'm a black woman or I'm working for Hillary Clinton? It is hard to do when people are talking about you personally specifically and creating entire forums talking about how much you suck and trying to actually hack me in an effort not it wasn't about me, it was more effort to break into Hillary's website. I was more of collateral damage. Even with things like this, creating a fun Easter egg in our code base. They said this couldn't be possibly written by me. This isn't even that hard. What do people think? Reddit is kind of a waste.

(Laughing)

Mina:

After this thing was over, I made an update to my LinkedIn saying, I helped five people, you should hire me. I had a lot of people saying, no one's going to hire a failed libtard. I thought this was funny because in the same thread they were telling me no one wants to hire me, it was full of people trying to hire me. Hundreds of comments saying, you should apply to work with, with literally, no one should hire you.

This one I will present without comment because it's incredibly hurtful. Yeah. People are great, aren't they?

(Laughing)

Mina:

So, yeah. Twitter, also a wasteland.

(Laughing)

Mina:

After, like, this past January, they interviewed me. They asked us about what our experience was and about what our next steps were leading to inauguration. It was an article about how are you feeling and if you have a job and if you're looking. Someone felt the need to tell us we should go away and stop talking and no one wants to hear about our lives anymore. Yes, thank you so much for an opinion that nobody asked for.

Facebook, also a wasteland.

(Laughing)

Mina:

One of the things I used from secretary Clinton is these are meant to crush you and make you feel inadequate. She didn't back down and I'm not going to back down, either. So when people have this tendency to make people feel I never felt more loved and supported and respected than I did the 18 months I worked for her so when I get opinions and people in my comments telling me that, who are you and what are your credentials? I try to do what Michelle Obama said, go high so they go low. Sometimes, I cannot help myself.

(Laughing)

(Applause)

Mina:

Okay. So, if I were to grade myself on sharing my knowledge, I would say, open source, yeah, I kind of failed at that, for legitimate reasons. But I did put out my thoughts in written form on a blog post and that was okay and the fact that I continue to go on stage and tell people and tell people my experience there's lots of people telling me I don't want to hear from me anymore, I think that's pretty damn good.

Mina:

The final verdict of doing things the right way, according to me, is keeping it simple, I failed at that. Valuing community over control, I think I did that one okay. I tried to get more people involved and collaborate. The fact that I'm still sharing my knowledge, I'm going to say that's a win.

So, this last part, there is one more thing I kind of did wrong that a lot of people told me I did wrong at the beginning and that is responding to this email that was asking me to apply to work for Hillary Clinton's campaign. This was before she had announced. It was very vague and secretive and us developers and engineers get a lot of recruiting Spam. I don't know made me reply to this, maybe the fact that she mentioned something I knew. Replying to this email felt wrong, but it changed my life. Go ahead and insert your email joke here.

Things people say I did wrong was taking this job, at the time I took it, made no sense. I had just starting working for I B M design and had been there less than six months. I had to quit the job I just got. I had to break the lease and sell the car and take out my bank account. Which felt like a really bad decision at the time. But also, it was really exciting. So, the 18 months that I spent there, I learned a lot of things, I remember a lot of things, like Winnie. Winnie was our campaign office dog/therapy dog. She became famous. This photo was from a magazine. It wasn't about me, it was about Winnie. I just happened to be in the photo.

There was a lot of booze. This was a celebration of marriage equality passing in the Supreme Court. I remember lots and lots of junk food. So many Oreos and treats around the office and I contribute a bit to this problem. There was so many pizzas, so many fried chicken all over the place. Then, there was my contribution, lots of cakes. I made a cake for the 4th of July and a cake for Halloween filled with candy corn and a cake filled with fried chicken for my coworker. He loves fried chicken and the cake is cornbread, mashed potatoes and gravy. I remember meeting president bill Clinton and he was wonderful and charismatic and I remember seeing the website I created. I remember the coolest thing I will ever do, which was the redesign and showing it to secretary Clinton. She is sitting at my desk and I did not expect that to happen. She's sitting there, staring at me.

(Laughing)

Mina:

And even after it was over, I remember seeing lots of little kids writing messages of thanks and of love and support on the sidewalks, which was really what we needed, really hopeful after a particularly bad day. I remember seeing the people putting up all these post its in the subways. And I remember the last time I saw Hillary Clinton three days after election and she spent time thanking us and saying, take some rest. You've earned it. Get back out there and keep fighting. She wrote us a letter. She gave us all a rose and those glasses that are on the desk, there's a funny story behind it. They are a replica of the Sass glasses that were worn by Hillary Clinton and I own it now.

(Laughing)

Mina:

I remember joy and laughter and excitement and lots of warmth and love. Really, a lot of enthusiasm. And I hope the sound's going to play on this and not be too loud, so we'll see.

Yeah. I think I found it enthusiastic right there. Of all the things you can say that I did wrong in the past couple of years, taking this job was definitely not one of them. During election 2016, a very consequential election, I was right there in the middle of it trying to do my best and use my skills to create a better world for us. I was right there. Can you see me? I'm right up there in the back.

(Laughing)

Mina:

So, when I look back and people ask me, would you make this same decision again? Would you make this same bad decision again? I would say, you know what? Hell, yeah, I definitely would.

All right. And, thank you. That is all I have.

(Applause)

Una:

Thank you. Come sit. Oh, what a good talk. I have all the feels now.

Mina:

I'm too short for this.

Una:

You can stand. I feel the same way, it's always a struggle. I'm doing this for you all.

So, you shared a lot of joyful moments there at the end and I love that. What is your absolute favorite memory from your time at the Hillary for America campaign?

Mina:

It's probably cheating to say the time I voted for Hilary. March 15 there we go. So, yeah, March 15, 2016. It was the day that we won all five primary contests we had that day and we stayed up in the office celebrating, dancing and drinking in until 4:00am. I had video footage from that day, I'm actually not allowed to show anybody. There were lots of people who were dancing on tables. It was a great, great time and that's probably one of the fondest memories, screaming and shouting. That video that I showed was actually from March 15, we stood on tables and chanted.

Una:

Lots of enthusiasm there.

Mina:

Yes.

Una:

How did you manage your time with so much going on and single handedly designing the Design System.

Mina:

Working seven days a week, that wasn't just me, that was the entire campaign. We worked seven days a week for fourth months straight. I loved purposely four blocks away from the campaign and I would stay at the office very late and walk home. I lived in that building for about a year. So, I don't really know if that's effectively managing my time, I basically didn't really sleep for a long, long time.

Una:

My biggest question to you is how did you stay so positive with all of the stuff that you went through? Like, I'm just constantly impressed by your positivity through it all.

Mina:

I laugh now because I can't do much else but laugh about it. The way I got through it, at the time, was remembering the end goal because the thing about working for a campaign about that is everyone in the building has the exact same goal. Most of the time, when you work at an organization, people have different reasons. Keeping the end goal in mind helped me to block out everything that wasn't going to help me achieve to do that goal. Also, I have a very extensive filtering on Twitter right now. They had to use automatic blockers and keyword filtering. After awhile, I stopped paying attention to social media and the news because it was outside noise. Ignoring it helped a lot but also just remembering that I was working towards a larger goal and now I found it funny because I can say, the past year, I've had a lot of opportunities come my way that would not have happened if I had not done this.

It was painful, but in the end, it helped me.

Una:

That's a pro tip, mute everything.

Mina:

Yes, mute everything.

(Laughing)

Una:

Thank you so much, Mina.

(Applause)

Video

Sketch Notes

Transcript