Blog Archives

Latest Posts

Monthly

Categories

All Posts in Product Development

Featured Image

August 12, 2020 - No Comments!

How Universal Design for Learning Principles Improve edTech Tools for Every User

Now more than ever, parents and educators are searching for edTech products that target instructional gaps revealed during this past spring’s unprecedented dive into remote learning. For parents and teachers of students with special needs, identifying software for special needs education takes on even more urgency.

During remote learning, special educators must manage the unique needs of each of their students virtually while facing limitations to one-on-one instructional time. Students with special needs require structure, consistency, and differentiated support to reach their individual goals. Additional barriers, like family access to technology, prevent special needs students from receiving the consistent, immediate feedback they require to thrive.

In many ways, students with special needs are ideal edTech users. Through edTech products, students receive self-paced learning, immediate feedback, explicit instruction, and can even replay or reread content on their own time. When you ensure that your learning products are not just inclusive but accommodating to students with special needs, you improve usability for all learners.

Quite simply, everybody wins.

Evaluating Your edTech Tool Using Universal Design for Learning Principles

The UDL framework is based on the most frequent finding in educational research: every learner responds differently to instruction.

According to the Center for Applied Special Technology (CAST), UDL highlights individual differences and seeks to understand their impact on the learning process instead of ignoring variations as errors. Understanding these differences is critical to designing both effective instruction and impactful edTech products.

Applying a UDL framework to edTech products ensures that features align with educational best practices. This improves the UX for all students, while also being especially effective for students with special needs.

UDL guidelines also support personalized learning, which is “tailored to [students’] individual needs, skills, and interests, and enable[s] them to take ownership of their learning.”*

Typically, edTech tools implement personalized learning and adaptive features effectively. Applying UDL guidelines can only strengthen these features and make them more accessible for all users.

How the UDL Framework Helps You Design Software for Special Needs Education

Meeting accessibility benchmarks is crucial in edTech, but there are additional benefits to using the UDL framework in product design. By meeting more students where they're at, you'll improve the UX for all of your users. After all, that's our goal as UX designers!

New to applying UDL principles to edTech tools?

We've broken down how providing multiple modes of engagement, means of representation, and means of action and expression will make your next learning tool more accessible for students with special needs.

Provide Multiple Modes of Engagement
  • Maximize student choice and autonomy with customizable rewards and badges, as well as personalized color palettes, themes, or layouts. This is especially important for students with special needs who may have adverse reactions to specific colors. For example, students with autism spectrum disorder experience strong physical reactions to the color red.
  • Design labels with clear graphics to address the needs of multiple learners at once.
    Allow students to customize activity timing and sequencing.
  • Increase self-advocacy by allowing students to set their own goals.
  • Design opportunities for self-reflection and response. For example, create an informal post-activity "quick check" to allow students to assess their own comprehension and record any lingering questions to return to later.
  • Include visual representations of activity flows, like task lists or timer visuals, to make the activity predictable.
  • Include customizable options for alerts and tool tips for students who require support transitioning between activities.
Provide Multiple Means of Representation
  • Beyond ensuring your product meets WCAG 2.1 and accessibility standards, there are additional considerations that optimize user experience for all learners:
    • The ability to customize text size, volume, font, or notifications to offer appropriate presentation of materials for specific learners.
    • The ability to customize reading levels for content. For example, high school students using an app to learn high school content may actually read at a first or second grade reading level.
    • Captions and written transcripts for video and audio, as well as speech-to-text for spoken language.
    • The ability to enable vibrations instead of sound effects or alerts, as well as alt text or spoken descriptions for images and animations.
  • Build a vocabulary feature. With hover, click, or hyperlink interactions, a user can determine the meaning of unknown words.
  • Ensure that critical information and vocabulary is available in first languages for students and provide the option to customize the language of the product's dictionary.
  • Alleviate frustration for students who struggle to decode by utilizing audiobooks.
  • Use explicit prompts for sequences or step-by-step instructions. As with design choices, written content should be clear enough for students on the spectrum who may struggle with metaphorical or playful language.
Provide Multiple Means of Action and Expression
  • Design activities that allow students to solve problems using a variety of strategies.
  • Utilize a gradual release model that scaffolds for students when they struggle with a specific activity or question. Provide immediate, explicit feedback when possible.

