Blog Archives

Latest Posts

Monthly

Categories

All Posts in Tech Dev Company Owner

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

November 12, 2020 - No Comments!

What Teachers Really Need in a Remote Learning Product

The rapid switch to remote learning this past spring revealed major gaps in digital learning tools. Teachers often struggled to reach students working at different paces or levels within the same class. At times, educators even cobbled together three or four applications to ensure their students could access and understand high-quality learning content. The rise of the Zoom lesson also brought major dips in student engagement, since students felt less connected to their instructors and their peers.

Even if classrooms make a return to learning in person full-time, edTech designers now have an incredible opportunity to reflect on and meaningfully address these pain points. We surveyed our Teacher Council about the challenges of remote learning, then sat down for a roundtable discussion about their needs. By the end, we'd received numerous insights about what teachers are looking for in remote learning tools, including design ideas product owners can implement right now.

From mobile-ready design to adaptive learning technology, here's what teachers really need in remote learning products.

Teacher Pain Points: Where edTech Falls Short for Remote Learning Tools

Equity and accessibility

About 25% of our Teacher Council members report that their students don't have access to technology while working and studying at home. Most of the educators on our Teacher Council work in urban school districts. Even so, student access to technology is a nation-wide problem further exacerbated by the pandemic and socially distant learning.

While edTech will never be able to solve social inequality, there are strategies edTech designers can use to help ease this pain point. For instance, lightweight, mobile-ready designs make it easier for students to work on their parents' phones and other mobile devices, especially when using spotty or public internet connections.

Engagement

During distance learning, teachers have fewer opportunities to connect with students and support their social-emotional growth with the one-on-one attention that reinforces learning. When digital tools promote student engagement, students are more likely to stay focused, learn material, and retain complex subject matter.

edTech products should help older students understand the value of using the tool, promote learner agency, and facilitate group learning. edTech can also bolster products with SEL features to address the need for additional support.

Differentiation and adaptive tech

In the classroom, teachers are able to differentiate—or, quickly change their teaching style, language of instruction, mode, or medium—in order to reach every student.

Digital tools need to offer this kind of flexibility when a teacher can't work with students in person. This might mean providing additional language support for emerging ELL students, developing audio or video components to content, or using voice-to-text tools to help teachers meet students where they are.

Adaptive learning technology can provide additional support for teachers looking to differentiate content. In an ideal piece of software, adaptive learning technology would recognize a student's level of content knowledge and deliver additional content at the right level. Adaptive technology is especially important during remote learning, when teachers can't necessarily assess and reassess how students are performing during one-on-one interactions.

Ultimately, teachers are looking for tools that differentiate because they want to streamline the number of tools used during distance learning. When teachers are able to pick one digital learning tool that all the students in their class can use, regardless of ability, content knowledge, or language acquisition, they are better able to facilitate learning and ensure accessibility for all their students.

Professional development

Suddenly having to deliver an entire curriculum using digital tools was a challenge for most teachers, especially those who felt less confident using technology. Through onboarding and other forms of support, edTech products can do more to help teachers sequence their curriculum or guide those who find digital learning tools less intuitive to use.

When edTech product owners also switch their professional development content to flexible, mobile-friendly content like pre-recorded video, teachers are more likely to engage with and use content on their own time. Post-pandemic, flexibility and asynchronous content are key for busy, overwhelmed educators who still want to learn, develop, and grow.

75% of teachers reported that their students became less engaged in socially distant learning over time. 

How edTech can Lead the Way in Designing Better Remote Learning Tools

As leaders in the edTech industry, we have a unique opportunity to reflect on the successes and failures of digital tools in remote learning contexts. Now is the time to better understand the challenges faced by both teachers and students through more thoughtful UXR.

Whether you opt for low-hanging fruit, like mobile-friendly design, or go all out with new and improved remote learning features, we hope our insights deck provides you the road map you need to a stronger product.

When we take the time to learn from teachers about their needs and challenges as an industry, all edTech products become more useful—and more valuable—learning tools.

Download insights on remote learning from our Teacher Council below—and stay tuned for even more teacher takeaways you can apply to product design in the future.

Featured Image

April 3, 2020 - No Comments!

Using Wireframes to Power Your UX Design Strategy

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

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

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

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

How Wireframes Guide Stakeholders through Strategic Decision-Making

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

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

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

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

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

How Annotated Wireframes Facilitate Technology Discussions with Development Teams

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

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

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

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

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

How Wireframes Establish Style and Front-End Design Decisions

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

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

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

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

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

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

Testing User Flows and Capturing User Feedback in Real-Time

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

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

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

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

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

Featured Image

January 15, 2020 - No Comments!

User Testing: When Technology Insights Solve UX Problems

Systematic user testing is a key part of developing any user experience strategy. Everyone on your product team wants to solve pain points as quickly as possible, and you're eager to test whether you've created something that fulfills your user's expectations.

