Jeff Krebs
Jeff Krebs

Objectives & KPIs

Challenge
Foundations that donate to nonprofits want the ability to track their grantees’ progress against established objectives and KIIs (key impact indicators). The challenge was to design a new version of the theme page where users can quickly view, create, and edit their organization’s objectives and KIIs. Micro-interactions such as mouseovers, drag and drop, and edit states should be incorporated in the high-fidelity wireframes.

Process
After an initial interview and brainstorming session with subject matter experts, I started to sketch the layout and list the required content with paper and pencil. For each KII, the visibility hierarchy of the content was determined by which content needed to be in view, and which content could be accessible through a drawer. The design was later refined in Figma and different interaction states (edit, drag, etc.) were mocked for the engineering team.

Insights
A key takeaway from the project is that when designing a page with many types of variables, it is important to establish a visual hierarchy that allows users to easily view the information they want to view regularly and dive deeper into secondary information through a drawer.

(click images for best view)

Default state with an expanded card displaying the KIIs.
KII on mouseover.
Drawer open in a view state. The open KII is visible through the scrim in the background to assist in identification and heirarchy.
Users can see the fields that are editable by mousing over them.
Clicking a field in the drawer changes its state to edit.
Clicking and holding the objective icon or title allows a user to drag and drop it to a new location in the list. The objective card becomes elevated through use of a shadow, its previous location is reduced in opacity, and a darker border appears indicating it is in drag mode. An arrow on the left side indicates position where if released it will be dropped. This visualization was used so the drop location would be visible as an expanded card was moved up and down the list.
When a KII is clicked and held down, a user can move it up and down the list. An arrow on the left side was used to show drop location and be visible as KIIs are dragged up and down the list.