Subverting the status quo with design: An interview with May-Li Khoe

Profile picture of Oliver Lindberg




Illustrations by {name}

Interdisciplinary designer May-Li Khoe on leadership, creating a design system, and making a cultural difference through design.

10 min read

A black-and-white portrait shot of designer May-Li Khoe alongside a visual of the Khan Academy design system

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Interdisciplinary designer and artist May-Li Khoe has been passionate about designing for education, learning and creativity ever since she worked in research and development at Apple. Over the course of seven years, she invented new technology across Apple’s hardware and software platforms.

During her time at Apple, May-Li contributed software to the very first iPhone, designed the first version of Find my iPhone, worked on early stage research and development of the Apple Pencil and the iPad Pro, and prototyped new interactions such as Force Touch and Taptic Engine, a haptic feedback technology for Apple’s devices.

May-Li noticed that she was most excited about using playful interactions that help people learn and foster creativity. She also realized that there was a huge opportunity for human-computer interaction – and design specifically – to make an impact in education, a space that’s still underserved by design.

At the same time, May-Li developed a deep urge to work more directly toward a just and equitable world. Having grown tired of adapting her behavior to accommodate the status quo in the tech industry, she wanted to focus more on helping to change the systems, design solutions for larger problems, and empower people – especially women and underrepresented groups – to create a better future.

Design as a tool to bring about positive change

In her role as vice president of design at non-profit Khan Academy, where she worked for about five years until the summer of 2019, May-Li then brought free quality education to millions of students around the world. It was also the first time she transitioned into management.

“As you can tell from my track record, I did not set out to be a manager,” May-Li laughs. “I had been an individual contributor for a long time. After gathering more than 20 years of product experiences, however, I had also developed a strong sense of how things could be done better. Increasingly, it felt like I needed to be in a position of leadership in order to influence certain aspects of the organization. At some point managing just became an inevitability.”

The design team that May-Li led and grew from a handful to 19 members, accomplished a lot in a short amount of time: rebranding the organization; setting a new creative direction; launching several successful new products; establishing user research and UX writing as disciplines; setting up a marketing and brand team; and creating a new design system called Wonder Blocks.

“Creating a design system that is just constrained but flexible enough is really hard. You need to help your team understand where they can add little details and flourishes that keep the creative juices running, and where they shouldn't break the rules.”

Building an effective design system for a non-profit

Creating Khan Academy’s design system was a major undertaking. There were over 50 kinds of buttons and links in use at Khan Academy, multiple inaccessible conflicting color systems, more than 50 type styles and over 100 instances of style definitions for type. The incredible splintering of styles, colors and meanings meant that designers were spending a lot of time on choosing between a plethora of similar elements, while front-end engineers were struggling with unnecessary complexity. The biggest challenge the team was faced with, however, was organizational.

A gif of the Khan Academy design system, before and after its redesign
Khan Academy's color system, before and after its redesign. Credit: Leo Basañez, Erica Deahl, Todd Diemer, Natalie Fitzgerald, Jacob Greif, Louis Harboe, Nefaur Khandker, Sanyukta Kothari, Elizabeth Lin, Tatiana Salazar Londoño, Jordan Smith, Vivek Venkatraman and Tabitha Yong.

“We had to convince the organization that the design team needed time to work on the design system,” May-Li explains. “It required a special kind of cross-disciplinary collaboration to understand the requirements and then come up with something that could actually be implemented. A team needs to give it the right amount of attention to make sure a design system is going to work in their organization, which they can’t do in a bubble.“

A crucial factor in convincing stakeholders was to get engineering on board. “I was on the interview panels for the other VPs and asked candidates for the engineering role how they convinced organizations to stake out time to burn down tech debt. I was very excited by the answer that Marta Kosarchyn gave and when she then came on board as VP of engineering, there was an immediate solidarity between us.”

May-Li argues that the more invisible parts of building a design system – influencing how an organization is structured, who gets hired and who has a seat at the executive table – are key to its success. For her, a true indication of whether a company takes design seriously is to establish design leadership at the same level as engineering and product, essentially creating a trifecta.

“When engineering and design locked arms, the VP of product had to agree,” May-Li explains. “We knew all of us, including their team, would benefit from the design and engineering teams moving faster and providing a more cohesive experience to everyone we serve, even if they didn’t understand that immediately.”

Despite resistance, mostly from outside the design and engineering teams, upper management signed off on the two teams halting their usual product work for six weeks. Called the “Technical Sustainability Milestone,” the time was used to address tech debt, consistency, and infrastructure upgrades, which included performance, security, practices and tools.

“We were all in it together, and it meant the team had to take a different formation for the first time. It can be corny to use sports team metaphors but it’s always good for a team to understand how to play different formations. It was challenging, and there were some bumps along the way, but getting everybody together for a designated amount of time proved to be extremely bonding for the team.”

The website homepage for Khan Academy
The Khan Academy website.

Facilitating day-to-day decision-making

As Khan Academy is a non-profit organization, another challenge was the limited resources. The team needed to be very pragmatic about the budget.