Building Products that Scale Organically

March 26, 2020

The sharing economy has long existed in the physical world, but has recently started to revolutionize the world of digital products as well. Figma, the juggernaut design tool that has won the hearts of UX/UI teams in the tech space, launched its product on the idea that collaboration is not only a tool, but a foundation for good product development. Google leaned into this idea over a decade and a half ago, with the birth of shareable assets in Google Tools, with an industry defining product in Github to follow shortly thereafter.

As we analyze the process of great product design and development, it is imperative that we do not overlook the impact of building products that scale organically through a user's ability to share assets, and embrace collective work.  As Harvard Business Professor Linda Hill expressed in her 2014 Ted Talk on collective creativity, “Innovation is not about solo genius, it’s about collective genius”. 

At PlayerZero, this sentiment is engrained in our everyday work. Whether it's the tools we use, or the features we build, collaboration is always front of mind. As a blossoming startup, we rely on other industry leaders to show us best practices for how to achieve this goal, and we wanted to give you an inside look into the industry benchmarks we use to set ourselves up for success. The following is deeper dive look into the companies that inspire us to try new things in the name of collective genius:

Figma

1. Component Libraries

You can think of [components] like building blocks”, with a focus on creating a strong foundation to how assets are used across teams over time. Components are tailor made to simplify the sharing experience by giving developers and teammates alike the piece of mind that what is being implemented is consistent and correct.

Have you ever taken a graphic and used it for material, later to find out that it had since been updated without you knowing. So in a last minute rush, you had to get the design team to proof your material, in order to make sure all the assets were correct? Ya, Figma addresses this problem with its component libraries. Update a symbol or asset in one place, and the change will be reflected across all designs within the organization.

Overview_tab_where_you_can_see_the_Styles_and_Components_in_the_selected_library.png
Source: https://help.figma.com/hc/en-us/articles/360039238353-Track-library-and-component-usage


Component libraries creates one source of truth for everything, a system of accountability that allows your team to work at max capacity, with clarity on ownership and execution being account for.

2. Commenting

There’s nothing like jumping into a design review and getting 100 comments in real time, trying to record all of these insights, and then make them actionable. Or, even worse, you leave the meeting only to have people get inspired and ask to meet again to give you their feedback. 

See a typo? Make a comment! Line out of place? Make a comment! This way, you give designs the chance to be observed and engaged with by a wide ranging set of eyes, which will allow the designer to have a broader outsiders perspective on the impact of what they are creating.

figma_share_comment_in_project


Tools like this can actually lead to a reduction in time necessary to receive feedback and make changes. Rather than have a meeting, shoot a message to your team on Slack to check out the document and leave comments (don’t forget to give them a deadline for insights ;) )

3. Streamlined Features

Figma realized from the jump that not all designers are the same, or that different people in different functions might also need to collaborate in the design workflow process. Rather than relying on 4 different applications to get feedback on design (Sketch, InVision Abstract), Figma integrates key segments of the prototyping process into 1 seamless workflow. Design, prototype, comment, branch, create components, etc, all from the same browser based application.

sketch_is_invision_abstract_sketch_combined

4. The Browser

One of the most significant design choices Figma made was to allow designers to work directly through the browser. Unlike competitor Sketch, which lives through a desktop application installed on your device, the Figma browser implementation allows users to plug in from a multitude of devices simply using your username and login. 

figma_in_browser

Being untethering to locations and devices is key to flexibility and efficient work-life balance. Want to go to a different country for a few weeks but can’t bring your desktop with you? With Figma, there is no need to install your design tool on a new device, simply power it up on a different computer in your new location through the browser. 

It’s important to acknowledge that there are some clear friction points with this model, such as a lack of continued font families and a lack of offline execution, but these are not things that can outweigh the immense benefits of the flexible usability. 

Plain and simple the theme that Figma lives by, through and through; great design is collaborative, not isolating. 


Google Tools

Figma is a relatively new tools, showing the rise in popularity and adoption of modern sharing economies in the digital world. But let’s take it back a second and chat about a product that showed the value in collaboration before anyone even knew the impact it would have on the world. When originally released in 2006 Google Docs was the first to really take age-old tools and make them truly collaborative. Even in today’s world, you oftentimes find yourself battling with boomers(even if you are one) over the classic Excel vs Sheets conundrum. Here’s how Google went about addressing the sharing mentality in products that hadn’t seen true innovation in decades.

1. Design Familiarity