Whether you're rolling out new products for the fall or strengthening your existing tools, UDL principles are ideal benchmarks. The UDL framework helps you design accessible edTech software and support the learning goals of every student. After all, our goal as edTech designers should be to create accessible software that meets students where they are—no matter what their needs happen to be.

---

*Source: Students at the Center Overview: Engaging All Students in College, Career, and Civic Success (Boston, MA: Jobs for the Future, 2013). Print.

Featured Image

July 22, 2020 - No Comments!

Are Your Products Remote Learning-Ready?

The data is in.

According to The New York Times, the last four months of at-home learning have only highlighted the steep divides in American education.

"New research suggests that by September, most students will have fallen behind where they would have been if they had stayed in classrooms, with some losing the equivalent of a full school year’s worth of academic gains," writes national correspondent Dana Goldstein.

We've always known that the most important dynamic in the classroom is the relationship between teachers and students. While edTech isn't the solution to the systemic inequality exacerbated by at-home learning, it can give teachers better tools for reaching students at home, collecting work created offline, and tracking student performance.

When edTech designers understand the technological ecosystem of teachers and students, we are better able to identify the challenges of unevenly distributed technology and anticipate the unpredictability of learning at home. We can design remote learning solutions that are lightweight and easy to use, with robust online and offline capabilities.

What's a Remote-Learning Ready Tool?

When we say a tool is "remote-learning ready," we're not talking about self-guided learning tools students use on their own.

"Remote-learning ready" tools work effectively, even with uneven infrastructure. They provide teachers with features that augment how students interact in real classrooms, helping students to develop SEL skills and engage directly with content and concepts. "Remote-learning ready" tools are interactive and adaptive tools for teachers and students alike.

Whether you're redesigning tools for fall or creating new tools that are remote-learning ready right out of the box, here's why you should leverage features that support the challenges of teachers and students learning from home.

Break through Social Isolation and Encourage Collaboration with SEL & Collaborative Features

Tools with collaborative features that promote social-emotional growth are now more important than ever. Because learners have been physically separated from their peers and their teachers, they may feel more isolated or lose touch with the collaborative elements that improve academic outcomes through SEL.

By creating remote-learning ready tools that allow teachers and students to deepen their relationships, you drive engagement and ensure greater efficacy. SEL and collaborative features are crucial for developing peer relationships, too.

Whether students post work to a class feed or teachers encourage peer feedback, learning tools that foster discussion and create a rich, social community around subject matter inspire both meaningful conversations and learning. SEL and collaborative features also nurture an online culture of kindness, create more respectful and effective learning environments, and foster a sense of good digital citizenship.

In Backpack Interactive's work for Scholastic's Literacy Pro, for example, students have the opportunity to review books and communicate directly with their teachers. This feedback process gives students agency over their work and reading goals. Because this is an independent reading program, the stakes are also much lower than graded assignments and students are empowered to be more candid

The digital environment of Literacy Pro encourages this openness and facilitates student-teacher connection. We created an interactive scaffolding around each book, so teachers can do more than assign students a book they think the student will enjoy. They can also create a one-on-one book club, interact with reviews, and help students foster a love of reading.

Our goal as edTech designers is to help teachers develop well-rounded students who can collaborate in other settings. When you create ways for students to talk and resolve conflict or develop systems for learners to monitor and reflect on their own progress, you design better, more effective SEL tools. These better, more effective SEL tools just happen to facilitate the interactions teachers and students need most during at-home learning.

Help Teachers Explain Complex Concepts from Afar with Interactive Features

Our approach to designing tools for the classroom has always been about creating better tools for teachers. Now that students and teachers are no longer in the classroom together, learning tools need to facilitate independent and asynchronous work more than ever before.

Teachers are still under the same pressure to deliver results remotely, and they need tools to help explain complex, advanced concepts — even when the class isn't meeting on Zoom. How can we make sure that remote learning tools still feel supportive? How can we facilitate more engagement between students and their subject matter, between students and their peers, and between students and their teachers?

