By Mina Markham
How did you first get started in front-end development and interactive design? My interest can be traced back to my high school journalism class. I was on the newspaper staff, and part of my role, in addition to writing, was to design the layout for articles. I realized that I enjoyed laying out articles more than writing them. I loved discovering new ways to visually represent the stories I had written. That was pretty telling for me. Once I got into print design, it was a natural evolution to interactive design, and from there, into front-end development.
How did you learn the necessary skills? I have a formal design education from the S.I. Newhouse School of Public Communications at Syracuse University. My time there helped me develop an aesthetic and understanding of what makes good design. I worked in print design and advertising for about five years before I made the switch. During that time, I was also working on interactive projects for freelance clients, teaching myself what I needed to know for each project. I did this by reading blogs, tutorials and books, attending conferences, and studying other people’s work. Viewing the source code of my favorite websites was, and still is, a big part of my learning process. It was a lot of trial and error—but mostly errors.
I used the online technology schools Treehouse and Code School to do interactive code challenges. The CSS resource website CSS-Tricks is a godsend. CodePen is great for seeing examples of various front-end techniques. Chris Coyier is my unofficial professor of the Internet. I also love reading the blogs of front-end web developers Sara Soueidan and Una Kravets. The book collection A Book Apart is great for deep dives on single topics. And some favorite conferences are the Front Porch Conference, the Front-End Design Conference and the CSS Dev Conf.
What led you to join Hillary Clinton’s 2016 presidential campaign as a senior software engineer? A friend of mine worked for Obama in 2012, and when the time came to build a technology team for Secretary Clinton’s campaign, my friend suggested me. I hadn’t worked in politics before, so this was not something that would have occurred to me. Once I realized the potential impact I could have, it was too good to pass up. Not many people get handed an opportunity to be a part of history.
What were the greatest challenges of creating Pantsuit, Hillary for America’s internal design system? Ideally, when creating a design system, you build it in tandem with the product it powers so they can both grow and adapt as needed. Initially, the biggest challenge was that I was locked into an existing design. The first version of Pantsuit was written as a one-to-one interface parity with the donation platform at the time. So I had to figure out a way to rewrite all the underlying code powering the design, without making any visual changes. This type of code refactor isn’t unusual, but doing so at the scale and speed required—and creating a design system in the process—was a unique challenge.
One of the requirements of a system like Pantsuit is modularity. To achieve this, I had to take the existing patterns I saw and anticipate how they might be used in a different context. Each design was broken down into smaller pieces that could be rearranged into a new pattern. As I was building the pieces of Pantsuit, I was using those pieces to create a new, yet identical, version of the donations platform. Sometimes, I would find that I was too broad in my definition of a pattern or module and would have to rethink my approach.
For both versions of Pantsuit, I created an interface inventory of each design. I printed copies of each user flow and cut out pieces of the design. I tried to get as granular with the interface as possible: buttons, form inputs, typographic treatments, navigational elements, etc. Afterwards, I grouped similar pieces together to see if they could be consolidated. For example, narrowing down buttons to two sizes or simplifying the color palette. This process made the code more consistent and easier to mix and match into new patterns.
Which of Pantsuit’s details are you most proud of? I’m really proud of the name. But aside from the codename? The details no one sees. As the technical owner of Pantsuit, I didn’t design the look of the user interface, but rather, the underlying architecture. I had to create a custom grid system that was based on our designer’s vision, yet was also easily adaptable for other unforeseeable uses and responsive to various device sizes.
It’s probably the nerd in me, but I’m also really proud of the documentation site I created to accompany Pantsuit. A pattern library can’t do much good if the intended audience doesn’t know how to use it. First, I was able to flex my design muscles again, and most importantly, it empowered my users—in this case, my colleagues—with the information they needed to take advantage of the tool I built for them. It was really rewarding when my coworkers told me how easy a part of Pantsuit was to use. It means I did my job right.
How has working on a presidential campaign affected your understanding of political branding? I have a deep respect for our design team. They figured out a way to make a brand effective for 100 million Americans. Michael Bierut designed an incredibly adaptable logo, while our in-house built a visual language that reinforced our message and Hillary’s voice. We know that an effective brand can build trust. The same can be said for political candidates. A cohesive brand strategy can help promote a sense of authenticity.
What has been your favorite part of working on Clinton’s campaign? It sounds cheesy, but I loved being in the middle of history in the making. There will be big moments that we, as a country, will look back on, and I’ll be able to say I was there. One that sticks out for me now is when marriage equality was upheld by the Supreme Court. There was this outbreak of cheering in the office. Later, when President Obama was making his speech, I had a thought: “I’m watching the first black president announce marriage equality inside the headquarters of (hopefully) the first female president.” That’s pretty amazing.
What excites you about interactive and digital design right now? Virtual or augmented reality (AR) feels like this new era of design. Industrial and game designers have been working in three-dimensional space for years. It’s time that interactive design made the leap. Imagine being able to use virtual reality (VR) to shop online. I think building an e-commerce shop in VR or AR could be really cool.
Does interactive design have the power to do good? Design has the power to inform, excite and persuade the people it touches. Interaction design can also make using web applications easier and accessible for all. Creating applications that help people register to vote online or find their polling location removes barriers that might otherwise inhibit civic action. The easier it is to do, the more likely people are to not only use it themselves, but also encourage others to do so. This can also be applied to online fundraising for charities and online petitioning, among others. Effective design is key for all areas of digital organizing.
What advice do you have for someone just getting started in interactive/digital design? Take time to learn how your designs get translated to code. Start working with a web developer early in the process. My best work has come out of a close collaboration with designers. On the campaign, I would often have “pixel engineering” sessions with designers, in which we would iterate on a project in the browser in real time. These sessions helped us both better understand each other’s role, and they ultimately resulted in a better end product.
How did you learn the necessary skills? I have a formal design education from the S.I. Newhouse School of Public Communications at Syracuse University. My time there helped me develop an aesthetic and understanding of what makes good design. I worked in print design and advertising for about five years before I made the switch. During that time, I was also working on interactive projects for freelance clients, teaching myself what I needed to know for each project. I did this by reading blogs, tutorials and books, attending conferences, and studying other people’s work. Viewing the source code of my favorite websites was, and still is, a big part of my learning process. It was a lot of trial and error—but mostly errors.
I used the online technology schools Treehouse and Code School to do interactive code challenges. The CSS resource website CSS-Tricks is a godsend. CodePen is great for seeing examples of various front-end techniques. Chris Coyier is my unofficial professor of the Internet. I also love reading the blogs of front-end web developers Sara Soueidan and Una Kravets. The book collection A Book Apart is great for deep dives on single topics. And some favorite conferences are the Front Porch Conference, the Front-End Design Conference and the CSS Dev Conf.
What led you to join Hillary Clinton’s 2016 presidential campaign as a senior software engineer? A friend of mine worked for Obama in 2012, and when the time came to build a technology team for Secretary Clinton’s campaign, my friend suggested me. I hadn’t worked in politics before, so this was not something that would have occurred to me. Once I realized the potential impact I could have, it was too good to pass up. Not many people get handed an opportunity to be a part of history.
Take time to learn how your designs get translated to code.
What were the greatest challenges of creating Pantsuit, Hillary for America’s internal design system? Ideally, when creating a design system, you build it in tandem with the product it powers so they can both grow and adapt as needed. Initially, the biggest challenge was that I was locked into an existing design. The first version of Pantsuit was written as a one-to-one interface parity with the donation platform at the time. So I had to figure out a way to rewrite all the underlying code powering the design, without making any visual changes. This type of code refactor isn’t unusual, but doing so at the scale and speed required—and creating a design system in the process—was a unique challenge.
One of the requirements of a system like Pantsuit is modularity. To achieve this, I had to take the existing patterns I saw and anticipate how they might be used in a different context. Each design was broken down into smaller pieces that could be rearranged into a new pattern. As I was building the pieces of Pantsuit, I was using those pieces to create a new, yet identical, version of the donations platform. Sometimes, I would find that I was too broad in my definition of a pattern or module and would have to rethink my approach.
For both versions of Pantsuit, I created an interface inventory of each design. I printed copies of each user flow and cut out pieces of the design. I tried to get as granular with the interface as possible: buttons, form inputs, typographic treatments, navigational elements, etc. Afterwards, I grouped similar pieces together to see if they could be consolidated. For example, narrowing down buttons to two sizes or simplifying the color palette. This process made the code more consistent and easier to mix and match into new patterns.
Which of Pantsuit’s details are you most proud of? I’m really proud of the name. But aside from the codename? The details no one sees. As the technical owner of Pantsuit, I didn’t design the look of the user interface, but rather, the underlying architecture. I had to create a custom grid system that was based on our designer’s vision, yet was also easily adaptable for other unforeseeable uses and responsive to various device sizes.
It’s probably the nerd in me, but I’m also really proud of the documentation site I created to accompany Pantsuit. A pattern library can’t do much good if the intended audience doesn’t know how to use it. First, I was able to flex my design muscles again, and most importantly, it empowered my users—in this case, my colleagues—with the information they needed to take advantage of the tool I built for them. It was really rewarding when my coworkers told me how easy a part of Pantsuit was to use. It means I did my job right.
How has working on a presidential campaign affected your understanding of political branding? I have a deep respect for our design team. They figured out a way to make a brand effective for 100 million Americans. Michael Bierut designed an incredibly adaptable logo, while our in-house built a visual language that reinforced our message and Hillary’s voice. We know that an effective brand can build trust. The same can be said for political candidates. A cohesive brand strategy can help promote a sense of authenticity.
What has been your favorite part of working on Clinton’s campaign? It sounds cheesy, but I loved being in the middle of history in the making. There will be big moments that we, as a country, will look back on, and I’ll be able to say I was there. One that sticks out for me now is when marriage equality was upheld by the Supreme Court. There was this outbreak of cheering in the office. Later, when President Obama was making his speech, I had a thought: “I’m watching the first black president announce marriage equality inside the headquarters of (hopefully) the first female president.” That’s pretty amazing.
What excites you about interactive and digital design right now? Virtual or augmented reality (AR) feels like this new era of design. Industrial and game designers have been working in three-dimensional space for years. It’s time that interactive design made the leap. Imagine being able to use virtual reality (VR) to shop online. I think building an e-commerce shop in VR or AR could be really cool.
Does interactive design have the power to do good? Design has the power to inform, excite and persuade the people it touches. Interaction design can also make using web applications easier and accessible for all. Creating applications that help people register to vote online or find their polling location removes barriers that might otherwise inhibit civic action. The easier it is to do, the more likely people are to not only use it themselves, but also encourage others to do so. This can also be applied to online fundraising for charities and online petitioning, among others. Effective design is key for all areas of digital organizing.
What advice do you have for someone just getting started in interactive/digital design? Take time to learn how your designs get translated to code. Start working with a web developer early in the process. My best work has come out of a close collaboration with designers. On the campaign, I would often have “pixel engineering” sessions with designers, in which we would iterate on a project in the browser in real time. These sessions helped us both better understand each other’s role, and they ultimately resulted in a better end product.
Mina Markham is a senior user interface (UI) engineer in Brooklyn, New York. At Hillary for America, she created and maintained its UI pattern library, aptly titled Pantsuit. Markham has been featured in Fast Company and Wired. She has also presented at various conferences and events, including Distill, O’Reilly Fluent and Collision. She’s actively involved in the tech community, from founding the Dallas chapter Girl Develop It to teaching for Black Girls Code to organizing the Front Porch Conference. When Markham’s not crafting sites or teaching others, you can find her in her kitchen, baking something chocolaty.
