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.
During Khoe's seven years at Apple, she invented new technology across Apple’s hardware and software platforms. She 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.
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.
“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.”
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.
“Tatiana Salazar Londoño, who did a ton of heavy lifting on our typography work, had picked an incredible typeface,” May-Li recalls. “It was beautiful, very compact and legible, and we all really wanted to use it. But it was also extremely expensive, and the pricing was usage-based. So we had to have one of those moments: Do we have to get the designer jeans at full price, or can we get creative at the discount store and still come out looking great?”
To empower the team to make their own creative decisions, May-Li came up with four design principles that would help guide the work: empowering, credible, flexible and joyful. Everything was being measured by these underlying values, and May-Li turned them into a scorecard that was used to assess and improve design elements. This decision-making framework proved to be a critical component of the design system.
“Empowering” means that students (or users) should feel as much ease and agency as possible so they can focus on what they’re there for: learning. Based on a constructivist philosophy of education, this principle is also about valuing what students bring to the table and enabling them to co-create their knowledge in an easy-to-use, welcoming environment, without feeling patronized or lost..
“Credible” refers to building trust through a clean and well-structured design, while “flexibility” was key for an inclusive design system that needed to serve many different audiences, from students of all ages, levels and backgrounds, to teachers, administrators, and donors. Finally, “joyful” served as a reminder to celebrate small wins and create a cheerful vibe.
The team also needed to understand that the design system didn’t just have to be flexible for external users. “A design system is designed for multiple audiences,” May-Li explains. “But it’s a big challenge to design a system that also works for and gets adopted by the people that build the marketing pieces and product. Designing a system that is just constrained enough but flexible enough to not feel like it cramps everybody’s creativity is really hard. You need to help your team understand where they can add little details and flourishes that keep things fun and keep the creative juices running, and where they maybe shouldn't break the rules.”
In the end, it was an eventual relief for designers and engineers to have a system to fall back on, even if it took getting used to for some. It meant there was less ambiguity about color, type and layout, which proved to be a big time saver. The design system introduced a unified type system with fewer typefaces and styles, as well as a new color system with fewer colors and clearer definitions for how each should be used. Khan Academy’s engineers now estimate that they’re able to develop around 20% faster with Wonder Blocks to help streamline and unify the process.
“I feel like our work left a big mark. We proved that it was possible to build a successful design system in a small non-profit with a small team and then enjoy the fruits of the labor for many years to come.”
Creating a multicultural team that continuously learns
The makeup of the design team May-Li built at Khan Academy played a big part in its success. “We hired designers from all kinds of sources, including places with extremely fancy budgets like Airbnb and Apple. People were always surprised that we were able to recruit them away,” May-Li shares. “I feel like our work left a big mark. We proved that it was possible to build a successful design system in a small non-profit with a small team and then enjoy the fruits of the labor for many years to come.”
The team was roughly balanced across the gender spectrum and diverse in ethnicity as well as interests and skillsets. For May-Li, it was important to put effort into widening the applicant pool and not just interview people she already knew. She strived for the hiring requirements to go beyond just aesthetic diversity.
“It’s not enough for everybody to look different,” May-Li emphasizes. “We ut work into designing the hiring process and hiring criteria that felt aligned with our team’s values. A candidate might be super-qualified in some technical aspect, but if we noticed their words and actions weren’t aligned in ways that would be hard to teach or guide toward improvement, we’d pass. We really looked for people who were introspective, excited to learn, excited to share and collaborate and elevate others around them, and who were mindful of how they affected the team.”
It took a lot of work, but May-Li says the results are priceless. Even now, a few years later, so much of the team bond remains. Almost everybody is still in contact and many former team members continue to help each other. Behind it lies a belief in management and teaching being inextricably linked. Everyone was constantly learning from each other.
“We’re past the era of management in which somebody is a cog in a machine,” May-Li highlights. “You’re going to get the best work from the team if you create the environment that keeps them empowered and excited to learn, and that includes you as a manager: Learning goes both ways. It’s important that everybody, from entry to senior levels, recognizes that they are learning from each other. On our team it went really deep, which is why it still continues to this day even though we’re not directly working with each other anymore.”
Following a model called multicultural organization development, the design team embraced and celebrated the differences of the individual members and constantly iterated on its practices.
“When you have a truly heterogeneous team, there isn’t any group that can be a comfortable majority,” May-Li explains. You’re always sitting with a certain level of deliberate discomfort because everybody’s different from each other. It requires you to consciously navigate norms, which is the only way to really have a multicultural space. There has to be a certain level of trust that gets built, so that the learning can take place, and it pushes us to be really explicit about our expectations. It meant extra work but it forced us to examine everything we were doing and learn so much more about each other’s habits, discomforts and needs over time.”
Design team members were encouraged to give lightning talks at the beginning of the team’s design summits. The topics being covered varied wildly. “People were into all kinds of things,” May-Li laughs. “It didn’t feel like typical design team posturing.”
“We’re past the era in which somebody is a cog in a machine. You’re going to get the best work from the team if you create the environment that keeps them empowered and excited to learn, and that includes you as a manager: Learning goes both ways.”
Pushing for more human connectedness
Throughout her career May-Li has invented new ways for humans to interact with computers. Lately, she has also been thinking about how designers at any level can make a difference by subverting the status quo. This ranges from symbolic gestures — for example, when Slack product designer Diógenes Brito added an illustrated brown hand to a promotional graphic — to raising the bar for how we work by altering the hiring criteria in our organizations.
May-Li’s musings on what she wants the future to look like and how digital design can help us get there directly impact her own work. She dedicates time to pushing the boundaries and working with others to enact meaningful and lasting change, while having as much fun as possible along the way.
Now independent, May-Li is currently focused on improving collaborative spaces. She’s the co-founder of two innovative projects that foster creativity: Scribble Together, which is an online whiteboard that makes it easy to draw with other people in real-time. MakeSpace, meanwhile, is a new online environment (in a closed beta) to co-create, co-work, or just hang out. Neither of these tools started by directly prioritizing the business-to-business case first. They’re designed on the premise that by making spaces online more personable, fun, and welcoming, the business cases will benefit too.
“Most video-conferencing tools are very rigid,” May-Li explains. “So giving people a flexible space for them to customize and play together online is already a little subversive. They break down the stuffy formality of the 1950s boardroom. MakeSpace and Scribble Together turn their audiences into creators and start with a more playful vibe. The best joy I get as a tool creator is having people surprise me with what they do. I love those moments.”
Scribble Together, for example, has been adapted across multiple generations: from young children to parents and grandparents who use the tool to help their kids with schoolwork. During the COVID-19 pandemic, teachers have been using Scribble Together to implement virtual versions of interactive classroom activities, keeping students engaged. Co-founder Bridger Maxwell and May-Li have also heard from people using it for remote therapy work, music classes, presentations in architectural firms, and even keeping long-distance relationships more fun.
May-Li remains excited about playing a small part in improving people’s lives. She believes that we can find new, more human ways that move beyond the dominant social systems and hopes to inspire others to be better designers, leaders, and overall people. Design empowers us to create solutions that have the potential to enhance our collective futures – and it’s even more effective if we can achieve it by introducing more play into the process.
