Designing a Better Learner Experience in edTech: How to Reflect Pedagogy through UI

Sean Oakes bio picture Sean Oakes

Menus and navigation systems are easy to overlook in edTech products. Users might not notice an effectively organized menu at all, but they’ll feel the pinch of a badly designed one right away! If you want to design a better learner experience—start there.

Below, we’ll show you how we organized three learning tools to reflect content goals and support users. We’ll also help you ask the right questions during discovery to organize your learning content more effectively as you go.

This way, you can identify incredible navigation sequences that reflect the goals of your learning content for a better overall user experience—and a more supportive UI. Ultimately, this strategy helps declutter menus, organize content more effectively, and signal to users what they can expect from your edTech product.

Stronger Relationships Between Product Navigation and Pedagogy Support Learners

As a product designer, you never want to cram too many things into a navigation bar. But you also don’t want to make it difficult for users to find the features they reach for again and again to meet their goals. It’s a tough balancing act!

In edTech, these challenges are even more pronounced. Designing a streamlined navigation menu may lead to a clean, simple UI—but it might not support the best learner experience within your product. 

After all, edTech products should support the pedagogical goals of your learning content. This process starts with the fundamentals of UX and UI design: product structure. 

UX discovery sessions are one way to proactively tackle this challenge. Devote time to your navigation sequence during the initial phases of product design by using these two steps:

  1. Ask your team to distill core elements of your product’s pedagogy down to three or four main ideas. 
  2. Try using the main ideas as a navigation sequence. The steps of using your learning tool—and the ideas behind the learning content—should now be reflected by your menu or site map.

By using this strategy, you’ll:

  1. Help teachers and learners understand your product’s goals quickly and easily, and
  2. Design a product that has a more active structure and a more active user interface (UI)

Ultimately, a good edTech product has a menu sequence that helps users understand how a learning tool works—not just where they should click to navigate your tool. 

By creating a closer relationship between your navigational structure and the pedagogy behind your learning content, you’ll design a UI that better supports your users—and a stronger overall learning experience. 

Organizing Resources for an Optimal Learner Experience

How often have you been tempted to add a catch-all category in your menu called “Resources” or “Support” and call it a day? Sometimes these are the exact right labels. Other times, unfortunately, these menu items often become a repository of unorganized stuff.

This approach leads not only to clutter within your product, but it also makes the learner experience less guided and intentional. Instead, consider the strategies below.

Active menu structures

Creating a more active menu structure using the principles behind your learning content offers one way to solve this design challenge.

After all, there’s a difference between building an edTech product and creating a resource repository. Remember: effective learning tools are useful and interactive. They’re not just a library of .PDFs.

Labels, UX writing, and mental models

Don’t discount the importance of micro copywriting as you navigate this challenge, either. UX copy is experience design, and the words in your menu must speak to the intention of your learning tool. 

After all, strong labels help users create a mental model of how your product works and how to get where they need to go. And they help product designers move away from unhelpful, inert categories.

How Mission U.S. Used Simple Navigation to Appeal to a Wide User Base

The home page of "Mission US," an educational app that supports the learner experience with strong product navigation choices.
The homepage of “Mission US” supports the learner experience with strong, clear product navigation choices driven by user need.

When WNET Thirteen approached Backpack Interactive to redesign the website for their award-winning educational games and materials, Mission U.S., we knew navigational structure would play a large role in helping teachers, parents, and students use the platform.

Mission U.S. transports students to key moments in American history through choose-your-own-adventure scenarios. The new navigational structure, “Play,” “Teach,” and “About,” ultimately makes it easy for each user to self-select the content area that’s most relevant to them.

The menu also reinforces the idea that there’s an educational component to playing Mission U.S. for first-time users. This includes parents unfamiliar with the game or teachers researching the game prior to classroom use. The menu immediately indicates that these games can be used in the classroom, giving the product both educational legitimacy and value.

In addition to creating a more interactive experience, the navigation suggests how learning content is sequenced in the product. This detail further supports teachers who wish to integrate the content into their classroom.

How Listening to Learn Product Navigation Supports Teachers Documenting Student Process Skills

The simple, clear navigational structure of "Listening to Learn" supports educators as they improve their interviewing and assessment skills.
The simple, clear navigational structure of “Listening to Learn” supports educators as they improve their interviewing and assessment skills.

The Heinemann product Listening to Learn is designed to support teachers as they assess students’ numerical reasoning skills through oral interviews. From the navigation bar, this rich professional learning tool needed to communicate to teachers a sequence of activities. 

As the order suggests, first teachers conduct interviews, then they might learn additional interviewing strategies, run a report on classroom performance, or practice their interview techniques in the “Labs” section.

This user-friendly approach helps teachers quickly understand what they need to do, and where they need to go to accomplish each task. The language and approach is also integral to the pedagogy behind the tool, which is based on using interviews to assess the process skills students need to complete math problems.

Finally, even for a complex tool, the language in the menu is simple and easy to understand. Compared to long or overly descriptive titles, this user-centered approach to UX copy better supports users as they make mental models of the site navigation.

How the Product Navigation for NSGRA Helps Teachers Implement Reading Assessments

The NSGRA menu structure helps educators follow assessment tasks in a specific order.
The NSGRA menu structure helps educators follow assessment tasks in a specific order.

Scholastic’s Next Step Guided Reading Assessment, or NSGRA, helps teachers accurately determine their students’ reading levels. The tool also provides teachers with insights into how individual students are developing as readers, as well as targeted resources for improving reading skills. After collecting assessment data, teachers create reports and group students in their reading classroom.

When Backpack Interactive designed this tool, we ensured that the navigation sequence reflected the order of operations for teachers. Conducting assessments, running reports, and creating student groups are the most important tasks for the user, while the resources section provides additional support. 

Because of the importance of navigation to the NSGRA, we conducted rigorous user tests in real classrooms. In particular, we used UX prototyping to test sequences and collect teacher feedback on the tool’s navigation. Then, we applied user feedback as we headed into final designs.

4 Ways to Identify the Best Navigation Sequence for Your edTech Product

You’re about to start designing a new learning tool that showcases the hard work of subject matter experts and your content team. How can you use early stakeholder discussions to uncover the best navigation sequence?

We’ve led countless discovery sessions to figure out this exact challenge. Here are four questions you can ask to help your product team organize learning content more effectively and create a great learner experience through UX and UI design choices.

1. What is the classroom sequence for teaching or learning this concept?

Consider the steps that go into teaching this concept in the classroom. If the product is student-facing, what are the steps students need to take to learn this new concept? If there’s a way to name and quantify those steps, use this as a jumping-off point for product navigation.

By doing this, your navigation will give users an at-a-glance understanding of how the product works, as well as what to expect next. That’s context and an organizational structure in a simple glance.

2. Does an “active” navigation system work for this content?

While active verbs like “teach” and “plan” can be excellent menu titles, this strategy doesn’t work for all edTech products.

If you attempt this type of navigation system, make sure there are equal and reasonable amounts of content in each area. If 90% of your content winds up in one area of the product, you may need to add sub-navigation or use an alternative form of navigation.

With enough desk research and collaboration with your content team, you can determine whether this model is the right choice for your learning tool.

3. Is this a pattern we can follow in the rest of the product?

Product menus set up user expectations, and users make predictions about content and sequence based on your design choices. 

For example, a pattern like “Pre-test,” “Unit,” and “Post-test” would imply that teachers are expected to give a pre- and a post-test for every unit of content.

No matter what pattern you choose, it’s important to maintain that pattern throughout your learning tool. This way, users understand where they are, how much progress they’re making, and what comes next.

These mental models are especially important in the classroom because they affect timing: do teachers have enough time to complete the sequence they’ve started? If you’ve chosen the right pattern and sequence, the answer is hopefully yes!

4. What do users need to know to make your content library more effective?

Some edTech products provide a collection of resources for their users. Helping teachers or students access those resources in an intuitive way is crucial to this content area’s success.

For large libraries, use common UX patterns to make navigation within the area as clear and easy as possible. Is there a place where teachers and learners can start so the library is less overwhelming? Is there context your users should know before they dive in?

By conducting user interviews, you’ll ensure that you make this content area a proactive source of support, rather than a last resort for answers or resources.


No matter what kind of learning tool you’re designing, users need a simple, easy-to-navigate menu that helps them understand what to do—and why they should do it in a specific order.

Use your discovery process to uncover more details about the teaching and learning sequence in real classrooms. You’ll be set up for success as you design a UI that reflects the pedagogy of your content, creating a stronger learner experience overall.

Are you re-thinking the navigation or content sequencing of your learning tool? Contact us below to find out how we can help!

UX for Kids: Designing Inclusive, Engaging edTech Experiences

Sean Oakes bio picture Sean Oakes

As the edTech market becomes more competitive, your digital learning tools have to tick a lot of boxes. Thoughtful UX design for education must support both students and teachers in the classroom—all while being inclusive, engaging, and fun.

Below, we’ll help you identify which design elements make educational products stand out from the crowd. From choosing inclusive illustrations to designing features that promote learner agency, here’s how to design digital learning tools that support real learning outcomes.

Making Inclusive UX Design Choices for Education Products

The greatest edTech products celebrate inclusivity. By encouraging creative design solutions and fostering user engagement, inclusive content is a win-win for product design teams. Here are three ways to support user journeys, while making more inclusive and engaging design choices:

  1. Diversify Your Learning Content & Illustrations

    Inclusive learning content includes everything from characters with diverse backgrounds to multilingual experiences and thoughtful, accessible microcopy. Learning tools with a diverse set of imaginative or unexpected characters are also more engaging and less generic. 

    As products like Duolingo and Lalilo demonstrate, learners can just as easily find common ground with a strong cast of monsters, animals, or other creations. In other words, you don’t have to design human characters to make your learning
    product inclusive or engaging.

  2. Lead with Accessible Design

    Accessible design is a crucial component of designing inclusive edTech experiences. Even seemingly simple elements like log-in screens can create unintentional barriers for student users. 

    The product designers behind learning tools like ClassDojo understand this well. Their scannable QR codes are just one way to simplify the login process for young children. Other UX customizations for kids, like adjustable text size and text-to-speech integrations, offer students more options for engaging with learning content. 

    For students with learning differences, audio books and other forms of alternative content can also be a great way to support real user needs. Ultimately, by integrating accessible design into your edTech product, you’ll make your product more accessible and engaging for everyone.

  3. Examine Your UI & Visual Design Choices

    When navigation is more visual, rather than textual, it becomes easier for learners to overcome barriers and move through your product intuitively. Take the math product, ST Math, for example. In order to support students who have difficulty reading, ST Math eliminates text from its visual puzzles and games entirely. 

    By reducing the amount of time users spend reading within your UI, you increase accessibility and engagement. That’s true even if you’re designing a reading-focused product! After all, your users shouldn’t have to spend time figuring out your UI. The less users notice or consider your UI choices, the more effortless their experience. 

More Engaging UX Design for Education 

As product designers, we all understand the importance of engagement. But when it comes to design for education, engagement for engagement’s sake will only take you so far. 

By offering real-world context, instilling a sense of agency, and fostering curiosity, your digital learning tool will support students throughout their experience—and, ultimately, be more relevant and engaging. 

Help Learners Make Real-World Connections

edTech software can do so much more than keep students “busy” during classroom down time. 

Learning tools offer students crucial opportunities to practice new skills and explore real-world applications. But that’s only possible when product owners help students draw these connections through well-designed learning content and sequences. 

Take software company Newsela, for example. They develop authentic, engaging, and actionable content for multiple subject areas based on real-world sources. This approach helps students understand the relevance of content in more meaningful—and effective—ways.

Increasing Learner Agency with Goals & Feedback Systems

Goal-setting features and other feedback systems also help students develop a sense of agency. Tracking and reaching goals builds intrinsic motivation and leads to even greater engagement with your edTech tool. 

But increasing motivation is about more than improving your metrics. When products encourage students to take control of their learning, they develop more persistence and grit. After all, if a teacher hasn’t decided whether your answers are “right” or “wrong,” your successes feel well-earned and even more personal.

Develop Authentic Student Motivators

By building bigger, more engaging narratives around positive feedback systems, you’ll support student motivation. The combined effects of “little” motivational nudges, like earning a badge along the way, with “big” motivational nudges, like earning a series of badges to unlock a new level, work together to help students achieve real progress. That’s exactly how products like Duolingo capture the interest of so many users—and keep them engaged over long periods of time. 