While interactive games can be a good way for students to engage with and master content, teachers also need tools that make gameplay useful in the context of the classroom. Through our work for Mission U.S., we created teacher tools that help educators use the suite of history games more effectively and drive results in the classroom.

Whether you're designing a game or an interactive science experiment, all interactive tools for students should consider the instructional needs of the teacher. When you provide clear pathways for using materials in—and out—of the classroom, you facilitate higher student engagement—and provide tools for more meaningful instruction.

Direct Teacher Support and Meet Individual Student Needs with Adaptive Features

Without daily student-teacher interactions in the classroom, it's more difficult for teachers to assess a student's needs, redirect, or reteach as needed. In the absence of direct teacher-student interaction, edTech can provide adaptive tools for teachers that identify student trends and direct attention and support. AI-driven adaptive features might help teachers give student feedback or even prompt a teacher-parent phone call.

edTech designers can also use adaptive features to help students working at different speeds. Adaptive features provide more support for students who need it and more independence for the students who can handle it.

When we worked with Amplify to design the UI for their vocabulary game "Best Buddy," we created an interface that accommodated complexity. As students master vocabulary words, "Best Buddy" adapts to different levels of difficulty. Vocab words become more complex and nuanced as students fine-tune their understandings of definitions and help characters in the game. By designing a UI that combines two interactive patterns, content mastery and SEL, we were able to create a complex learning tool with adaptive features.

Even when adaptive learning software is used in physical classrooms, it's intended to meet students where they are. With the right framework, they can even promote SEL growth. After all, students who need more time benefit from interactions with students who are further along, and students who work more quickly benefit from considering the needs and challenges of their peers.

Asynchronous, adaptive features provide just enough of a challenge to keep students motivated and engaged by working at their own pace. During remote learning, adaptive features facilitate just the right amount of independence and teacher support.

Meet Existing User Needs with Mobile-Ready Professional Learning

Even before COVID-19 closed schools, surveys and user testing revealed that teachers want to engage with professional learning content on mobile devices. From an at-home learning standpoint, edTech designers have new opportunities to make high-quality products that fulfill existing needs for mobile-ready professional learning.

Teacher professional development often depends on offline tools, like binders and other paper-based resources. By leveraging technology to make a dynamic, interactive course, you may be able to engage teachers more effectively—and reach them on the devices they use most often. After all, interactive materials shouldn't just be reserved for students!

For example, when we designed the new "Healthy Kids, Healthy Futures" website for Nemours Health Group, we knew early childhood care providers would review the site on their phones. We designed the site's excellent learning content, including quizzes and action plans, by breaking up content into smaller, skimmable sections. We also introduced "show-hide" features that would limit scrolling on mobile devices.

If your revenue is tied to teacher professional development, especially in-person courses or seminars, well-designed online training programs may help make up for lost revenue during social distancing. The more robust, smart, and clear your pathways for digital instruction, the more you'll be able to leverage learning content that helps teachers fulfill their professional goals.

Featured Image

April 3, 2020 - No Comments!

Using Wireframes to Power Your UX Design Strategy

Product wireframes are one of the first strategic milestones of the design process. All stakeholders depend on them, including product owners, developers, and front-end design teams.

When designed intentionally, wireframes facilitate important decisions early in the UX process. They provide a visual record of discussions about big-picture product goals, user flows, and technical requirements.

At Backpack, we use wireframes throughout the iteration process to lead stakeholders through strategic conversations before moving to visual design. Using clickable wireframes and prototypes also helps us establish our workflow with technology teams and developers early in the process.

Here's a glimpse into the process we use with clients to create an ideal workflow for major stakeholders and other teammates.

How Wireframes Guide Stakeholders through Strategic Decision-Making

For product stakeholders, wireframes facilitate strategic discussions about big-picture needs and product goals. They reflect how the product should be organized and give stakeholders the opportunity to address whether your UX team has captured the most important features. Does your product need all the features represented in the first iteration of the wireframe? Or can your team simplify?

By sharing wireframes with stakeholders early in the UX planning process, you streamline top-down decision-making that benefits both your users and the product development team. Because wireframes reflect the implications of product design and UX decision-making, this tool helps stakeholders better understand the needs and expectations of your users. Has your UX team accurately reflected each user flow in the wireframe? Are features where your users expect to find them? Has your UX team named features in an understandable way? Has the team found a way around information overload?

