City Harvest

A SharePoint portal serving 200+ employees daily

Timeline

3 months (Jun – Aug 2025)

Role

Product Designer

Outcome

Redesigned portal for immediate usage, hi-fi prototype and detailed research deck.

Overview

About City Harvest

City Harvest is one of the largest New York nonprofit organization, rescuing and delivering food for New Yorkers experiencing food insecurity.

The very truck that visits my neighborhood in Bedstuy every Tuesday :D

why a redesign?

Fragmented communications & resource sharing pipeline

In 2021, City Harvest published its organization-wide SharePoint intranet with the hope that resource sharing would be centralized. However, the original design does not support this well.

State of the portal in Feb 2025

…so I came up with projects goals together with Harvesters

Improve navigation

Refine navigation so employees can locate essential information regardless of portal familiarity.

Streamline communication

Improve internal content management experience to reduce inaccurate information.

Increase adoption

Improve content and layout design to increase engagement and confidence in portal exploration.

initial problem discovery

How might I reorganize information on the portal to increase communication efficiency for Harvesters?

How might I reorganize information on the portal to increase communication efficiency for Harvesters?

solution highlights

An easy-to-skim portal and a scalable mini design system

An easy-to-skim portal and a scalable design system

Home page with reorganized information architecture

New design system, especially new button/files components following the City Harvest brand guidelines

Department templates that satisfies departmental specific information but still stays consistent overall

the great research that formed this design…

A silent struggle

Stakeholder interviews & portal audit

Gauging company culture and working habits

My main research goal was to understand what common experiences did employees have across the organization so maximize the impact of the design recommendations.

From this research, I mapped out the system that is being used under City Harvest:

Stakeholder and IOT maps the internal system

I narrowed my research down to these 3 key insights that guided my ideation:
#1 Inconsistent information architecture frustrates employees for non-regular tasks.

Sending large files and stems of a single fix is tedious and time-consuming, especially when most of the time the receiver has to realign the new files with their local version manually.

Sending large files and stems of a single fix is tedious and time-consuming, especially when most of the time the receiver has to realign the new files with their local version manually.

#2 Employees feel disoriented due to lack of standardized departmental pages.

Sending large files and stems of a single fix is tedious and time-consuming, especially when most of the time the receiver has to realign the new files with their local version manually.

Sending large files and stems of a single fix is tedious and time-consuming, especially when most of the time the receiver has to realign the new files with their local version manually.

#3 Outdated and inaccurate documents across the portal lead to employees completing tasks incorrectly.

33% of the user interviewees noticed outdated documents as they were showing us the Sharepoint.

33% of the user interviewees noticed outdated documents as they were showing us the Sharepoint.

I turned them into opportunities that can guide my design process:
  • rethink information architecture to better accommodate seeking unknown-items?
  • adapt a standardized template for different department needs?
  • use design to help cleaning up the portal efficiently?

How might I…

solution IA explorations

Regrouping different types of document

The portal has little intentional organization or information hierarchy. After testing with harvesters, I came up with categories such as "Personal Access" or "Forms & Services" emerged as guidance for better skimming experience.

View The Org Chart

Policies and procedures

Deib resources

Reporting Showcase

Main website

Chart of accounts

IT & BI File Share

your One-Drive

IT & BI File Share

your One-Drive

IT & BI File Share

your One-Drive

your One-Drive

your One-Drive

your One-Drive

your One-Drive

your One-Drive

Quick links

View The Org Chart

Key resources

Policies and procedures

Deib resources

Reporting Showcase

Main website

Chart of accounts

Personal access

IT & BI File Share

your One-Drive

Forms & Services

IT & BI File Share

your One-Drive

Primary screen space reconsideration

I found out that Harvesters access information divergently instead of convergently, meaning that they search for documents directly instead of finding them through departments, so having departments as a dropdown would save more primary screen space for direct access to key resources.

Departments

Departments

City harvest

City harvest

Town Hall

Town Hall

Harvester Vocabulary

Harvester Vocabulary

City harvest

City harvest

Departments

Departments

Town Hall

Town Hall

Harvester Vocabulary

Harvester Vocabulary

design decicions

Rebranded buttons with more interactivity

Since buttons/folders were the main functionalities of the site, I came up with a new set of buttons that adheres to the City Harvest marketing brand guidelines to bring consistency and interactivity to the portal.

Original buttons

Original buttons

Iteration 1 – simplified typography and darker color for accessibility

Iteration 1 – simplified typography and darker color for accessibility

File Share

My One-Drive

Iteration 2 – Added shadow and hover interaction

Iteration 2 – Added shadow and hover interaction

File Share

File Share

One-Drive

Iteration 3 – Changed button labels to be less ambiguous

Iteration 3 – Changed button labels to be less ambiguous

IT & BI File Share

File Share

your One-Drive

final version – Used function colors, not brand color, and added icons for skimmability

final version – Used function colors, not brand color, and added icons for skimmability

File Share

File Share

IT & BI File Share

IT & BI File Share

File Share

File Share

your One-Drive

your One-Drive

Explorations for carousel design

Towards the end of the contract, I had sometimes to really refine my design and make the carousel an essential part but not intrusive to Harvester. I chose the last option as it looks like a physical calendar and deprioritized images so that it doesn't take lots of mental space, while still hints at that social element.

Possible carousel states for SharePoint admins

Towards the end of the contract, I had sometimes to really refine my design and make the carousel an essential part but not intrusive to Harvester. I chose the last option as it looks like a physical calendar and deprioritized images so that it doesn't take lots of mental space, while still hints at that social element.

Finally…emojis for sense of community

City Harvest is such a warm and competent community that always pushing and encouraging each other to do impactful and meaningful work. As a final touch, I translated that dynamic from real-life into the portal by sprinkling in emojis that can be customized by each employee.

Retrospective

Taking initiatives pays off

Since I worked mainly with non-designers, I developed the skills to really sell my ideas and designs, and invite everyone into learning the design process. The result was that no one was surprised when the final design came out (in a good way).

A chance to practice my component muscle

As there were many different types of files needed from different departments, adapting one components to serve multiple purposes was a fun challenge for me. With Figma Slot having just come out, it truly felt like I was designing slots customized to City Harvest Portal.

Thank you to the IT & BI Team 💖

I was truly blessed to have worked with such smart, kind and amazing people. Thank you to both of my manager, Bronwen Stine and Frances Castro, who had taught me so much and been so graceful to me during the project.