As Dieter Raams, the genius industrial designer that gave life to the powerful design language of Braun, laid out in his ten design commandments, great design “involves as little design as possible” . Bill Burnette, Executive Director of the Stanford D.School, echoed this sentiment, telling us that great designers aim to take existing user experiences and change them about 5-10% in the right direction. But why does one company’s 5% seem so much more significant than another company's innovative 5%? 

Well, it usually boils down to how well the team identifies and targets the true user need. Sometimes, incremental changes make the biggest difference in user experience.. What if we were to do something as simple as make the first screen on a photo sharing app a camera rather than a feed of images, making it a quicker photo taking and sharing experience? Welcome Snapchat. What if we decided to make car parts one size fits all, thereby limiting manufacturing and streamlining maintenance costs, hello Ford! 

So how does any of this relate to Google Apps you might be asking? Well, when taking a step back, the biggest difference in Docs and Word, or Excel and Sheets, is the ability to access the document on any device, through the browser, with your teammates. More or less, the basic functionality of the products changed very little, but the ability to collaborate and access docs wherever you were in the world completely changed the game. 

excel_sheets_comp

Keeping the design language similar enough to avoid scaring age old users, Google was able to create a natural adoption process. And as it relates to sharing, when a teammate wants you to engage with a new tool, it’s a much easier ask if it doesn't feel like you are forced to learn a completely new user experience. 

2. Segmentation Without Dysfunction

Understanding core user value and experience is crucial for adoption and low churn, and google has been the poster child for this since the beginning, as represented by it’s still bare homepage, which features a search function, and that’s it.  But even as the company branched into new avenues, such as creating, presenting, and logging, they kept their eye on the ball with the specific users they were designing for, they simply allowed new ways to connect different types of users with each other. 

One outstanding example is the ability to link spreadsheet data to your docs or your presentations. What happens when you are a customer experience team that is constantly giving QBRs to your clients, and simple data is out of date? Are you going to go back and update each and every time? Seems like a waste of time for everyone involved. Google thought so, so they built a way to pull charts and data from one central location, and with the click of a button, the data on your presentation or Google Doc is up to date! 

google_presentation_link

In many ways, this is similar to what we saw with Figma and component libraries; finding a way to have single instance adjustments will transform the way that teams work, and will give ICs the ability to perform at a higher level, with less distractions

Github

Shortly after the introduction of Google Tools in 2006, Github went live, leading to a seismic shift in the way developers executed in their role, and collaborated with others. The strategic mix of public and private repositories within one ecosystem triggered share-ability that heightened passive and active creative teamwork. 

1. Fork and Pull (external collaboration)

While this article is underlining the impact of the collective genius, progress must also be made in isolation, where the curiosity and intuition of the individual drives iteration and exploration. The fork and pull method allows developers to identify the foundational work that other developers have contributed, make it their own and continue to build it with their own customizations. Even though you likely never actually meet or speak with the original author of the vode, you are able to understand them through the assets they create. Just like a team, you can then add your personalizations for your specific use case, and generate something completely unique based on your targeted needs.

Good innovation is directly correlated to time, so by eliminating the adoption friction for pre-existing work, Github increased time-to-value significantly for developers

2. Branch and Merge

In a clearer alignment with the expectations of creative teamwork, Github also enables teammates to interact and build on a team member’s work within shared repositories Rather having cloning work and detaching it from the original source, the branch method ties new code additions to the original stem. This, in turn, creates a more fluid merging experience for implementations down the line. What this also means is that the adjustment at the stem level will affect the branch level, which is why tools like PlayerZero are so important for teams that are building and adjusting code constantly.

github_branch

One last thing to mention before we wrap up this section on Github; the power of the public repositories.  While methods like pulling, cloning, branching, etc are all very actionable ways to build collectively, the ability to simply explore is arguably just as impactful. Learning through reading the work of others is an opportunity to benchmark the styles, strategies and structure of other developers and teams. Ask a developer what they think of an application and they’ll list “looking in Github” as a key step in their evaluation process.


Conclusion

As we've explored in this piece, sharing is more than a “feature”, it’s a foundational piece to a successful business development equation for most companies in the digital age. Regardless of the user type, connecting people and or their ideas and intuitions is crucial for creating great products that scale. At PlayerZero, we too drive product development through the idea that collaboration is essential, as seen through the use of shareable assets and support for community-driven event listeners

Make sure to sign up for the newsletter for further insights, and don’t forget to try PlayerZero out for yourself.

Written by:
Matt Kasner
Additional Articles

Building Products that Scale Organically

