top of page


Categorization Prototype



Design Consultant 



2020.10 - 2020.10

2 months


React, Figma, SCSS, javascript, AWS


The prototype is used for 20+ user testings and has sent to developers as a reference. 

Main Goal

In July 2020, designers from the QuickBooks Online team designed a new experience that incorporates artificial intelligence to predict a transaction's category for customers. Therefore, the designer requested me to create a prototype for the unique experience. They wanted to know if the new feature will lead to their expected result.

Version 1

Incorporating real customer data and a prediction engine, the categorization project focuses on understanding if users would pick the category that QBO suggests and understand its result. It includes the following 5 cases.

  1. When a category has not been assigned.

  2. Always have a category, and users can dig deeper.

  3. Users can create a new custom sub-category.

  4. Connect to a QB Live accountant.

  5. See all "browse" categories model.

Version 2

After I handed off the first version of the prototype, the QBO team designers conducted a full round of user testings. After that, they further modified their designs. This project is the second version of the categorization project. It includes the following updates:

  1. A new experience of the "Create New" feature.

  2. A new "categories" page which collects all transactions.

  3. Updates on the prediction engine.

  4. New table row expansion design.

  5. Other visual improvements.


End-to-end Prototyping

Working on my first end-to-end project, I learned prototyping skills using React. I am also more inclined to use SCSS to style my components instead of CSS. Besides, I learned the way to import the machine learning model into the prototype. 


No matter how set-in-stone a design is, there may always be flexibility. Reiteration is a great lesson I learned through this project. 

Follow up

To make sure everyone is on the same page, it is wise to schedule my own reviews with designers based on how my prototype is going. Also, to gain immediate feedback, always remember to ask for feedback at the end of each project by sending a formal email. 

bottom of page