Blog Archives

Latest Posts

Monthly

Categories

All Posts in UX/product planning and design tactics

Featured Image

October 26, 2020 - No Comments!

How to Leverage Peer Learning Features and Foster SEL Growth in Remote Learning Tools

Peer-to-peer learning has numerous benefits for students. It provides students with practice collaborating and generates more opportunities for students to understand difficult subject matter by helping their peers learn, too.

While it's certainly easier to arrange peer learning activities in the classroom, students still benefit from these activities when they're offered digitally. In fact, peer learning and other activities that promote social-emotional growth might be even more important during remote, socially distanced learning.

According to Education Week, the only way to address learning loss from remote learning last spring is to focus on SEL growth—even if it's not a normal part of the curriculum. "This may very well require a shift in thinking for some school leaders," writes contributor Arianna Prothero. "[Social-emotional] development is not in competition with academics, but rather a prerequisite for success."

While students are isolated from their peers and teachers, they need increased opportunities to practice SEL skills, including collaboration and delivering peer feedback.

But when remote learning means logging on and zoning out, students disengage from one another—and the material they're supposed to learn. Used in an engaging way, digital tools can counter the mental exhaustion of the Zoom classroom. They can even give educators new ways to reach students with social-emotional distance learning.

How Technology-Based Peer-to-Peer Learning Encourages SEL Growth

Our collective remote learning experiment from the spring exposed everything digital learning tools currently lack. Without preparation, teachers found it difficult to translate classroom strategies for small-group learning or collaborative projects into the digital realm. With a new school year underway, teachers are still looking for solutions that will boost student engagement and foster SEL growth during distanced learning.

Now is the perfect time for edTech leaders to transform their digital tools to incorporate more project-based or team learning features. We can also find more innovative ways to add collaborative features to products that weren't designed with team learning and SEL growth in mind.

Thankfully, digital products and edTech software lend themselves well to project-based, peer-to-peer learning moments that foster SEL growth.

  • Digital products slow down and record real-time interactions in a way that promotes student reflection. This gives educators more opportunities to talk with students about digital citizenship and the interactions they notice online.
  • With structured student participation tools, digital tools can level the playing field and allow all students to participate in the same way. It's no longer necessarily about who's first to respond, or who's loudest—it's about who contributes ideas and what those ideas are.
  • Practice using digital tools and collaborating in digital environments helps students develop digital relationship skills that will be important for the workplace and in other contexts.

Here's how you can continue to build on the collaborative features in your edTech product to foster SEL growth.

Design Features That Foster Digital Citizenship

As edTech designers, we have new opportunities to help teachers examine how students interact with one another and use SEL skills in digital contexts. When teachers have more opportunities to use student interactions as teaching tools, they're able to foster digital citizenship skills that are at the heart of SEL growth. These skills are also broadly applicable to real-world interactions, from social media to remote work.

Because digital products track evidence of student interactions, teachers can use this data as a valuable teaching tool. By working one-on-one with students to improve student behaviors or SEL growth, teachers have opportunities to promote better digital citizenship. edTech designers can support this work by offering constructive ways to resolve conflict, including templated interactions or AI that alerts teachers to problematic interactions.

Digital tools also facilitate ways for students to develop and support their own opinions while making room for the ideas of others. Threaded discussion features are intended to house and promote many different ideas, while bite-size prompts from teachers can offer guidance throughout class discussions. By encouraging students to examine their process and explain how they arrived at an idea, digital tools foster reflection and tolerance in ways that reinforce good digital citizenship.

Teachers—and edTech designers—should expect social challenges to emerge in digital tools used by groups. The more we proactively design tools to address and mediate these challenges, the more edTech can support teachers who are attempting to address SEL growth in remote learning contexts.

Features That Engage Students Transform Class Participation

It's challenging to keep students highly engaged during remote learning. Students can check out easily on Zoom, and teachers can't necessarily inspire the same level of attention and passion when they can't read student body language or interact with students one-on-one.

edTech designers can do more to create learning environments where students feel comfortable in their participation. In order for students to have a successful learning experience, students must feel motivated to participate and engage with the material and their peers. Participation fuels collaboration skills, personal empowerment, and many other key components of SEL growth.

Inevitably, teachers and parents of younger students experience heavier administrative lifts during remote learning. They must monitor student access to online environments or help them accomplish tasks. For younger students, digital experiences must be more self-contained in order to be engaging. Reading logs, positive votes, and directed positive feedback all create more evidence of a student's thinking. These features can even be designed to help younger students learn from one another.

Educators of older students can bring in a variety of media and encourage students to respond in a medium that inspires them. In digital contexts, drawings, infographics, and video are all fair game. Because of the evidence of participation, peers are also more motivated to engage with one another. As the way that they think of their audience changes, older students begin to see one another as peers learning together. These feelings of learner agency are the key to motivation and engagement, bolstering SEL growth.

