When you design an edTech product for the first time, part of the fun is developing the visual styles you’ll use. You’ll choose the colors, typography, and user experience (UX) patterns that best reflect your brand and support teaching and learning.

Building a design system helps you collect all these choices in a systematic way, improving your team’s overall consistency. Design systems also document front-end code snippets, optimizing your work with developers. 

Once complete, this documentation effort helps your team:

• Update product features or components quickly
• Communicate needs with your learning content or development teams more effectively
• And onboard new designers to your team more efficiently

Most likely, though, you’re managing not just one edTech product, but an entire suite of learning tools.

Developed with intention, edTech design systems are flexible enough to create consistency across your entire product suite. 

This creates a stronger user experience, strengthens trust in your brand, and improves your internal processes for design and development across the board.

Put simply, the ROI of an edTech design system is worth every penny. 

Measured in fewer customer support calls, shorter product development timelines, and stronger learning outcomes—it’s priceless.

What is a design system?

A design system includes: 

• Building blocks for your edTech product that support both designers and developers, including components, front-end code snippets, and styles for buttons, icons, and typography
• Standards and guidance for implementing design

By building a repeatable system that incorporates rules and governance, you’ll ensure that your edTech products have both a consistent user experience and user interface.

Because let’s face it—how often have you used a new feature in a learning tool and realized that the product’s visual language has started to change?

Or, more confusing still, how often have you used edTech products that belong to the same suite of learning tools and noticed their interfaces all look and behave differently?

Design systems solve these types of inconsistent experiences, providing your design team with the building blocks and guidance they need to create learning tools that live up to your brand standards.

What makes design systems in edTech different?

edTech product design systems are often more complex than design systems for commercial products, which is why investing in one is so important.

Below, we’ve highlighted three elements that make edTech design systems unique: learning content components, grade bands, and accessibility needs.

edTech design systems and learning content

In order for teachers and learners to use your products successfully, you must create recognizable, repeatable design and interaction patterns that support your learning content.

By building these patterns into your design system and library, you’ll ensure that students and teachers alike can worry less about learning how to use your product—and focus more on learning content or practicing new skills.

Take our recent design of Starwriter, a handwriting instruction app for young learners, as an example. The entire design system only incorporated one button for students to interact with, a blue button with a white arrow. 

Because of design system documentation, designers and developers knew to place this button either in the middle of the screen or on the bottom right corner of the page.

It’s especially important to make and document these design choices when creating edTech products for young learners. 

Students who cannot yet read must know when and where to expect a simple interaction, so they can focus on learning content—not how to use an application.

edTech design systems and grade levels

In addition to documenting specialized components for learning content, an edTech design system also emphasizes color, typography, and theme. 

Each of these design elements will look very different by grade band. For instance:

Lower grades
For young learners, your design system might incorporate buttons with iconography rather than text. You can also expect bigger typography and brighter colors throughout the entire system. Overall, design systems for products targeted to lower grades are simpler because the interactive and content demands are less complex.

Middle school
UI decisions that appeal to and support middle school learners pull from design approaches for both lower grades and high school learners.

High school
Learners in high school appreciate design choices that make them feel a little more “grown up.” They might be teenagers or young adults, but they don’t want to be talked down to—even through visual language.Design systems for products aimed at high school students are often more complex.

edTech design systems and accessibility

All product design systems address accessibility in some way, but in educational settings accessibility becomes even more important.

Your design system will likely include a set of components dedicated to user settings, including:

• The ability to increase font size
• The ability to change color modes from dark to light
• The ability to turn on screen readers
• And more

Ideally, this section also has dedicated documentation to support design and development teams as they make decisions that affect accessibility for teachers and learners.

Assuming you’ve done the upfront work of designing highly accessible components as you go, your team can ensure that new design work is accessible from the start.

How design systems create ROI by optimizing for development hand-off

Throughout my years of experience, clients consistently underestimate the needs of developers. 

Translating designs into front- and back-end code requires extensive knowledge and labor. Simply following a style guide won’t cut it.

With a design system in place, you’ll provide developers with the extensive documentation they need to do their work well.

Design systems also use components that connect to real code snippets, optimizing the process for your front-end team. 

Tools like Storybook and ZeroHeight are great places for design and front-end dev collaboration, making this process even smoother.

Design systems also make processes like quality assurance easier and more efficient for everyone. Because you’ve already used the code many times, your design and dev teams know it will work.

But building a design system isn’t just about optimization. It’s an investment in maintaining the full lifecycle of front-end code and design UI—all while improving the quality of your learning tool.

Why you should invest in a design system

I know you constantly face challenges around bandwidth, timelines, and budgets. 

edTech product design requires prioritizing roadmap features, and it can be hard to make a case to move design infrastructure to the top of that list. 

But design systems are key to growing sustainably in the future.

With a design system in place, you’ll experience:

• Shorter design and development timelines
• Stronger collaborations with other stakeholders, like your learning content team
• Faster alignment on strategy, as the design team can bring stakeholders working prototypes more quickly
• More ease onboarding new designers and developers, thanks to the level of documentation a design system provides

In order to increase buy-in for your own stakeholders, you may even wish to emphasize time and cost savings by department. For instance:

• • In the design department: Designers become more consistent in how they solve user experience challenges, use consistent patterns to support user needs, and design with brand cohesiveness in mind. You can also onboard new designers very quickly to your entire brand or to individual products.
  • In content: When content teams have access to repeatable components, the iteration process for content becomes more flexible—and it becomes easier to build prototypes for proof-of-concept.
  • In front-end development: Because design components are coded the same way, their performance is consistent, saving your development team on time and labor.