At Backpack, we feel it's important to use wireframes to help clients envision key elements of each user flow and see how they'll work. We mock-up ideal flows quickly in clickable wireframes. By grouping information realistically for the user, stakeholders are able to imagine user experience prior to testing. This process also helps stakeholders anticipate content needs, including the photos, multimedia content, and other resources that will create the best possible user experience within your product.

As we designed the Literacy Pro app for Scholastic, wireframe iterations facilitated important top-level discussions about micro user flows for both teachers and students. How would teachers add and assign assessments? How would students access and take those reading assessments?

Using clickable wireframes ensured that each stakeholder discussion centered on user personas and the contextual flow of interactions. Because clickable wireframes reinforce the needs and expectations of the user, this iterative process set us up for success by the time we tested the product with Scholastic's users. After testing, we could iterate even more efficiently.

How Annotated Wireframes Facilitate Technology Discussions with Development Teams

Ideally, annotated wireframes help UX teams communicate more effectively with developers. This collaborative method helps your UX team think through the technical issues of each screen and gives your development team a chance to communicate when a design decision might be technically burdensome.

Facilitating these discussions early in the design process eases work-flow challenges — especially when you're managing multiple teams and vendors. Before they're ever given design files, your developers are able to structure the back end and hit the ground running once designs are confirmed.

Backpack uses wireframes early in the design process to communicate with developers about complex technical needs. We give developers every opportunity to vet the logic of the UI for primary user flows, typical interactions, and edge cases. Wireframes are an excellent tool for these teams to spot potential problems with back end logic or technical services before the product is built.

This was especially true for our work on Scholastic's Next Step Guided Reading Assessment, or NSGRA. This software encourages teachers to group students by reading level using a visual drag and drop interface. Visual design indicates to teachers that the UI is clickable and moveable, while the back end is designed to quickly accommodate any changes teachers make with just one click.

Our development team helped us think through the complexity of this design decision by annotating early wireframes. They asked smart questions about the interface's logic from a visual standpoint, as well as the implications visual design and UI had for data and reporting. Throughout this iterative process, our development team's input helped the design team create a clear and visually compelling UI and clarify software interdependencies. Without input from the developers early in the process, it would have been more difficult to arrive at the most intuitive solution for users or anticipate technology needs from the beginning.

How Wireframes Establish Style and Front-End Design Decisions

Front-end design teams depend on wireframes to establish style and design for the entire product. Approved wireframes serve as their road map for compelling visual design. When, where, and how will you display product features? Should you use a drop-down menu or a form? A complex calendar or a to-do list? Does your product need a dashboard?

As a creative firm focused on strategy, Backpack offers clients a design-led process. Visual design brings wireframes to life, illustrating design decisions and contextualizing content needs in a rich and nuanced way. Wireframes are also an important tool for communicating with our front-end development teams. Front-end developers need to understand the specific functionality of UI, as well as a product's logic. One of the only ways to accomplish this is to check interactions within wireframes and pass annotations back and forth between teams.

Our recent client project, the Wharton School of Business "Pivot or Perish" simulation, spurred an intensive back-and-forth with our front-end developers. While the simulation itself required us to design a small number of screens, the interface within those screens was highly transactional. This means that complex student learning happens within nuanced user interactions.

Communicating user interactions effectively to our clients demanded a hard-working wireframe. In order to ensure our front-development team also understood each interaction, we documented and wireframed each action separately and collected feedback on the logic of our UI.

During the visual design process, we defined the visual vocabulary of the product through specific color and shape palettes. Because we had already determined interactive elements throughout the wireframe stage, Backpack could successfully design user interactions that only made sense from a visual design perspective.

Ultimately, the extensive wireframing process for this product ensured that every team member — including our client, front-end developers, and Backpack's visual designers — was on the same page. By the time we arrived at the visual design stage, everyone was aligned on product functionality, and there were fewer visual design strategy issues to navigate together.

Testing User Flows and Capturing User Feedback in Real-Time