As you explore bigger narrative sequences in your edTech product, it’s crucial these narratives feel authentic to your student users. For example, supplemental vocabulary programs like Alphabeat build engagement by incorporating hip-hop into lessons. These tools help learners with speech impediments overcome barriers with beatboxing. As Alphabeats demonstrates, helping students connect to a lesson in an authentic way makes your product more meaningful—and more fun.

Foster Student Curiosity

Many indicators of successful learners, like grit, are borne out of curiosity. The same student who wants to read to the end of a new book on their own is motivated to learn a new word along the way.

As product designers, it’s our job to make sure learning software isn’t getting in the way of interesting learning content. By creating more opportunities for low-stakes learning, we can make learners more resilient and curious.

In our product design for Scholastic and LEGO’s Passport to Mars collaboration, for example, we ensured that learners had plenty of agency to explore content in both a linear and nonlinear order. Students complete exciting tasks and earn badges for choosing their crew, building a rocket, landing on the surface of Mars, and growing a sustainable farm. 

No matter how learners decide to tackle these low-stakes learning activities, Passport to Mars fosters their curiosity and creativity. As our design underscores, the rewards of sandbox learning, or playing as much as you want to play, are in the learning process itself. 

By giving students more opportunities to explore in a low-stakes learning environment, you’ll encourage them to try, fail, and try again in real time—all while boosting engagement within your product.

Design for Education by Addressing the UX Needs of Your Teacher Persona

Inclusive, engaging edTech experiences aren’t just designed by making strong UX choices for kids. It’s crucial to consider the experience of your teacher persona, too. 

By focusing on content and sequencing that supports classroom management, delivers professional resources, and streamlines student assessment, your digital learning tool will engage teachers and support real needs in the classroom.

Support Classroom Management and Student Practice

At its most engaging, edTech extends teaching moments between a teacher and their classroom, making a teacher’s time with students even more effective. 

No matter how skilled a teacher may be, there are constantly moments in classrooms when students don’t yet fully understand instruction. Most often, students experience a disconnect between learning a new concept and completing activities designed to help them practice that concept. 

That’s where strong UX for kids comes into play. Classroom time is valuable, and digital tools can’t afford to waste time or create busy work disconnected from the curriculum. Digital experiences that offer meaningful reinforcement of teacher instruction give students real opportunities to practice new concepts.

Teachers want to be able to count on high-quality, engaging software to assist them with classroom management, too. Large class sizes mean there will almost always be students who aren’t working one-on-one with teachers. For those students to stay meaningfully engaged with a learning tool, your edTech product must offer a fun digital experience that supports both the curriculum and teacher instruction.

When you support teachers with high-quality, relevant learning content, you’ll help them develop meaningful routines that include your product and build student engagement.

Provide Professional Resources

Unlike student users, teacher engagement isn’t about earning badges or other digital achievements. But it is about making professional development quick, easy, and digestible. By using plain language and easy-to-understand, digestible stories, your digital professional resources can erase barriers to understanding and implementation. 

After all, if teachers are engaged by the professional resources or curriculum support in your product, it is far easier for them to use a curriculum with fidelity. You can facilitate this with just-in-time learning incorporated directly into your product. In contrast to an hours-long in-person PD course,  a three-minute video might model what a teacher can do in the classroom—exactly when they need the support.

“Teaching with fidelity” doesn’t have to be overly formal or scary. If your professional resources are authentically related to how teachers prepare and teach lessons, following a digital curriculum becomes even more about supporting student needs—and spending more quality time on instruction.

Ease Pain Points Around Student Assessment

Formative assessment is demanding. It takes time and skill, and even the best teachers find that it disrupts regular classroom instruction. Because, unlike technology, teachers aren’t scalable! They need to be present to instruct their students, and in-person assessment demands that teachers step away from whole-class or group instruction.

The more teachers use technology for formative assessment, however, the more they receive quick but meaningful insights into their students’ learning. These insights can both inform and change instruction. With more detailed pictures of student reasoning, teachers have more choice in how they’ll address specific learning challenges—and more time to instruct.

