Docuploader & Intuit Design Systems [IDS] Accordion Component

Role: software engineer

Duration: August 2017 - present


DocUploader was a feature that was created based on a huge customer pain point: providing ID documentation so that the customer could be verified for using Payments with Quickbooks. This project took roughly 4 weeks to implement, test, and release end to end.


As part of the onboarding process, about 10% of customers sign up need to verify their identity by providing a form of Identification Document (Passport, Driver License, etc). The previous process was that the customer had to call customer care and fax/email their documentation, which took roughly 24-48 hours to complete, depending on what was needed. This is a huge pain point for the customer: calling customer care is never fun, and sending over sensitive information over the phone can be difficult.

Documentation Needed state: message displayed to user to call customer care to resolve ID verification


Docuploader was created with the intention of providing a faster way for a user to verify their Identity. Considerations were made so that the upload process would be straightforward: provide flexibility in terms of documents that could be used for verification and provide multiple ways to upload. We wanted to let the user be confident with what they are submitting, thus providing a thumbnail of the uploaded image, as well as a way to view it at a greater scale. The purpose of DocUploader was only to provide a way to upload an image, on the UI and service side, there was nothing done to verify fraudulent or bad photos - this step was handled on the Payment or Risk processor's side.

With DocUploader, the customer was able to attach a picture and send it online without having to talk to a care agent with the following steps:

  1. As part of onboarding, user is prompted by signup to verify ID doc OR User is prompted by email sent through care agent to verify ID
  2. User selects type of ID document they would like to upload
  3. User drag and drops file on the drop area, or clicks browse button to upload image. Mobile users can take a picture and attach directly
  4. UI displays thumbnail, file size, and link to enlarge image in new tab for verification.
  5. User uploads picture and recieves confirmation that their image has been successfully uploaded.
  6. Customer Care & Risk evaluate and verify image.
DocUploader in production


With DocUploader, a process that took 24-48 hours was cut down to about 10 minutes. Roughly 200+ uploads were made within the first month, and that saved Intuit about at least $5,000 at $25 per care call. However, the most important part was that we were able to save the user’s time as well as care agents’ time.

Design issues that surfaced during development:

  • Dragging and dropping was a feature that was requested, but I realized that there was nothing in place with the design/prototype to reflect to a user that as they are dragging their file, they need to know where the file is going to drop.
    • This was mainly a problem for driver licenses since there needed to be a front and a back, thus creating two drop areas.
  • Another issue was that only one error message was provided in the design spec: if the file selected was too big.
    • We needed to account for things like invalid file types and drag/dropping multiple files.
    • This was not so much an engineering issue, so the fix was just to provide a proper error message to let the user know what they did wrong.

Intuit Design Systems [IDS] Accordion Component

Initially, I volunteered to take up a task to research what it would take to make an accordion component for a new onboarding flow my team was going to work on. After doing all the research and having countless meetings with the designers to figure out every single edge case that the accordion would have, I really wanted to build that component.


A new UI component is introduced to Quickbooks Online: the accordion + container-like features. This component would be used throughout quickbooks for various onboarding flows. There are no existing components from Intuit's proprietary component library, and furthermore, the current component library would also be deprecated. The designs presented were simply done through sketch; thus, things like easing (animation) as well as accessbility were not thought of during the intial design process. Current onboarding flows would either be too long or broken into multiple pages, thus forcing a user with a very rigid flow.


The ultimate goal was to not only make a component that my team can use, but also make a component that could be potentially used by other teams. This accordion was a crucial component in a sense that it could provide users flexibility when it came to filling out forms: a form broken down to sections that could not only summarize each section but also provide the user the freedom to preview what they need to accomplish and to start wherever they desired. This accordion was made so that custom header and body content could be used so that consumers of this component had full control as to what they want to display to the user. This is powerful so that the accordion could be dynamic: different states of the accordion could show different content.

Key Features:

  • Utilize a version of an existing developmental accordion and modify it so that it is customizable for the consumer
  • Collaboration with motion designers to be consistent with Intuit’s new motion design guidelines
  • Customizable to different themes to match Intuit’s respective products
  • Working towards graduation for officially being a part of Intuit Design Systems
    • Upgraded project to React 16
    • Collaboration with Accessibility team to meet Intuit’s standards
    • Provide help and information externally to other teams for consumption
The Accordion in the Intuit Design Systems gallery


At the end of the contribution, I was able to make something that could be used throughout Intuit, as I felt that it would be ultimately inefficient for another team to develop the same thing. In fact, multiple teams were designing new UIs with the accordion style that my team was using. This accordion currently sits as a lab component, but once two teams use it and it meets proper code coverage, it will be graduated into IDS officially, and it will be packaged into every project automatically as currently it is available in Intuit’s npm registry meaning developers have to install it manually.

The Accordion as seen in Payments Onboarding with Chase in production