Finally, digital tools can also give teachers the ability to introduce thought-provoking prompts when a student gets stuck or leverage more advanced, "smart" grouping features. Software should support teachers in the strategic grouping or prompting they would use to facilitate participation in the classroom. With support from digital tools, teachers have more instructional time to check in with the students who need it most.

Collaboration and Reflection Features At the Heart of SEL Growth

Remote learning has asked teachers and students alike to explain, model, and reinforce good digital etiquette. When designed well, edTech tools help students build connections and reflect on their interactions with their peers.

Digital tools record entire interactions, slowing down real-time communication in a way that's helpful for learning. Teachers can use evidence of student interactions to identify misunderstandings or prompt reflections on the outcomes of these interactions. This way, students continue to learn important collaboration and communication skills from real examples.

Teaching the importance of positive peer interactions also shifts the focus away from group output. Instead, teachers can emphasize successful communication, collaboration, and reflection alongside mastery of the material.

The ability to slow down and review a record of interaction may only be applicable to digital environments. But students need and use these skills already—on social media or in group texts with their friends and family members. Students will need these skills in the future, too, as they graduate to additional remote learning or work opportunities.

When edTech designers create more opportunities for students to examine interactions with their peers, we build the kinds of digital tools teachers need to address SEL growth. After all, social-emotional learning isn't something that only happens in a classroom. If we want to prepare students for the workplace and the world, ensuring positive digital interactions and continued SEL growth online is a good place to start.

Featured Image

September 11, 2020 - No Comments!

How to Design Impactful Digital Experiences on a Small Budget

Nonprofit and community organizations are already working hard to support their communities with few resources. The realities of the COVID-19 pandemic have made delivering these services even more challenging, especially for organizations that depend on in-person programming.

If your mission is to fill a critical gap with educational programming or services, it's our mission to support your shift to the digital sphere. Whether you have a shoestring budget and a small staff or dedicated resources for digital experiences, this article will help you design experiences that help you serve your community.

The Value of Creating a Digital Interactive Experience Right Now

If the sudden onset of remote learning or social distancing drastically impacted your ability to provide in-person services, your organization might be struggling to reach community members in need at the same scale.

Creating a digital experience showcases your organization's content and expertise while also providing a powerful stop-gap as you wait to safely resume in-person services. But digital experiences have value outside of temporary solutions, too.

Executed well, a powerful digital experience permanently transforms your organization by enhancing your ability to fulfill your mission. By curating your content in a creative way online, digital experiences extend the reach of your organization and make your content or services even more accessible to your audience.

Organizing and formalizing your message also leads to positive outcomes for your organization. The act of curating your best content helps small teams become even more effective communicators and advocates of your mission.

How Nonprofits Can Scale Digital Experiences for Their Staff and Budgets

No matter how big your organization is, building a digital interactive experience is scalable.

You don't have to create an out-of-the-box product or completely re-tool your mission. In fact, if your idea for a digital experience changes your understanding of your mission, that's a much bigger conversation!

Start small and scale your digital resources based on your budget and bandwidth. There's value in thinking big if you're ready to think big. You can also build something meaningful right where you are. For example:

  • Embed existing YouTube content into your site along with suggestions for using content in the classroom.
  • Offer pre-existing print lesson plans as downloadable resources.
  • Curate pre-existing digital content on your site in a meaningful way for your audience.
  • Create a podcast.
  • Publish actionable blog posts.
  • If you're an outdoor organization, set up a webcam that allows your community to watch the activities that you sponsor. For instance, if you're a zoo or wildlife refuge, your audience may want to watch and connect with animals.
  • Use existing payment platforms to capture sales for classes or products or to collect donations. (Be aware that these platforms also take a percentage of your sale.)

Before you begin brainstorming ideas for your own digital experience, consider the return on investment for your organization or team. Can this digital space or tool be self-sustaining? How will you use this space even after you're open to the public?

Just take national nonprofit ReadWorks, for example. Their mission, to create a powerful ELA curriculum, required an equitable distribution policy to make the biggest impact. The organization transformed their curriculum and teaching tools into a free digital experience with national reach. By thinking digitally, ReadWorks went on to register and support more than a million teachers in every state in the country.

But your organization's digital transformation doesn't have to operate on a huge scale. SuperD!ville, an educational site that helps teachers integrate SEL concepts into middle school curricula, started out with a YouTube channel containing video lessons. As they grew, they added a subscription model and instructional tools for teachers who wanted to use SuperD!ville video content as part of their curriculum. Another educational nonprofit, Learning Ally, designed an entire portal for parents who want to support their child's literacy at home. They provide audiobooks, graphic organizers, and other literacy content—all for free.

Extend Your Organization's Reach with a Digital Interactive Experience

Whether you make existing assets more readily accessible to your audience or entirely transform your organization's digital presence, designing a digital experience boosts your mission and extends your reach.

When you design digital experiences with a growth mindset, you support your mission far into the future—long after you return to in-person programming. By setting yourself up for success during the planning phase, you'll be able to execute on bigger projects in more meaningful ways and feel proud about expanding your mission.

Even if you start small, there's value in thinking big.

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.