top of page

Pyro

Work Project

Overview

Designed and developed by Intuit design technologists, Pyro is a no-code prototype building platform that allows designers to create high-fidelity prototypes with Intuit's components, real persistent customer data and complex logic..
Duration: 2020.8 - 2022.2 (1.5 Years) 
My role: I was one of the five design technologist who work on this project. Specially I developed new features, added new components, conducted presentation and demos, and maintained the supporting slack channels. 
Technologies: JavaScript, React, Figma, Google Firebase
Impact
We soft launched Pyro 1.0 to Intuit's design technologist in September 2020, and officially launched it in November. 

Challenges

Prototypes serve as integral tools in evaluating customer experiences, and we've recognized the significance of incorporating authentic customer data, particularly in domains like finance and taxes. Within Intuit, our designers often generate a multitude of innovative experience concepts they wish to test with real customers. However, due to capacity constraints, design technologists (prototypers) may not accommodate every prototyping request.
 

To address this, there's a critical need to develop a dedicated tool empowering designers to autonomously create functional prototypes. Enabling designers to independently craft these prototypes would not only streamline the process but also expedite the testing and validation of creative ideas with real customers.

Solutions

Pyro is an open contribution no-code experience building platform that uses coded components to allow anyone to create prototypes using real persistent customer data. Other prototyping tools, such as Sketch and Figma, are not able to incorporate real components or real data, which leads to less reliable insights than if researchers can use participants' real information. Using pyro, designers can quickly create prototypes using real components and data, enabling researchers to gain real customer insights and provide a head-start for developers for final execution.

 

Pyro 1.0 was released to Intuit designers in November 2020. 

We leveraged Craft.js to build the drag-and-drop experience and Google Firebase as the backend.​ Users can drag a component from the left panel to the main editor area.  They can further customize the components on the right panel and add conditional logic. 

Shirley portfolio.png

Pyro's components are either taken from Intuit's design system (buttons, icons, links etc.), or custom components made specifically for Pyro. For instances, shells for various QuickBooks products, step flows, trousers and drawers.  

Screen Shot 2024-04-16 at 9.45.02 PM.png
Screen Shot 2024-04-16 at 9.45.39 PM.png

Another great feature of Pyro is to incorporate real data into the prototype. We created a table component which can take a .csv file and load the data to the table. In this way, designers can obtain a more realistic result through user testing interviews.  

Screen Shot 2024-04-16 at 9.53.37 PM.png

User Testing

In October 2020, my team conducted 10 user testing sessions to get some initial feedback. The participants are designers and PMs among various design teams. 

 

Throughout the process, we collected many positive feedbacks. The biggest win for us was that Pyro includes components and images from the Quickbooks design system, which will significantly save their time designing a page. Some other positive feedback included that Pyro can test with real customer data and has the flexibility to switch between mobile and web interface. Furthermore, users recognized the value of a simple drag-and-drop system and were excited to start using it. We also observed our users using our new table component and QuickBooks page template. Besides positive feedback, we also gathered some feature requests from our participants, and we will add some of those features to future development.​

More Updates

During the summer 2023, I went back to intern at Intuit and learned that the team and debugged a bunch of issues. Right now Pyro is able to run again. The next step is to incorporate AI in to Pyro. 

bottom of page