Investure LLC

Front-end Engineering + UI/UX Internship

(Due to the sensitive nature of the project I unfortunately cannot share actual screenshots of the UI)

My two-year internship at Investure LLC (2019-2021) was my first internship in which I doubled as both a front-end engineer and UI/UX Designer. Here I was tasked with redesigning an old Private Equity Pacing model that company analysts used to run different financial scenarios. The data and graphs from these scenarios were shown to clients in order to discuss the trajectory of their portfolio. Within this page I highlight the design thinking process I took during my time there in order to create a user-friendly and situationally effective application despite having no previous financial background.

Step 1: Empathize:

Previously, the PE Pacing Model was taking analysts 30 minutes to run as it required separate executions for separate scenarios. The UI consisted of outdated basic HTML inputs and did not have an intuitive design. The layout was a single page of clustered of inputs and buttons which lacked clear-cut directions for which inputs belonged to which steps. For example, buttons that could not be pressed until certain steps had been completed or inputs that did not affect the scenario until certain steps had been executed were always available.

Step 2: Define:

After understanding the general situation and the trouble that the company analysts faced, I moved to more accurate define the problems with the PE Pacing application. Since I came into the role with no previous financial background, I started off by studying what a Private Equity Model does. From there I attempted to run the application on my own in order to become more familiar with the workflow and user-interface.

Next, I interviewed company analysts and had them walk me through how they use the application. During this walk through I asked them questions such as:

  • What they liked about the current application

  • What they disliked about the current application

  • Which inputs were associated with certain steps

  • Which inputs were used for every scenario and which inputs were situational

  • When certain buttons and inputs became available within the process

  • Features that would make their workflow easier

  • How they used the PE Pacing model for clients

  • What information was most vital and necessary to show clients

Step 3: Ideate:

After gathering a sufficient amount of data from the analysts, I started to draft ideas on how to better structure the UI for the complex 30 minute process.

First I sectioned the input process into 3 separate parts. In addition to making the steps clearer, this way after the input in one section was complete and executed, the data for the next section of inputs and buttons would become available, from here where the analyst could adjust them accordingly. I then referred to which inputs were used most often and which inputs were used on a situational basis from my interviews. This allowed me to hide the unused inputs in dropdown menus in order to prevent unnecessary clutter in the UI.

After creating this general structure, I added multiple input boxes for each of the data value inputs. This allows the analysts to input all the data for each scenario at once. Therefore, rather than inputting the values for each scenario on separate executions, the analyst can input all the data for each scenario at once and excute them in parallel, cutting down the overall run-time of the application.

For post-scenario execution, I also separated the charts and tables used at the end of the process into their own section.

Throughout this process it was important to think about how to fix areas of the model that they found inconvenient while keeping the areas that worked for them.

Step 4: Prototype

After drafting the different sections of the new UI I created paper prototypes of the UI layout. Here I included the disabled buttons and inputs, the drop down menus to hide unnecessary information and inputs.

In this prototype generation I referred to the company website in order to create a pleasant looking UI.

Step 5: Test

I then gave the analysts my prototype designs and asked them to walk through the PE Pacing model process to see if there were any flaws in the workflow. Throughout this process I received feedback on which inputs and values to hide in the dropdown menus and implemented new inputs that the analysts requested to be added. Additionally, I designed a new export functionality in which the results of the scenarios could be exported into csv files to be saved for future reference.

Step 6: Implement

After completed the Design Thinking process I moved to implement the UI in React.js. Here, I collaborated with the backend team in making any adjustments to the JSON files sent and received by the UI. After completing the first iteration of the new PE Pacing model the whole process for the analysts was brought down from 30 minutes to 5 minutes. The rest of my internship was focused on adding new features to the PE Pacing model.