Building More Collaborative Teams with Practical Prototyping
There is a problem with design. In many cases, design still assumes collaboration with developers means showing them wireframes to get feedback. In some cases, a developer may be part of a sketching session or sit in on a usability test. How big of a role should developers play in our design work? Is there a benefit in sharing the practice of design with developers?
Design is more than the sum of its artifacts
Some designers aren’t on board with everyone being a designer. I have heard designers remark : “I can’t wait for the developers to open Sketch and finish my wireframes!”. This sentiment boils the value of designer down to the artifacts we make, but designers are more valuable than that. The first step towards collaboration is believing that everyone can contribute to the design process. That also requires us, as designers, to focus less on artifacts.
There is a lot of momentum growing around raising the design competency of the whole product team. Many teams are starting to see the incredible value in bringing everyone into the design process. Not only does this allow designers to spend more time on the bigger picture, it allows everyone’s expertise to be part of the process.
What we do as designers really isn’t about artifacts. Artifacts are communication tools for the bigger ideas and strategy of the team. We all benefit when we share the work of building UI and interactions with developers. Developers can be more than just advocates for technology; most really do care about the users and the products we build.
Practical Prototyping and Collaboration
Design prototyping tools, like Axure and Invision, have been used to create interactive prototypes without needing to code. Unfortunately, these tools often fall short for native mobile apps. We need better ways to think about and test interactions for mobile apps.
This is where collaboration can come into play. By having developers make our prototypes in code, we can better understand the mobile apps we are designing. Better yet, developers will have a clear role in the design process. The process of bringing design into coded prototypes early is called Practical Prototyping.
Although designing in code is not a new idea, by giving it a name, we can be more intentional with how we use it. Practical prototyping is about facilitating collaboration, not remove designers from the process. Skipping the design process to jump into the code isn’t collaboration, either. To make this work, you will need to find ways for your team to share the craft of design.
What does practical prototyping look like?
Sketching
To get started, your team should consider collaborative sketching. Spend time defining the problem, who your audience is, and how you may solve the problem. There are a lot of different ways to sketch, but getting a marker in everyone’s hand at a whiteboard is a great place to start. If your team is remote, consider using a free, collaborative tool like Miro or screen sharing in Sketch.
The goal of sketching is define the problem and map out core interactions you need in your UI. You know you are done with sketching when you have enough shared understanding to start working on a coded prototype.
Prototype in code
Once you have the basics sketched out, the developers should take these ideas and start putting them into code. Your prototype is not meant to be a final implementation. Don’t worry too much about creating a polished UI or connecting all your data. Focus on building out just enough of your app to get a feel for the interactions and flow.
Get feedback
This process allows the team to feel the app and quickly identify pain points. Regroup to talk through the issues you are running into and collaborate to find solutions. As long as everyone is talking and sharing in the iteration process, you are doing it right.
You will likely need to go back and forth as you refine your ideas and interaction patterns. The more your team works together in this way, the more efficient you will become. Sharing the process of design allows everyone to understand the goals of your work and the ‘why’ behind interaction patterns. The magic happens when your team starts to develop a deeper understanding of the product you are building.
Why try practical prototyping?
Although bringing ideas into code early can seem like a big commitment, there are several benefits that can outweigh concerns.
Build a shared understanding of the problem and potential solutions
- Practical prototyping makes it easy to get the whole team invested in each step of the process.
- Working this way builds familiarity, communication, and empathy between cross-disciplinary teams in a hands-on way.
- Using practical prototyping demands that we have a deep, shared understanding of the product.
Understand the impact of design decisions
- Bringing ideas into code early makes it easier to follow platform conventions and understand when we may need to deviate.
- Practical prototyping allows us to see how our app may interact with the whole mobile ecosystem.
Work more efficiently
- Although bringing ideas into code early may require some rework, it can also give developers a head start.
- When everyone knows the goals, it is easy to prioritize what should be built.
- Practical prototypes can result in better feedback from stakeholders and users which can help speed up the decision making process.
Get better feedback from users and stakeholders
- Stakeholders or clients can see progress earlier and offer contextualized feedback. Relying too much on static wireframes or design made prototypes can derail productive conversations.
- Getting ideas into code early makes it easier to identify gaps and make corrections.
Practical prototyping helps teams make better products
Collaboration is important for building empathy and growing the design literacy of a product team. Practical prototyping can make collaboration less challenging and more productive.
When designers focus too much on artifacts, or let design be the gatekeeper to progress, we lose sight of what is important. We create better products when our vision is owned by the team. Combining our skills and diverse viewpoints empowers us to make better products.