Refined Zapier

Behind the scenes of building: Refined Zapier

TL;DR

While building my startup Tribe, I joined as a Founder Fellow at On Deck. During the program, I competed against 100+ members in a 72 hour weekend hackathon. The objective was to build and launch a new working product. Each team would be judged by a panel of founders and venture capitalists based on execution, traction, and novelty.​

My team was a group of Zapier power users. However, we felt the platform was not optimized for our needs. Navigation felt cluttered and there was a lack of collaboration tools. We created an open-source browser extension called Refined Zapier to improve the user experience, adding features like folder search and change logs. ​

Our team won 2nd place at the On Deck hackathon and finished #2 product of the day on Product Hunt. The CEO of Zapier caught wind of our project and reached out to learn more.

Kickoff

Zapier is core to our team's workflow. Collectively, we have 400k+ Zap executions, 1,700 Zaps, and 158 folders. The two pain points we defined and organized around were: 1) cluttered navigation and 2) lack of collaboration tools.

The problem: Zapier is not optimized for power users.

Empathizing with users

I started the hackathon by speaking with more users to diagnose the problem and confirm it was broadly felt. I began by writing a call script and completing 10 customer interviews. These discussions revealed key insights that fueled our ideation phase.​

• "My company has hundreds of Zap folders that we have to scroll through manually. It's very inefficient."

• "We have multiple managers using Zapier, but no way to see who made what change and why."

  
  

Ideation

I initiated a brainstorm session in Whimsical by listing out potential solutions and prioritizing features based on impact vs. development effort.

It was important that the team had a quick win to gain momentum through the weekend. Yet, we needed to make sure our solution was solving a meaningful UX problem for users. With input from my engineer teammates, we estimated development time for each feature and updated the prioritization chart. The team reviewed my initial ideas and added a few of their own. For our MVP, we picked two features with high impact that we had confidence could be deployed within 36 hours.

A) Folder Search

From interviews, I understood that users knew the name of the folder they were looking for. Adding a search capability was low hanging fruit that would boost productivity.

B) Changelog

It was also clear that a big gap for enterprise users was a lack of visibility into changes made. Adding a changelog was technically challenging to implement, but would drastically improve functionality.

Design

Now that our group had consensus on what to build, my next job was to begin designing the solution.​

Using Whimsical, I quickly put together a wireframe. In addition to the folder search bar and commit messages modal, I included UI enhancements to the navigation bar adding much needed spacing, modernized iconography, and punchy highlights. I also included a hover card concept for users to quickly see the detail of their zaps removing the number of clicks. These additions were quick wins that improved the UX and could be implemented at the end of our sprint if time permitted.

Our team reviewed the wireframes and made a few tweaks. From there, I built out a high fidelity prototype in Figma. We used an agile kanban method for development. As each feature's design was completed, the file would be handed off to the appropriate engineering owner.

Build

It's day 3 of the hackathon. The engineers have pushed v1 of our MVP to the team. We were ahead of schedule and all features were implemented  (folder search, changelog, hover cards, and UI enhancements). During QA, I identified a bug that prevented commit messages from being saved. We ironed out a few other small changes and released an updated beta.

We now had a fully functioning browser extension that helped Zapier power users move faster and stay organized. Below is a gallery that highlights key feature changes and value props.

Testing

Next, we needed to get our product into the hands of real users. I ran 10 moderated usability tests followed by surveys to validate our solution and collect feedback. The results were clear: Zapier power users were moving faster with our browser extension.

Launch

To show traction among a broader community of early adopters, I led our launch on Product Hunt. This included designing gallery images, creating a thumbnail logo, a making an opening maker comment. Throughout the day, our team worked tirelessly to collect upvotes. We posted in communities like Hacker News, On Deck, and Reddit and sent hundreds of personalized messages to friends and family.

We ended the day as #2 product of the day with 233 upvotes.

Presentation

My last task for the weekend was to create our presentation for the hackathon pitch!  

We did a few dry runs then presented over Zoom to a panel of VC and founder judges and hundreds of other On Deck participants. It was a competitive group with many impressive projects. Ultimately, we impressed the judges with our execution ability and traction leading to a 2nd place award!