Inclusive, engaging product design for education isn’t just about creating a delightful interactive experience or making strong UX for kids design choices. It’s about designing great content and authentic, appealing narratives. Whether that’s through a game or a content sequence, learning content that promotes learner agency boosts student engagement and helps teachers develop meaningful routines that include your product.

Because teachers are just as invested in UX for kids as we are. They already know how to tailor their instruction to specific cultures, contexts, and student needs. When you create narratives that reflect the world students live in, you support teachers’ efforts to make tough subjects easier and more enjoyable—and, yes, more engaging, too.

Are you trying to increase student engagement in your edTech product? Contact us to find out how we can help!

Digital Project Manager

We’re hiring!

Backpack Interactive is a small but mighty strategy, UX/UI and edTech design studio. We are committed to serving our educational and non-profit partners with products and interactive experiences that support educators and learners where they are. We look to hire the very best problem solvers we can find to join our award-winning team.

You’ll be responsible for managing 3-5 projects (depending on duration & complexity) across the product/development cycle. You’ll work collaboratively with the Backpack team, developers, and partners to make sure products meet their user experience and educational goals, while also delivering on time and within budget. This role demands thoughtful interactions with teams, a close eye for detail, the optimism to creatively solve problems and the ambition to take projects from start to finish.

If you’re an experienced project manager who sees the big picture, revels in the small details, and is eager for the opportunity to learn, grow, and contribute to great work in a low-ego, maker-centric environment, then we should talk.

Skills and qualities we look for:

  • No less than 2-3 years of account, project, or product management experience
  • A resume that demonstrates your organizational & creative problem-solving abilities
  • A very good sense of how to manage timing of deliverables and project budgets 
  • Excellent written, verbal, and visual communication and presentation skills
  • Demonstrated ability to manage internal and external team dynamics
  • Experience using project management process and tools i.e Agile & Asana 
  • A general understanding of the end-to-end interactive design process
  • Willingness to jump into projects as needed (i.e. support with client agendas, )
  • Confidence in your expertise and perspective, but eager to learn from others
  • A passion for working collaboratively
  • Big plus: experience managing projects for kids, education or games
  • Biggest plus: classroom experience 

To apply for this position, please email hello@backpackinteractive.com with your cover letter and resume. Applications without cover letters will not be considered. The position is for full-time work.

UX/ UI Designer

We’re hiring!

Backpack Interactive is a small but mighty edTech strategy, UX, and UI design studio. We are committed to serving our educational and non-profit partners with products and interactive experiences that support teachers and students where they are. We look to hire the very best design thinkers and problem solvers we can find to join our award-winning team.

You will be responsible for creating smart UX and then turning that into beautiful, production-ready UI designs. You’ll work collaboratively with the Backpack and development teams to make sure products and experiences meet user experience and educational goals while pushing design to the forefront. This role demands thoughtful execution, an obsession with quality, the optimism to creatively solve problems while keeping the user in mind, and the ambition to take projects from start to finish.

If you’re an experienced designer who sees the big picture, revels in the small details, and is eager for the opportunity to learn, grow, and contribute to great work in a low-ego, maker-centric environment, then we should talk.

Skills and qualities we look for:

  • 2–4 years of professional UX/UI design experience (solid UI work is a must)
  • A well-organized and relevant portfolio that demonstrates your visual design skills and creative problem-solving abilities
  • Strong visual design and typography skills (this is not a UX-only position)
  • An understanding of the end-to-end interactive design process
  • Willing and able to jump into a project at any point and support on different design needs (i.e. UX, UI, Production)
  • Experience using appropriate UX methods and design thinking to inform solutions
  • Attention to detail
  • Expertise using and/or similar digital design tools (i.e. Figma, Sketch, and Adobe XD)
  • Familiarity with Zeplin and experience with prototyping tools (i.e. Marvel or InVision)
  • Excellent written, verbal, and visual communication and presentation skills
  • Confidence in your expertise and perspective, but eager to learn from others
  • A passion for working collaboratively
  • Big plus: experience designing for kids, education, or games
  • Bonus plus: classroom experience

To apply for this position, please email jobs@backpackinteractive.com with your cover letter, resume, and a link to your online portfolio. Applications without portfolios and cover letters will not be considered. The position is for full-time work.

Let’s build the future of digital products together.