Zapier Tables
How might we enable a user to import their data into a Zapier Table, where they can build powerful automated workflows based on their data?
Context
We designed a simple MVP modal solution that is currently in production as of June 2023, and will be a key highlight of the Tables go-live at Zap Connect in October 2023. The solution enables users to import data through uploading a CSV or through importing a worksheet from Google Sheets or Airtable.
The team’s plan is to release this simple modal solution and immediately start gathering feedback from users in the live product as a means of informing future roadmap decisions, which may involve more complex functionality such as “syncing” data from external apps to Zapier Tables, and keeping data in sync on a scheduled basis, an ad-hoc basis, or automatically when data changes. This is essentially integrating the backend Transfer functionality into Zapier Tables.
Process
We performed a competitive analysis to align on a short-term and long-term strategy.
Myself, my PM counterpart, and our PMM together evaluated competitors in the import/sync-to-Table space and evaluated them based on user experience, import integrations, user journey, speed, and functionality, noting competitors that supported one-time import versus ongoing sync of data into a table.
The product teams decided to focus on importing one-time from Google Sheets and Airtable, a desirable solution that we could build quickly, gather feedback from, and inform the future of sync functionality in Tables.
Our design process was collaborative, fast, and iterative.
Myself, the Transfer designer, as well as the Tables designer at Zapier collaborated to envision future-facing possibilities and generated various design iterations before meeting with engineering and product teams to discuss a path forward.
Modal solution
We explored a simple modal solution first.
✅ We liked the simplicity and the feeling of “quick, direct import” this provides in a user experience, and how it was consistent with other import experiences we observed in the market.
🔴 However, we disliked the lack of scalability this offered for various reasons. First, we wanted to avoid previewing data in a modal, which isn’t an optimal use of screen real-estate and limits the user’s view of complex information. Additionally, it wasn’t scalable for what we saw as the future:
(1) higher numbers of integrations for users to choose from
(2) lack of a home for viewing evidence of the import once the user completes the import, and
(3) lack of a home for future and related “sync” functionality.
More vertical real estate for field selection in larger tables
Sidebar solution
We explored a side-bar solution next. I enjoyed a competitor’s solution, Rows, as inspiration.
✅ Scalable for future entry points
A sidebar would enable users to start an import experience from the home page, before a Table is created, or from within an existing blank Table (in the future, we’d evolve further to support imports from existing filled Tables).
✅ Greater vertical real estate for app/field selection
It also created for more real estate for app selection and field selection, suitable for large datasets with many columns for users to view, search, and select from.
✅ Home for viewing imports, syncs, and adding more to the Table
Finally, a sidebar would enable us to scale towards future desired features - viewing information about past imports, supporting multiple imports or syncs in a single table, and editing syncs in the table.
🔴 Adapting to technical constraints
Through meeting with the engineering manager and engineers during design reviews, we identified technical challenges associated with the desired sidebar solution given our tight timeline to deliver an MVP. First, a user wouldn’t be able to freely interact with the Table during the import experience. Second, we wouldn’t be able to provide a user with any information about the import that took place via the sidebar after the import was complete. Third, there were many ways a user could exit the modal - via the back button, by clicking another sidebar item, or by exiting out of the sidebar through the “x” icon, and it was technically complex for the engineering team to have to build all of these exit points.
These complexities, combined with the fact that supporting sync was far out in our product roadmap future, led design to propose a simpler alternative solution for our MVP.
Start from homepage modal, transition to sidebar experience
Start from existing table, additional entry point, more vertical real estate for app selection
Scalable for future features: viewing past imports, supporting multiple imports or syncs in a table, and editing syncs
🔴 Adapting to technical constraints
Through meeting with the engineering manager and engineers during design reviews, we identified technical challenges associated with the desired sidebar solution given our tight timeline to deliver an MVP. First, a user wouldn’t be able to freely interact with the Table during the import experience. Second, we wouldn’t be able to provide a user with any information about the import that took place via the sidebar after the import was complete. Third, there were many ways a user could exit the modal - via the back button, by clicking another sidebar item, or by exiting out of the sidebar through the “x” icon, and it was technically complex for the engineering team to have to build all of these exit points.
These complexities, combined with the fact that supporting sync was far out in our product roadmap future, led design to propose a simpler alternative solution for our MVP.
Decision
Improved modal without data previewing
Though there was a long-term desire for a sidebar solution across both stakeholders and the design team, the technical team didn’t have the capacity to deliver some key components to make the sidebar desirable for the user.
Given the technical constraints, we designed a compromise MVP solution for the short-term in the form of a revised modal, without previewing and with streamlined app selection. This would enable us to build and deliver value quickly and start gathering feedback from users ASAP via a live product.
This functionality is currently in production and will be featured in the Tables’ team next launch to their Early Access Program (EAP) in spring/summer 2023.
Take a closer look at the Tables Import MVP.
Figma phase 1 prototype
I also outlined 2 additional phases of work for my team to build beyond phase 1, which would include a more scalable sidebar experience and sync functionality, where users could sync multiple sources of data into a single Zapier table.
