CPACS Web

CPACSweb is a web based, full service system used for managing Capital projects at New York University



Forward of Inspirations ✨


Information structure

The most important thing to understand this part is to sort out the structure of the scope of work. Every line is under a work item, items can be included in a group. Talking to my client about automation is of vital importance. In this part, I listed out the structure and thought about problems dynamically.



Team management

The ultimate goals of the product team should be very clear, and should be brought up every day to lift everyone up in the team.

To build a good product, requires the decision-making person having a broad scope of where the product would go in the future. So reading, thinking, talking to professionals are very important for a team.





Work at NYU OTSS (IT)



Design Stories 📗

Building the Interface Structure

CPACS is a complex system for project management, a project usually involves with more than a hundred documents, each document has different status. In order to manage those documents in a more organized way, I built the information structure before starting designing. We came up with a main interface design after several rounds of iteration.




Run a quick design optimization

Project Landing Page

Ideally, every “assumption” should be based on user research. But design is more a way to solve odd problems. When I came in the project and saw the landing page design I felt the “chaos” and “confusion” as a “first time user”. This is when empathy needs to be valued, I asked myself: why do I feel this way about the design? I did not know what those terms mean, they are stacked together without showing any difference, in that case, it is easy to point out the problem and find a quick solution. Last but not least, a quick testing and research within the team can validate the new design quickly.

On the left we have a project landing page designed for each project, each row is a collection of a type of document stored in the system. When I took over the redesign, I feel hard to actully find the items I want, I redesign the page (on the right) to:

  1. Visualize each document type with icons,
  2. Categorize them to make it clearer,
  3. Giving more information according to the API we have in the database.


Identify needs and find solutions


Identify Problem -
User Interview

Initiail user research was interviews with 15 people asking them the general questions about their problems in the process of using the old CPACS. 10/15 conversations featured that users have difficulty calculating the amount they have to put in the bank account according to invoices, those invoices come from different time and scattered in different places.


Solution -
Idea Brainstorming

A logically solution is to auto calculate the invoices that need to be paid due this month. But how do we present those numbers? Sometimes payment needs to be predicted and funds need to be transferred from investors which would take 7 business day, users want a way to vaguely predict the amount of money that needs to be put in the bank account. We did a whiteboard brainstorming session.


API Availability -
Communicate with Dev

I went to talk to the back end dev in the team, we do have the API in the database, so it is techically easy for the devs to get those information, and it does not take them a long time to do this, so adding this feature would take them less than 1 month, we double checked the deadline for “Project Landing Page” before adding this feature in design.

Design Solution

The idea got pass through with data visualization on the homepage. First thing we confirmed with clients that they want a monthly view and a overall view (from when the project created). To solve the problem we brought up above about predicting monthly due we created a line for PM projection, users can see the the actually payment and the PM projection and how are they usually related to the actually payment amount.





Extend Application

After the first case we used data visualization I realized it can help users a lot since the natural of CPACS involves a lot of finance data. We had a meeting with the dev team to see what we can do more to visualize the data, I designed the general overview page afterwards.