You also hope user research and testing will give you insights that your marketing team can use to appeal to future customers. From a marketing standpoint, this testing approach seems like a win-win. But it can also leave your UX team and technologist without the technical information they need to solve real problems and offer groundbreaking solutions. 

User testing is so much more than ticking a box on the road to product launch. When you design user testing prompts that move beyond functionality, your UX team can leverage testing insights to solve complicated user problems in new, intuitive, and innovative ways.

Here's how you can ensure that your researcher, technologist, and UX team employ user research to design more effective, user-centered products:

  1. Help your UXR specialist write questions that map to an actionable goal
    Before you get to the testing phase, work directly with your research technology specialist to develop questions that align with your technology and UX needs.
    Generate actionable goals related to product design or UX that you can map directly onto specific UXR questions. This will help you get a more accurate picture of how users will interact with your product. Actionable goals also give you a head start as you consider what to do with your research findings.    If you're developing a script, questions should center around the goal of the product rather than design elements or desired features. For example, you could ask teachers whether a product fits into their day, or whether they could use a product with a student sitting next to them. The answers to these questions will help you understand if you've met the big-picture goal of product design.

  2. Consider whether your UX problem is a technology problem
    We've all had an unexpected problem crop up during user testing. But what seems like a UX fix might instead be a technology fix. Is a user struggling because they don't have access to the right technology for the product? Will incorporating machine learning help a teacher quickly grade or assess large amounts of student data instead of having to do it manually?For example, when Backpack designs a new onboarding process for teachers and administrators, we consider whether it's appropriate for forms or data to auto-save throughout the process. Onboarding for a new product can take educators a long time, and automatically saving forms throughout the process often improves UX. However, from a technology standpoint, auto-save is a heavy lift! Without input from a technologist during the testing phase, it would be difficult to determine whether this "UX problem" could be solved efficiently on the backend.

    When UX teams and technologists work together, they're able to suggest solutions that address fundamental problems instead of expending their efforts re-designing a product's interface. Sometimes a UX problem really is a technology problem.

  3. Ensure that your UX team understands the user journey from a tech standpoint 
    In order to offer the best possible solutions, UX teams need to understand how users engage with technology. Which devices will the product be used on? Which parts of the product will get used on mobile? Who will maintain the product once it's sold? What kind of workflow does this user have? How fast is the product on the user's typical internet connection? How robust is the search function?Tech-related questions are easy to incorporate into user surveys at the beginning of the research process. Tech-driven user surveys will give your UX team all the relevant data they need to propose more effective solutions.

  4. Encourage collaboration during the solution phase
    Your UX and design teams should participate in recommendations for what happens with front-end development. Increased collaboration between technologists and UX designers makes it easier to determine whether a technological solution or an interface solution will help your users accomplish their goals best. Ultimately, you want your team to have more opportunities to explore broad, creative solutions to tricky user problems.

  5. Use accessibility as an additional tech and UX benchmark
    Designing and testing for accessibility adds expense to your bottom line, but the research and testing process contains opportunities to address accessibility without breaking the bank.For instance, a product's speed or its lightweight feel is an issue of equity. Old or poor quality hardware makes new digital products more difficult to use, but you'll still find outdated, sluggish computers in many school districts with low IT budgets.If you view accessibility as a technology issue, it's possible to incorporate the right questions into your user testing to ensure compliance—and design more accessible products in the long run.

How to Leverage User Testing to Develop an Innovative User Experience Strategy

For better or worse, you can't ask users to come up with big ideas about your product on their own.

Instead, you'll need to develop a strategic framework that takes user conversations and funnels them into user experience strategy and iteration.

Conversations that unpack user testing, overarching product goals, and technology solutions will allow your team to truly think about user experience strategy — not just generate a new wishlist of product features.

Here's how to stay on track as you prepare for user testing and delve into the results:

  • Do your homework. Once you've conducted desk research and preliminary strategic concept discussions with the product team, you'll go into interviews ready to consider what you learn through the lens of experience and expertise. 

  • Use deep listening techniques. When you use deep listening to get to the heart of a product, you uncover unexpected solutions that solve your user's problems in more innovative ways.

  • Reflect as a group. Gather stakeholders, the product team, developers, and your research technology specialist to reflect on what you learned throughout the user testing process. It's important to build in time at the end of user testing to listen. Multiple perspectives on user testing conversations often lead to "ah-ha" moments of clarity for everyone on the project.

    •  

    Whether you're months away from generating user research questions or getting ready to observe users interact with your product, look for opportunities to listen, reflect, and collaborate on technology problems with the input of your UX team.

    Not only will you hit on more innovative, user-centered technology and design solutions, but you'll also create a stronger product that solves real problems for your users. That's the kind of product destined to make a difference—and tick all the boxes for your stakeholders.