Collaborative Prototyping in a Fully-Remote World: Product PH x Figma Meetup
Jelvin Base, Product Management Consultant at Talino Venture Labs and Figma Community Advocate, shared his prototyping process over Figma, one of the best applications for team-based collaborative projects for product teams.
Link to the presentation: http://links.jel.vin/productph
Imagine a situation where the team is gathering and planning how to present their idea to their stakeholders but the stakeholder says he “can’t imagine where this is going” because all he’s looking at are a set of static screens and does not demonstrate the level of interaction the customer or user will be taking.
Prototyping is an experimental process where design teams implement ideas into tangible forms from paper to digital — the middle ground between something visual and functional.
Figma is a tool most often used in the Prototyping stage in the Design Thinking Process, in between the Ideate and Test phase, that allows you to quickly engage your stakeholders and help them better appreciate your proposal.
Knowing this, we then come to the question “Why add Prototyping in our process now?”
If a picture is worth 1000 words, a prototype is worth 1000 meetings.
If done efficiently, prototyping saves us time by communicating and validating our ideas in different stages of product development. When doing prototypes, challenges end up being solved as the product development process goes along.
Clearer Concepts
Being able to communicate your ideas is key. Prototyping helps you communicate your concepts more clearly.
Faster Stakeholder Buy-in
This means that if you’re trying to present your product to a stakeholder, they won’t necessarily be interested in looking at static screens. Through presenting to them an interactive screen, they are more likely to appreciate the ideas presented faster.
More Efficient Development Validation
It’s helpful for developers to be able to see the intended design’s interaction as it makes it easier for them to check its feasibility and make better estimates.
Here are some simple interactions that you can use on design elements that you can choose to put together to bring your design to life:
*Note: Clicking the above links will bring you to the presentation slide where you can interact with each of the elements to see how their interactions work.
Using the interactions one at a time can be sufficient enough to get your idea across but you can be a little creative by combining multiple interactions in one go.
*Note: Let the screen load for a while as the demo should appear in the first section of the webpage where the header image is.
Notice that these showcases are just combinations of the different simple interactions you can do in Figma. Also, when you strip away the color, typography, and other aesthetic elements, low-fidelity mockups can also be created through Figma.
On a side note, you can watch this YouTube video on which Figma Plugins would be useful to you in your design process.
Challenges in Prototyping
It’s hard to find someone who genuinely knows how to do Prototyping. Linked here is an interactive Venn Diagram of the set of skills one must have to be good at Prototyping, in Jelvin’s opinion.
There’s also a tradeoff to be mindful of especially when the organization is operating under a tight deadline and wanting to cut costs, then finding the right team member whose skills match that of someone who would be a rock star in prototyping might not be a priority.
How do we include prototyping in our product development process?
The following points are here to guide you on how you could think about prototyping and proposing it to your organization as an additional step of your product development process.
Setting goals is important especially considering the different roles there are in the team. As a Product Designer, you would want to shorten the time you need to iterate on things one by one so prototyping will be a huge help in communicating ideas and getting buy-in. As a Product Manager, prototyping can be included in the whole production process to make sure that the product’s intended direction is communicated clearly across the organization, especially if external stakeholders are involved and that expectations have to be clearly laid out.
Assessing the skill set of the team is also another point to consider; do we really need to hire someone new or is someone in the team already capable to kickstart the inclusion of prototyping in the production process? Auditing not only the designers but also the developers is also a helpful exercise to determine the team’s ability to translate concepts into features that can be used in a product.
Reviewing the organization’s production process is another audit that can be done. Is prototyping a feasible addition to the existing process? How can hand-offs be done both internally and externally?
Tracking the team’s performance after prototyping is added into the existing production process is also a critical way to assess the effectiveness of the change. What metrics can be tracked to monitor performance? An example key metric would be, after a few sprints doing prototyping and handing it over to the developers, has the turnaround time shortened? Jelvin suggests that a primary metric that can be measured is time or time being optimized with the help of prototyping.
Creating small experiments is also a way to slowly include prototyping into the production process. If a project has more leeway, then trying to add a few extra interactions into the initial designs to simulate ideas better will be a good experiment to try with the team.
And lastly, being able to reflect on the team’s progress so far given the changes in the process will help the team better understand how to best approach and tweak production for better delivery.
Overall, prototyping on Figma is great! The key challenge is finding the right person, developing the right process, and making sure concepts are communicated right.
Liked the talk? Connect with Jelvin at hey@jel.vin or through his Linkedin.
Check out this Figma board where everyone submitted their questions:
