PI Portfolio

Product Design / Mobile App

PI Portfolio is a mobile app for Principal Investigators (aka Faculty Researcher) to be able to check the financial health of their research grants.

The Users

The primary users are Principal Investigators (PIs), also known as Faculty Researchers who are the lead investigator of a grant. PIs are very busy, not only overseeing their research projects and managing their research staff, but they also have the responsibility of teaching as well. They need quick access on the go (via mobile) to check the financial health of their research projects so they can better plan their research progress and make better informed decisions that can optimize their research output. To empathize their pain points, I created some user personas to represent the users of the PI Portfolio App.

Information Architecture

The information architecture of the PI Portfolio App consist of standard login page, a splash page, and the following 1st tier screens:

Snapshot: This is the primary landing page of the app after the user successfully logs in. The “Snapshot” page contains the summary of all of the user’s active research grants. The user can scroll through to see high level information of each of their active research grants such as title of the research grant, grant sponsor, current balance, and end date of the grant. From this page, the user can drill down to see the details of each of their research grants, such as expense transactions.

Reports: The page consists of two types of viewable reports: Monthly Financial Report and Research Progress Report. Due to compliance of the research institution and terms in the grant, the user is required to receive the financial reports and submit research progress reports to their sponsors.  

Planning: This page contains an interactive UI that allows the user to input projections for their grants so the user can better plan the resources and expenses needed to complete their research and minimize the risk of overspending of their total funding.

Tasks: This page serves as a notification center that alerts the user of important tasks for their research grant. For example, if a grant expires in 90 days, an alert is sent to the user with a task suggesting the user to apply for an extension if more time is needed on their research.

Discover: This page contains information that the user may not be aware about. For example, their assigned Research Administrator or institutional information that may impact their grants.

Medium Fidelity Wireframe

Visual Design

Before I proceed to create high fidelity mockup, I experimented with some typography and color palette so I have a better idea on how to apply the visual elements to the user interface. Because the information on the UI will be data intensive, I've selected the colors that are lightly saturated so it's easier on the eyes. I've also created some product logo so I have a better feel on how the app will be presented to the users.

Hi Fidelity Mockup

Check out the Figma Prototype