Web Directions Year round learning for product, design and engineering professionals

This week’s extract from the Scroll magazine published with our Respond 17 conference focuses on keynote speaker Mina Markham.

During the 2016 US presidential campaign, Mina spent most of her time building and refining Pantsuit, the design system that powered many of the applications hosted on hillaryclinton.com.

In her Respond 17 talk, Styling Hillary: A Design System for all Americans , Mina will share successes and failures from nearly two years at Hillary for America, including creating CSS architecture and implementing a redesign of the main website. Here’s part of her profile in Scroll.

Mina Markham

Coding a Pantsuit

Interview for Communication Arts, 2016.

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.

That’s the end of this excerpt from Scroll magazine. Come and see Mina and the rest of the amazing line-up at Respond 17 in May.

Interview originally published at http://www.commarts.com/column/coding-pantsuit