Blog Archives

Latest Posts

Monthly

Categories

All Posts in Operational UX strategy

Featured Image

January 19, 2021 - No Comments!

How to Integrate Your Development Team into the Creative Process

As remote learning becomes the norm, your UX design and development teams need to be even more thoughtful about how teachers use technology to reach their students.

From making it clear to teachers which of their screens is being shared during a Zoom lesson to providing innovative features for SEL growth and peer learning, our tech and design collaborations matter to the users who depend on our products.

Backpack Interactive is lucky enough to collaborate with incredible development teams. Our special creative partnerships with developers shape the work we've done with national brands, including Scholastic and Lego, and inform our approach to agile development.

With our insights from decades-long collaborations, you can infuse more creativity into your UX design and development collaborations and make better products from the ground up.

Ease Workflow Issues through Agile Development Practices

Agile development practices help you coordinate your design and development teams and work backwards from an objective or deadline. But staying flexible throughout this process also helps your entire team come up with creative approaches to design challenges.

For design teams, it's important to work closely with clients and stakeholders to define the problem or experience. The better you understand a design challenge conceptually, the easier it will be to clarify your project parameters with a development team and start riffing on potential solutions.

As design and technology needs are defined along the way, the end product becomes clearer. Ideally, this collaboration is what creates the best possible version of the product you were hired to build.

That's why working backwards is so important. You'll be able to think proactively about your timeline and develop solutions that fit the parameters of your deadline. Both you and your development team should work together to determine what an iterative road to a major feature goal looks like.

You might be surprised by what solutions jump out at you during these collaborations. Some feature ideas or solutions might not even be part of the original brief. Even so, they could support user needs or client business goals in new, innovative, and more efficient ways.

This process takes time—and mutual trust. Now that we're all working remotely, it's more important than ever to give collaborations between design and development teams more breathing room. If you're tightly scheduling meetings and sprints or making detailed agendas, you'll have less time for creative thinking and problem solving.

Identify More Technology Opportunities with Annotated Wireframes

Developers have plenty of know-how. But if your designers simply deliver their vision without considering the perspective of the development team, everyone misses out on technology opportunities.

Annotated wireframes are the best way to involve your development team throughout the process. Developers can make annotations on wireframes to discuss the functionality and feasibility of your team's UX solutions, so you're all thinking a few steps ahead. This is also the perfect system for developers to test edge cases or specific user cases and search for solutions early in the process.

Done well, annotated wireframes also provide a formally documented design and technology conversation that outlines solutions to real problems. Not every design project treats wireframes as an opportunity for collaboration. For this reason, it's important that both sides stay open to change throughout this process. Ultimately, a flexible conversation will produce better, more creative solutions to both design and technology challenges.

Once your design team and your development team have mastered the fundamentals of teamwork, both teams are freed up to be more creative. The best collaborations lead to innovative or human-centered products by anticipating sticking points and building a stronger product from the ground up.

Roll Out a Proof-of-Concept to Test the Viability of Your UX and Technology

By nature, proofs-of-concept are quick, lightweight ways to demonstrate your proposed solution to a specific design challenge. They ensure your approach will work and deliver on the feel of the product. Done well, they can speed stakeholder buy-in or approval.

A proof-of-concept can even be small—a piece of code that helps designers test out what an experience would be like for the user. Does animation between screens solve a visual transition issue? Can you design a reactive behavior into the experience to help a user understand their next step? (Think log-in fields that shake when a user mis-remembers their password.)

Working with your development team to build and test a proof-of-concept is especially important right now. We don't know how learning tools designed for the classroom will translate to remote learning environments. This means we need to test out new ideas even more quickly By staying open to new, creative solutions, we'll meet the needs of teachers and students as they navigate working and learning from home.

We know that not every development team wants to participate in a partnership with UX designers. For development teams, iteration is more often about adhering to specific parameters rather than trying to solve unique design problems.

However, if you only focus on a project's design and technology parameters, you might not create the best possible product. It's important to stay open to the possibility that the product can get better along the way.

Working this way also requires a lot of trust between the client, your design and UX teams, and your development team. But if everyone accepts that the product can get better along the way, you'll create break-through moments where every member of the team can showcase their creative abilities.

For Backpack Interactive, proof-of-concept designs are one of the most exciting ways to create those break-through moments. They help us find more viable solutions that meet the needs of our users. They also shine a spotlight on the creative thinking of our development collaborators.

How to Stand Up a Stellar Digital Experience in 6 Weeks Flat: A LEGO Case Study

LEGO: Passport to Mars is a suite of interactive educational games designed to teach children ages 7 to 10 about space travel and teamwork. It also offers a postcard generator, so children can create and send messages featuring their LEGO models to friends and family.

Our biggest design challenge was to help children learn complex ideas through story and gameplay, all while delivering on visual presentation. To meet the tight deadline, we knew we had to work in an agile, collaborative partnership with one of our favorite development teams—the folks at Atomic.

Delivering on Delight—without a Database

In order to focus on storytelling, we spent several days storyboarding activities for gameplay rather than developing wireframes. Because we provided our development team with fewer technical specifications at the outset of the project, they wrote more creative code that addressed functionality and sequencing in unique ways. For example, they came up with playful solutions for syncing up animation to audio, and we adapted our visual designs to better fit their suggestions.

Collaboration with the Atomic team throughout this process was crucial. Early in the process, we discovered there wasn't enough time to properly implement a database on the back end. To compensate, we designed individual postcards by creating artwork for every possible outcome a child might choose. This way, we were still able to provide a customizable postcard experience, even if the images couldn't be generated dynamically on the back end. This solution worked solely because we collaborated in lockstep with our development team. Atomic helped us develop strong organizing solutions for the project's graphic assets. They also created prototypes to ensure our design work-around would be successful.

The Technological Challenge of Rendering AR in a Browser Environment

Our next design and technology challenge arose when trying to render augmented reality (AR) in a browser environment rather than app. The intent was to design a great experience for children who might just be learning what AR is and how it works. In LEGO: Passport to Mars, this means that some children can scan their LEGO model and experience it in a virtual environment. Children without their own LEGO models experience animated versions that are just as fun to look at and explore.

From a technological standpoint, few open source options for browser-based AR existed. To work around this technical constraint, we hired a 3D animator to develop a proof-of-concept. Our animator brought a LEGO rocket model to life with billowing smoke and created a LEGO lunar buggy that picks up equipment and places it in a cargo bed. Both UX and visual design had to work backwards to address the technology limitations around AR and accomplish the goal by only using the tech our teams had access to.

Working this way can be both challenging and productive. As a design team, we were deeply involved in the technology decisions behind LEGO: Passport to Mars. This collaboration made the final experience stronger, more functional, and more fun. When design and development teams work in environments of mutual trust and creativity, great things happen.

Want to work collaboratively with a design team to solve technology issues in your next product? Contact us!
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

February 17, 2020 - No 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.

 

    1. 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.

 

    1. 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.