Working collaboratively with design and development
What product managers need to know about design and development to help their teams collaborate
Presented by Cassie Clark & Sarah Featherstone
INTRODUCTION
Making digital products requires the work of a wide variety of teams and disciplines, and one of a product manager’s most important tasks is to foster collaboration and communication among those teams, particularly between design and development.
A design team can include roles like user experience (UX) designer, product designer, or UX researcher. These team members often have a background in creative arts and a deep understanding of user behavior. Working with the product team, the design team takes ownership of the user journey, and will be responsible for creating wireframes, mock-ups, and prototypes for the product.
A development team can include roles like software architect, front-end engineer, back-end engineer, or quality assurance engineer. These team members typically have a background in computer science and software languages, and they are responsible for building the product.
Ensuring these teams work harmoniously is critical to the success of your product. Without good collaboration, you could end up with designs that aren’t aligned with your product’s requirements or a product that doesn’t align with the intended design.
Product, design and development all have their own ideal processes and toolkits. In real world settings where timelines can be tight and resources limited, not every project can — or even should — employ all of those steps and tools. A skilled product manager will work with each team to determine what is and isn’t important to a particular project, always keeping the bigger picture in mind.
This guide will provide some practical tips to help ensure your teams are all working collaboratively and efficiently toward the creation of a successful product.
IN PRACTICE
Use the tips and concepts in this section to cultivate a product culture in your newsroom
First, establish relationships
How teams are first introduced to each other can set the tone for the entire project. It’s worth taking the time to ensure everyone learns names, understands roles, and gets to know each other. Mutual respect and trust are important keystones in any working relationship, but for product teams dealing with tight timelines and high stress, having a group of people with a clear understanding of each other and their respective responsibilities can be the difference between success and failure. Especially in workplaces with large or remote teams, it can be easy to skip this step, but this investment will pay off when your project hits a snag. Teammates who assume the best of each other rather than stall, fixate, or assume the worst will work together better to solve the problem quickly. If possible, encourage team members to set up 1-on-1 introductions before the work begins, especially between front-end engineers and UX/product designers.
Bring design and development together from the start
Include both design and development as early and as often as possible in your project. Each makes critical contributions to the discovery phase: design can help identify opportunities with user research and journey mapping; and development can give insight into the limitations and capabilities of your technology. Involving these teams early can also help you identify what product process steps will be important and which ones can be skipped. Some projects may rely on deep data analysis and persona development, while others may need more focus on user interviews or empathy mapping. For some projects, it’s not worth spending time building a fully functioning prototype, but in other cases, building a prototype could save you hours of back-and-forth discussion and tedious explanations for how an animation should behave. Utilize the creativity and knowledge of your design and development staff as often as possible to ensure you are optimizing your product and eliminating potential risks.
Be willing to pivot
You may feel confident in your project at kick-off, but be prepared for things to change. Whether it’s newly discovered data or a directive from leadership, change will happen, and sometimes it means work in progress or already finished will no longer be relevant. Set expectations up front with your designers and developers so they are mentally prepared for this possibility. In return for their flexibility, assure them that as a product manager you are willing to adapt to them as well. Developers may decide a certain testing process isn’t working for them, or designers may request more frequent stakeholder reviews so they aren’t spending too much time designing in the wrong direction. Be open to this type of feedback and be willing to work with them and make reasonable adjustments. The product manager is the communication hub and needs to ensure the whole team is on the same page and is aware of any product scope adjustments as quickly as possible. If you are transparent and adaptable, your team will be more apt to return the favor.
Be specific about specs
The handoff stage is when designers give final design specifications to development so they can start building. What those specs look like and how much detail is included can vary dramatically depending on the team and personal preference. For example, while most design software platforms automatically provide technical specs like colors, sizing, and fonts, some developers prefer additional design details in separate documentation. Before you begin building your product, have a discussion with your team to establish how much detail will be included in handoff specs, and exactly where and when those specs will be provided. Setting expectations upfront will ensure no one is doing unnecessary work and the team is communicating as efficiently as possible.
Handoff is just the beginning
It can be a huge relief for a designer once their designs are handed off to development. It’s a big milestone and there is a temptation to relax, but now is not the time to fall out of collaboration mode. Design should perform Visual Quality Assurance (VQA) in partnership with development to make sure their designs were built correctly. Similarly, there can be a wave of relief once developers have released their code, but there may be hot fixes or unexpected issues that they will need to address with the team even after your product ships. Every role will have different ebbs and flows within a project, but it’s important that communication remains strong so that if an issue or opportunity arises, everyone can quickly get to work without needing considerable ramp-up time. The more a group can function and communicate with a team mentality throughout a project’s lifecycle, the better the result for everyone.
TERMS
Definitions for product terms referenced in this guide are sourced from NPA’s crowd-sourced product glossary
Wireframe
A low fidelity representation of a feature or product. Typically uses boxes, lines, and labels and is intended to show the layout and content, not the final look and feel.
Prototype
A high-fidelity design of a product that you can interact with. These are used to show flows, animations, transitions and give a good idea of how the final product should look and behave.
Discovery
The beginning phase of a project where information is gathered, goals are established, and work is scoped at a high level.
VQA
Visual Quality Assurance is the process of reviewing the finished product to ensure it aligns with the provided designs.
RELATED READINGS / RESOURCES
Stuck in the Middle: Mastering Stakeholder Management, by Emily Tate - Mind the Product
Connecting the Dots - A List Apart
Top 10 Design Handoff Tools for Designers and Developers - UX Planet
ABOUT THE AUTHORS
Cassie Wimberly
Cassie Wimberly is the Director of Design at The Baltimore Banner, a non-profit news publication in Baltimore, Maryland dedicated to creating a sustainable business model for local journalism. After starting her career as a reporter, she shifted into product design while serving as a web editor at The Dallas Morning News, where she helped design the user experience for the paper’s first mobile apps. Since then she has spent more than 12 years working with agile development teams in a range of environments from startups to fortune 500 companies.
Sarah Featherstone
Sarah Featherstone is the Director of Product for The Baltimore Banner, a non-profit news publication in Baltimore, Maryland dedicated to creating a sustainable business model for local journalism. She has worked in academic and non-profit publishing for over 13 years, including prior roles with Pearson, The American Society for Microbiology, and SAGE Publishing.