All Posts in Product Development

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.

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.

March 3, 2020 - 2 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.


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.

February 17, 2020 - 2 comments

What Are You Selling? UX Solutions for SaaS in edTech

When it comes to designing software-as-a-service, or SaaS, it can be difficult to decide where your marketing site ends and your product begins.

How do you create clear boundaries between the free and paid features for your product through UX and visual design? How do you communicate to your user the value of your SaaS without giving away the farm?

It might be tempting to only give users a small taste of your product's full capability. After all, you don't want to attract a bunch of hangers-on who never convert to paying customers!

However, we've found that the more you "give away" before asking users to convert, the better engagement you'll have with your product. That's because most users want to see and experience the value of your product in their own lives before committing to a paid model.

This can be true in edTech, too. For example, you might have more opportunities to convince teachers that your video lessons have value in their classrooms if you don't paywall all of your video content immediately. By letting teachers use more than one video and build lessons around your content, you'll be more likely to convert teachers into paying customers. You'll also have a better chance of transforming them into advocates for your product.

But, as edTech products become more complex, the "freemium model" for SaaS only gets you so far. If you're developing a product for teachers that collects outcomes and data, you'll need to consider even more carefully where your product's marketing experience ends — and when you've given away too much.

What Are You Selling? UX Solutions for edTech SaaS

A user's sales experience with SaaS is closely tied to their understanding of the product's experience and design. How does your product look and feel? Is it more powerful or easier to use than the product they're currently using? Good UX and visual design helps users build trust with your brand, even as they begin evaluating whether your product will solve their most pressing pain points.

Before you can attract new users to your product, your product and sales team will have to identify the SaaS model that gives away just the right amount of content. Here are the three most common UX solutions for SaaS and how you can align your edTech product goals with the right one.

  1. The "Freemium" Model
    Works great for:
    specialized course content
    There's a reason marketing departments love free trials — they work! High-quality free content teases visitors to integrate tools into their daily lives. Ultimately, you want the tool to be so valuable — and the content to be so effective — that your visitors convert into paying customers. For both free and paid subscriptions to thrive, your company must commit to continuously innovating you product. After all, attracting new potential customers gets harder as you go. Improving the free version of your edTech product will become just as important as developing the paid version when it comes to attracting and keeping new users. When our client SuperD!Ville launched their new site, we recommended including a "freemium" content area for new users. Their "Episodes" page now showcases a range of helpful video resources for teaching students social-emotional skills. One of the videos is free, and a subscription is required to access their other active learning tools. Even with access to limited content, SuperD!Ville users get a taste of how powerful the lessons are in their classrooms and begin to envision how they'll use additional, paid resources.
  2. Separate product and marketing sites
    Works great for:
    long-term, complex solutions like curricula or student assessments
    It's not easy for educators to determine whether an entire curriculum will work in their classroom or school district if they only have access to a product for 30 days. What truly convinces administrators in this case isn't free access — it's efficacy data. The best way to present this data is often by creating a separate marketing site that targets the decision-making administrator or educator persona. On your marketing site, present case studies that illustrate real-world ways your product has made a difference. Discuss how the product can be integrated into what teachers are already using. Provide testimonials from users and build a community of champions. Each of these tactics will make a persuasive case for why an administrator should adopt a curriculum or a specific student assessment. Leverage the early UX research you conducted to fine-tune which product features and data will be most compelling to this persona.
  3. Integrated SaaS solution
    Works great for:
    Data-driven tools, products with complexity and depth
    Integrated solutions give users a limited set of all features, but prompt users to unlock additional features by subscribing or paying a fee. From a marketing standpoint, you're showing off your best product features even as you help users learn how those features are integrated within the workflow of the product. Unlike other models, your conversion opportunity arrives at the most critical moment for your user — right when they want a deeper outcome or result from using the features of your product. Early in the planning and research process, you'll need to decide whether your product can be sold directly to teachers or school administrators. Are you providing an enterprise solution that has to be adopted at higher levels? Or are you providing individual teachers a powerful tool for their individual classroom?

    This may also affect the types of licenses your sales team will offer, as well as the different levels of features that could be unlocked within the product itself. Will you lead users strategically toward a rolled-up sale to gain access to a broader market? Foster collaboration between your UX team and the sales team early in the design process to create the best possible experience for your users.

User-centered approaches to edTech SaaS require a sophisticated approach to user research, product design, and marketing. The more your UX team collaborates with major stakeholders to identify the best experience for your users, the better your product's content, features, and sales experience will be.