Wireframes also facilitate important discussions with your users about product categories and logic. Once your wireframes are connected together into a clickable prototype, you can test designs and capture feedback from users who depend on your product to solve a problem. Do your design decisions work? Can your users find expected features or design elements within your interface? Is information organized in a clear, understandable way?

Backpack regularly shares clickable prototypes with users to observe how they complete individual tasks. We analyze user interactions, document the challenges users face, and develop new strategies for incorporating user feedback.

During the product design process for the NSGRA, we tested clickable wireframes with 20 teachers. We went into the interview process knowing that users already faced very specific pain points. The product requires a lot of data entry, and we worked hard to improve that workflow to make it as quick and painless as possible.

We used Axure, a robust prototyping tool that allows for "WYSIWYG" programming, to show teachers specific micro-interactions within the NSGRA. They added hypothetical student data into complex fields and saw how the UI changed from screen to screen in real time. By interviewing teachers as they completed tasks, we collected helpful insights about the value of the product and made easy improvements to the workflow.

No matter which phase of the product design process you're in, clickable wireframes give you and your team the power to facilitate important strategic discussions. You'll ensure your stakeholders keep users front-and-center, ease technical discussions across teams, and drive user-centered design decisions every step of the way. The earlier you use wireframes to guide important decision decisions, the easier your build will be — and the happier your users will be with the finished product.

Featured Image

March 3, 2020 - No Comments!

Who Are We Making Our Products For? Designing across unique edTech personas.

There's plenty you already know about the basic needs and wants of your edTech audience. Teachers want tools that make their jobs easier. Administrators crave products with strong efficacy data. And students want learning tools that engage and delight, as well as instruct.

Unlike commercial applications, however, edTech software is not always used by the same people who make purchasing decisions. This makes designing an edTech product a special kind of challenge. Products often have multiple users with very different personas, like experiences meant for both teachers and students. But what happens if you put most of your resources into the student experience, leaving little time or money to create a delightful teacher experience, too? Budgets and turn-around times are real constraints for product teams, and these constraints can have an outsized effect on whether or not your product actually gets adopted in schools.

User Experience Research, or UXR, is the key to unlocking the primary user of your product without losing valuable time or resources. But in user-centered design for edTech, you can't just stop there. You have to understand the user's entire ecosystem, too. How is a teacher actually using your product in their classroom? Who are they thinking about as they enter student data or generate reports? Who's the next person they'll talk to about your product's output or analytics?

We spent some time chatting with Jessica Millstone, former Director of Engagement & UX Researcher for BrainPOP, about how to use UXR to narrow your edTech product design to specific user personas. Read on to discover the value of UXR as a preparatory lens for product design and learn how we use persona research to guide design conversations at Backpack.

[contentupgrade id="1011"]

 

How UXR guides edTech product design

User experience research is targeted quantitative and qualitative research that offers insights for both your product and your users. Because UXR moves you closer to achieving a specific product goal, you and your team should already know how you will apply UXR insights to your product when you begin the process.

"I think people know how important it is to collect real information about user needs," said Millstone. "But the rich, qualitative data product developers get from interviewing, surveying, and doing deep market research on their target audience comes with its own problem: volume and noise."

Strategic discussions about the primary user of your product cut down on the "volume and noise" of UXR. With so many different edTech personas in play, it's crucial to understand how your primary persona will interact with or serve other personas, from students to administrators to parents.

"The goal is to create a story, based on real data, about a person authentically using your product," Millstone adds. "The more specific the better! Personas are hands-down the best way to create a memorable imprint of your customer's needs that your team can connect with throughout the product design process."

Ultimately, a persona's environment and their specific audiences will resonate through the design decisions you make for the product itself. At Backpack, we call this effect "persona resonance," and we use it to identify the interactions between our primary persona and their audiences. UXR uncovers these interactions and helps us emphasize the right features for the right persona at the right time within your product.

For example, if you're working on a product that serves pre-K educators, you'll use a different tone within the product than you would in a product designed for high school or higher ed instructors. While you're still designing a product meant to be used by adults and educational experts, this persona's interactions with young students will affect the way you approach both product experience and design.

No matter what kind of edTech software you're designing, UXR and persona resonance can help you narrow your focus. When UXR and UX work hand-in-hand, your primary persona experiences the value of your product with every click or swipe.

Preparing for UXR the Backpack Way

At Backpack, we have a specific process for identifying the needs of a persona. Desk research is the foundational work that helps your UX team make each element of your UXR actionable, and that's where we always start.

Here's an outline of what we do before we ever talk to a user:

  • Make a plan for the outcome of each research element. Identify how UXR will help your team be more precise and tactical so you won't get distracted or go down a research rabbit hole. We always start with a rubric that allows us to test the actionability of our UXR.
  • Conduct a UX audit of your existing product. If you're redesigning a product, this is the time to analyze user data, site maps, and user journeys. Dissect the product's UX to create a road map for your next steps.
  • Complete a competitive audit. Where does this product fit into your edTech niche? Who's already built an experience like yours? This audit will also help you map the UX language of your market through the lens of user expectations. What kinds of words and experiences do users already expect from products like yours?
  • Administer quantitative user surveys. Establish a baseline for user data in order to develop more targeted qualitative questions. For example, how does demographic data, like years spent teaching or level of education, cross-reference with teacher technology usage? Interesting patterns will help you identify areas worthy of deeper investigation in the next phases of user research and testing.
  • Observe students and teachers in a real-time environment. It's crucial to have a UXR lens in place before you head out into the field. Purposeful in-person investigations lead to better insights about your personas and your product.

How UXR Helps You Showcase the Value of edTech Software

This discovery process takes anywhere from 4 weeks to 4 months. Within that time frame, Backpack narrows in on what your user needs and what's missing from the products they already use.

Because of UXR, we're able to pinpoint precise tactical recommendations that work for your specific persona. Without these insights, it's all too easy to lose the interest and investment of your user. The value proposition of your product simply won't be visible enough throughout your UX.

Value matters for every persona, whether you're designing for students, teachers, or administrators. Students need exciting ebooks and easier ways to access major texts. Teachers need to know their time isn't being wasted and that they'll look professional in front of supervisors and parents. Administrators need to know your products are effective and easy to use.

When you've conducted strong UXR, every moment of your product's experience is created in concert with that value proposition. UX, visual design, copywriting choices, and technology decisions will each make your product more relevant and even more delightful. Persona resonance will have a ripple effect on each of these decisions, too. Understanding the interactions our primary user will have with secondary users makes it even easier to unlock the nuances of your persona and design a product that's both useful and reassuring.

Amplify Case Study: When Parents Facilitate Student Learning at Home

In Amplify's "Mobile Solos" application, middle schoolers track reading assignments and take mini quizzes. Even though the tone and design of the product is friendly and easy for 7th and 8th graders to use, the application is made to feel like an assignment from a teacher. The design challenge for this product was to make middle schoolers take "Mobile Solos" seriously — without missing the mark in terms of age.

Mobile solos screens

These images show the Amplify mobile solos user interface designs.

We used persona resonance to address the needs of two secondary personas: administrators and parents. Administrators make the purchasing decision for "Mobile Solos" within their school or district, which means they're an important gatekeeper to the product's success. UXR revealed that admins are highly aware of the technology available to their students at school and at home. Because students often complete digital assignments on mobile devices, we optimized our UX for mobile before making suggestions about the desktop experience.

UXR also revealed that middle schoolers often interact with their parents to complete assignments in digital products or applications, especially on mobile devices. Your average middle schooler may not have their own smart phone. It's far more likely they will depend on their parent's device, especially if there are no computers at home.

This meant parents were a secondary audience for Amplify's "Mobile Solos." Many parents are used to helping their children with programs like Jump Rope, Canvas, and Google Classroom, which means they already have a set of expectations for how sophisticated edTech products should look and feel. "Mobile Solos" had to rise to meet those expectations — even though the product wasn't specifically designed with this persona as a primary audience.

When you design for edTech, you're never designing a product for just one persona. But conducting strong UXR, facilitating thoughtful discovery, and mapping persona resonance can result in a better, more focused product for your target persona.

Want to learn more or have something you’d like to add about designing for specific edTech audiences? Join Sean Oakes and Jessica Millstone at their SXSW EDU campfire on March 11, 2020 for a lively campfire discussion. Learn more here.