By front loading your product design cycle, you’ll benefit from the investment in a well-documented design system for the next five to 10 years. 

Whether you’ve inherited new edTech products during an acquisition or you’re rolling out new features for your learning tool, a design system helps you streamline the entire design and development process.

Find out more about how we can help you build a sustainable design system for your learning tool—contact us below!

This is part two of our ongoing series about edTech industry shifts in at-home learning. To check out the whole series, click here.

Even though we’re still social distancing and guiding our kids through at-home learning, we also have an obligation to teach children about the world outside our apartments and homes. Increasingly, this means addressing the protests of police killings of Black people, including the murder of George Floyd by Minnesota police.

Our children likely have questions about the number of protests they see on the news or in their communities. Older teens with their own mobile devices or access to home computers may even seek out answers — and traumatic footage of police killings — on their own.

Before our children go back to school and begin interacting with their classmates, we can teach them the importance of understanding Black history and struggle in age-appropriate ways. Conversations about systemic inequality and injustice are never easy, but the right books, tools, and digital resources can make them easier.

We talked to Tiffany Le, an emerging school counselor, and Alyssa Catolico, an elementary school teacher, about the best online resources for talking to your kids about race. We encourage you to click, read, and buy books or resources from Black-owned bookstores whenever possible. (You can find lists here and here.)

Anti-Racism Resources

For young children

• PBS Kids, Daniel Tiger: Life’s Little Lessons
  • Videos, activities, and resources to help teach your preschooler about being “alike and different.” 
• Zootopia, Disney
  • Disney’s Zootopia, available on Disney+, explains prejudice in family-friendly, accessible ways. Use the film’s bullying scenes to discuss how it feels (or how it would feel) to be called out and made fun of for being different.
• Racism and Violence: Using Your Power as a Parent to Support Children Aged Two to Five
  • Learn how to navigate difficult questions on racism, including “Are police officers good or bad guys?” and “Why are people being mean and hurting others?”

For K-3

• Healthline Parenthood’s “Anti-Racism Resources for Parents and Kids”
  • This article includes lists of books, social media accounts to follow, podcasts, digital resources, films, tv shows, and videos to share with your kids.
• CNN and Sesame’s Street’s town hall on racism 
  • CNN recently partnered with Sesame Street to explore what the nation is going through and explain how kids can fight racism. The special also addresses who to call for help in times of police brutality.
• How to Teach Kids to talk about Taboo Subjects
  • In this TED Talk from 4th-grade teacher Liz Kleinrock, the educator shares how she teaches kids to discuss difficult subjects without fear.
• Talking about Race
  • Resources for educators and parents from the Smithsonian Museum.
• Anti-Racism Books for Counselors & Educators Supporting Black Children
  • A curated list of books about anti-racism created by Tiffany Le, an emerging school counselor.
• Talking to Kids about Black Lives Matter
  • A GoogleDoc resource prepared by a school counselor. 
• Black Lives Matter Instructional Library
  • A library of children’s books about activism, advocacy, empowerment, and Black history. All books link to read-aloud videos. Spanish translations of select books and additional resources are also available.

For Grades 4+

• Bored Teacher’s “50 Books About Race for Kids & Young Adults to Read Right Now”
  • From picture books to middle grade readers to YA classics, these books are digestible and literary explorations of race and police brutality. 
• A Unit to Teach Kids About Microaggressions
  • This lesson plan will challenge your kids to identify microaggressions and stereotypes about Black, Indigenous, and People of Color (or, BIPOC), regardless of how harmless these comments may seem on the surface.
• Civil Rights, explained by BrainPOP
  • This five-minute video about the Civil Rights Movement is appropriate for middle school-aged students and higher.

For educators 

• Anti-Racism Resources for all ages 
  • Curated by Dr. Nicole A. Cooke, this project includes videos, book recommendations, and tips for starting conversations that spark social change
    

In addition to sharing age-appropriate resources with your kids, consider tackling other action items and activities, like:

• Asking your child to choose an organization to donate to and making a donation together.
• Scheduling Black history story time. Remember that Black history extends far beyond stand-alone lessons about Martin Luther King and Rosa Parks!
  • After selecting the books that you would like your child to read about anti-racism, give them the opportunity to choose which one they would like to read or listen to first.
• Initiating discussions with your child and asking them if they’ve seen or experienced moments of racism in their schools, friends, loved ones, or within themselves. Encourage them to share any moments when they believed they might have been racist too. Part of the process of becoming an ally is unlearning the unconscious biases we grew up with. Challenge your kids to set goals and expectations to help combat these thoughts. Speaking about racism should not be limited to Black communities.

Thanks for taking the time to use these digital resources to have difficult, necessary, and educational conversations with your children. Racist abuse, police brutality, and violence against Black people can be prevented through better education, understanding, and reflection. Let’s do the work together. Change begins at home.

Written by Cassandra Balbas

—-

Cassandra Balbas is a UX and graphic designer with a passion for designing tools that help educators and students reach their goals. After graduating from the University of California Irvine with degrees in Informatics and Art, she returned to UCI to manage and mentor the design teams in the Student Government Student Media department. She worked closely with students to produce inclusive visual design, make student resources more accessible, improve mental and physical health, and foster a well-rounded university experience. In addition to working with college students, Cassandra has worked in product design, nonprofit design, and marketing. When she isn’t designing, you can find Cassandra roaming bookstores or browsing through photos of pugs.