March 26, 2020

The sharing economy has long existed in the physical world, but has recently started to revolutionize the world of digital products as well. Figma, the juggernaut design tool that has won the hearts of UX/UI teams in the tech space, launched its product on the idea that collaboration is not only a tool, but a foundation for good product development. Google leaned into this idea over a decade and a half ago, with the birth of shareable assets in Google Tools, with an industry defining product in Github to follow shortly thereafter.

As we analyze the process of great product design and development, it is imperative that we do not overlook the impact of building products that scale organically through a user's ability to share assets, and embrace collective work.  As Harvard Business Professor Linda Hill expressed in her 2014 Ted Talk on collective creativity, “Innovation is not about solo genius, it’s about collective genius”. 

At PlayerZero, this sentiment is engrained in our everyday work. Whether it's the tools we use, or the features we build, collaboration is always front of mind. As a blossoming startup, we rely on other industry leaders to show us best practices for how to achieve this goal, and we wanted to give you an inside look into the industry benchmarks we use to set ourselves up for success. The following is deeper dive look into the companies that inspire us to try new things in the name of collective genius:

Figma

1. Component Libraries

You can think of [components] like building blocks”, with a focus on creating a strong foundation to how assets are used across teams over time. Components are tailor made to simplify the sharing experience by giving developers and teammates alike the piece of mind that what is being implemented is consistent and correct.

Have you ever taken a graphic and used it for material, later to find out that it had since been updated without you knowing. So in a last minute rush, you had to get the design team to proof your material, in order to make sure all the assets were correct? Ya, Figma addresses this problem with its component libraries. Update a symbol or asset in one place, and the change will be reflected across all designs within the organization.

Overview_tab_where_you_can_see_the_Styles_and_Components_in_the_selected_library.png
Source: https://help.figma.com/hc/en-us/articles/360039238353-Track-library-and-component-usage


Component libraries creates one source of truth for everything, a system of accountability that allows your team to work at max capacity, with clarity on ownership and execution being account for.

2. Commenting

There’s nothing like jumping into a design review and getting 100 comments in real time, trying to record all of these insights, and then make them actionable. Or, even worse, you leave the meeting only to have people get inspired and ask to meet again to give you their feedback. 

See a typo? Make a comment! Line out of place? Make a comment! This way, you give designs the chance to be observed and engaged with by a wide ranging set of eyes, which will allow the designer to have a broader outsiders perspective on the impact of what they are creating.

figma_share_comment_in_project


Tools like this can actually lead to a reduction in time necessary to receive feedback and make changes. Rather than have a meeting, shoot a message to your team on Slack to check out the document and leave comments (don’t forget to give them a deadline for insights ;) )

3. Streamlined Features

Figma realized from the jump that not all designers are the same, or that different people in different functions might also need to collaborate in the design workflow process. Rather than relying on 4 different applications to get feedback on design (Sketch, InVision Abstract), Figma integrates key segments of the prototyping process into 1 seamless workflow. Design, prototype, comment, branch, create components, etc, all from the same browser based application.

sketch_is_invision_abstract_sketch_combined

4. The Browser

One of the most significant design choices Figma made was to allow designers to work directly through the browser. Unlike competitor Sketch, which lives through a desktop application installed on your device, the Figma browser implementation allows users to plug in from a multitude of devices simply using your username and login. 

figma_in_browser

Being untethering to locations and devices is key to flexibility and efficient work-life balance. Want to go to a different country for a few weeks but can’t bring your desktop with you? With Figma, there is no need to install your design tool on a new device, simply power it up on a different computer in your new location through the browser. 

It’s important to acknowledge that there are some clear friction points with this model, such as a lack of continued font families and a lack of offline execution, but these are not things that can outweigh the immense benefits of the flexible usability. 

Plain and simple the theme that Figma lives by, through and through; great design is collaborative, not isolating. 


Google Tools

Figma is a relatively new tools, showing the rise in popularity and adoption of modern sharing economies in the digital world. But let’s take it back a second and chat about a product that showed the value in collaboration before anyone even knew the impact it would have on the world. When originally released in 2006 Google Docs was the first to really take age-old tools and make them truly collaborative. Even in today’s world, you oftentimes find yourself battling with boomers(even if you are one) over the classic Excel vs Sheets conundrum. Here’s how Google went about addressing the sharing mentality in products that hadn’t seen true innovation in decades.

1. Design Familiarity

As Dieter Raams, the genius industrial designer that gave life to the powerful design language of Braun, laid out in his ten design commandments, great design “involves as little design as possible” . Bill Burnette, Executive Director of the Stanford D.School, echoed this sentiment, telling us that great designers aim to take existing user experiences and change them about 5-10% in the right direction. But why does one company’s 5% seem so much more significant than another company's innovative 5%? 

Well, it usually boils down to how well the team identifies and targets the true user need. Sometimes, incremental changes make the biggest difference in user experience.. What if we were to do something as simple as make the first screen on a photo sharing app a camera rather than a feed of images, making it a quicker photo taking and sharing experience? Welcome Snapchat. What if we decided to make car parts one size fits all, thereby limiting manufacturing and streamlining maintenance costs, hello Ford! 

So how does any of this relate to Google Apps you might be asking? Well, when taking a step back, the biggest difference in Docs and Word, or Excel and Sheets, is the ability to access the document on any device, through the browser, with your teammates. More or less, the basic functionality of the products changed very little, but the ability to collaborate and access docs wherever you were in the world completely changed the game. 

excel_sheets_comp

Keeping the design language similar enough to avoid scaring age old users, Google was able to create a natural adoption process. And as it relates to sharing, when a teammate wants you to engage with a new tool, it’s a much easier ask if it doesn't feel like you are forced to learn a completely new user experience. 

2. Segmentation Without Dysfunction

Understanding core user value and experience is crucial for adoption and low churn, and google has been the poster child for this since the beginning, as represented by it’s still bare homepage, which features a search function, and that’s it.  But even as the company branched into new avenues, such as creating, presenting, and logging, they kept their eye on the ball with the specific users they were designing for, they simply allowed new ways to connect different types of users with each other. 

One outstanding example is the ability to link spreadsheet data to your docs or your presentations. What happens when you are a customer experience team that is constantly giving QBRs to your clients, and simple data is out of date? Are you going to go back and update each and every time? Seems like a waste of time for everyone involved. Google thought so, so they built a way to pull charts and data from one central location, and with the click of a button, the data on your presentation or Google Doc is up to date! 

google_presentation_link

In many ways, this is similar to what we saw with Figma and component libraries; finding a way to have single instance adjustments will transform the way that teams work, and will give ICs the ability to perform at a higher level, with less distractions

Github

Shortly after the introduction of Google Tools in 2006, Github went live, leading to a seismic shift in the way developers executed in their role, and collaborated with others. The strategic mix of public and private repositories within one ecosystem triggered share-ability that heightened passive and active creative teamwork. 

1. Fork and Pull (external collaboration)

While this article is underlining the impact of the collective genius, progress must also be made in isolation, where the curiosity and intuition of the individual drives iteration and exploration. The fork and pull method allows developers to identify the foundational work that other developers have contributed, make it their own and continue to build it with their own customizations. Even though you likely never actually meet or speak with the original author of the vode, you are able to understand them through the assets they create. Just like a team, you can then add your personalizations for your specific use case, and generate something completely unique based on your targeted needs.

Good innovation is directly correlated to time, so by eliminating the adoption friction for pre-existing work, Github increased time-to-value significantly for developers

2. Branch and Merge

In a clearer alignment with the expectations of creative teamwork, Github also enables teammates to interact and build on a team member’s work within shared repositories Rather having cloning work and detaching it from the original source, the branch method ties new code additions to the original stem. This, in turn, creates a more fluid merging experience for implementations down the line. What this also means is that the adjustment at the stem level will affect the branch level, which is why tools like PlayerZero are so important for teams that are building and adjusting code constantly.

github_branch

One last thing to mention before we wrap up this section on Github; the power of the public repositories.  While methods like pulling, cloning, branching, etc are all very actionable ways to build collectively, the ability to simply explore is arguably just as impactful. Learning through reading the work of others is an opportunity to benchmark the styles, strategies and structure of other developers and teams. Ask a developer what they think of an application and they’ll list “looking in Github” as a key step in their evaluation process.


Conclusion

As we've explored in this piece, sharing is more than a “feature”, it’s a foundational piece to a successful business development equation for most companies in the digital age. Regardless of the user type, connecting people and or their ideas and intuitions is crucial for creating great products that scale. At PlayerZero, we too drive product development through the idea that collaboration is essential, as seen through the use of shareable assets and support for community-driven event listeners

Make sure to sign up for the newsletter for further insights, and don’t forget to try PlayerZero out for yourself.

Follow us on Twitter
Sign up for our newsletter.
Get the latest articles delivered straight to your inbox.
Share
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Additional Articles