Background Info

What is UPGrade?

UPGrade is a 10-week long summer initiative hosted by the student organization Design Co at UCSD. During the length of this program, 6 student teams are paired with nonprofit organizations to help boost their exposure. It is meant to model a real UI/UX internship and uplift organizations who dutifully serve their communities. Students build and maintain a relationship with stakeholders throughout the course of the project to eventually present a final deliverable, which for most organizations is a logo/brand redesign or a revamped website/app.

My team was assigned to work with Heaven’s Windows, a non-profit organization based in San Diego, dedicated to assisting adults, families, and children that are struggling with food insecurity. The organization hopes to uplift poverty-stricken communities in San Diego and promote connections amongst each other in the process. They hope that people who are inspired by Heaven’s Windows will continue to seek opportunities to become involved in the community and go forward together, without leaving anyone behind:

“We strongly believe that a community only moves forward when it gives attention and assistance to areas where it’s lacking, and this initiative aims to help people move forward with us.”

Project Deliverables

Create an appealing and user-friendly website that will give Heaven’s Windows more exposure, communicate their mission/impact, and be more informative to users who need its resources.

Essentially, make it easy for users to explore other opportunities and seek the different ways they can contribute to their community.

Appeal to different members of the community, including volunteers, staff, partners, and donors.

Create spaces for them on the website that celebrate their contributions and make them feel connected.

Introduce Heaven’s Windows’ newest program, the Village Garden Project.

Create a logo for the program as well as implement a new page on the website for further explanation and to create interest.

Research and Analysis

Defining the Problem

We concluded that:

The Heaven’s Windows website should be reorganized in a way that promotes engagement with the site, expands the organization’s community and connections, clearly communicates services and resources, and fosters donations and support.

We framed our design process around the question:

“How might we redesign the Heaven's Windows website so that website users understand the impact of Heaven's Windows and become involved in the community by donating or volunteering to help?”

User Research

DESIGN APPROACH

Before beginning our project, we considered how we wanted to approach it. Since we would be working directly with our stakeholders in the Heaven’s Windows organization, Angela Kretschmar and Michelle Zive, we wanted to make sure their opinions were heard and taken into consideration throughout the design process. Therefore, we set up weekly meetings with both of them in order to make sure that they approved of our current designs and were fully involved in the process. During these meetings, we often conducted co-creation sessions. Some methods we used were card sorting, interviews/surveys, prototype testing, and more. By doing so, we managed to create a final product that both satisfied us as designers and fit the needs of Heaven’s Windows as an organization.

We also met up weekly with our design mentor, Kanal Chhajed, to receive more feedback and mentoring throughout our designing process. With a mentor’s assistance, we were able to move forward with our design process more efficiently and confidently.

USER SURVEYS & INTERVIEWS

We created a short user survey to gather surface-level data from our users that would ask them about the most important uses for the website. We wanted to distinguish between user groups when conducting this survey: volunteers/staff, donors, community members, and new users. Once the user confirmed which user group they were in, they would answer questions about the website based on their user group. For example, a volunteer would be asked to rate their experiences with volunteer-specific interactions, such as the discoverability of the sign-up link and the frequently asked questions/information to describe the process of volunteering. Including the likert scale on these questions, we discovered attitudinal data that users found it difficult to locate information, including links to food assistance as well as a volunteer link.

Our team also conducted interviews with volunteers of Heaven’s Windows as a way to hear about their experience with Heaven’s Windows as well as receive important content for the website and Instagram posts. The information that we gained from this interview was crucial for our User Personas. Additionally, as a method of increasing volunteer engagement on the new site, we looked to have volunteer stories to showcase the real impact Heaven’s Windows could have on volunteers. Instead of just describing the volunteer opportunities, actual stories from volunteers of their thoughts and opinions on Heaven’s Windows programs would be much more impactful. We asked several questions, starting with an introduction from the volunteers, how volunteers first got involved, and their favorite aspects of volunteering with Heaven’s Windows. As a way to increase engagement on the website, having content that users can relate to and be connected with was very important. Along with content, we focused on the visual layout as well as the color scheme of the website in this interview.

We sent out the survey as a Google form.

Competitive Analysis, Observing Strengths and Weaknesses

Major Pain Points and Insights → Design Goals

Changing the color scheme and overall styling.

Our stakeholder wanted Heaven’s Windows to feel warm and inviting and encourage people to stay. We worked on creating a completely different styling for the website to match that vision. We changed the original main colors (highly saturated red and blue) to more soft colors, including yellow, green, pink, and blue.

Creating more call to action buttons.

By adding a lot more buttons and places to click and redirect to, we hoped to make the website flow more intuitively. This is best reflected in our new home page, which has buttons that lead to every other section of the website so that users know exactly where to go for certain things, and this is also very handy for people who have never used the website before. If there is any mention of a program or resource for a user to explore, we wanted to include a call to action item for them to continue pursuing that program or resource without interruption.

Restructuring the organization of the whole website.

Our stakeholder emphasized the need to cater to different user groups for the website: volunteers, staff, donors, community members, etc. With the original website organization, a lot of the information was spread out and some user groups were left a little neglected in terms of information and resources. To account for their needs, we created some new pages for them as well as reorganized the site to flow better and be more intuitive so that different user groups would easily know where to look for information specific to them.

Integrating statistics, photos, and text.

To show Heaven’s Windows’ impact more intuitively and leave a deeper impression on the viewers, we included numbers of families and meals they have helped/served on the website. Some photos on the old website were so large that they took up the whole screen. Therefore, we also adjusted the layout to show photos with more effective subtitles on their sides.

User Personas

Structure, Styling, and Design Decisions

Site Map and Information Architecture

We constructed a site map for a better visual representation of what structure this redesign would take, and what we needed to focus on the most.The construction process involved collaboration between our entire team, stakeholders, and our mentors.

We created a site map of Heaven's Windows original website for a better understanding of what we had to work with and what we had to change. The notes we had from our competitive analysis were used to determine what kind of pages and subpages were the most relevant for a food-centered non-profit organization.

Site map before (above) and site map after (right).

Many major changes were made after consulting our research, hearing out the needs of our stakeholders, and receiving feedback from original user surveys and interviews of the original site. Our final site map contained a lot more detail in order to address the different needs of volunteers, donors, and community members. The new organization gave users dedicated spaces to find information catered to them and also allowed them to explore other parts of the site with minimal confusion.

Our new information architecture satisfied our design goal of restructuring the organization of the website!

Moodboard and Style Guide

The original colors of the Heaven's Windows website were quite bright and harsh. They highlighted calls to action and distinguished sections from one another very well, but we wanted to convey a much softer, welcoming feeling.

We turned to fellow food non-profits to see what colors they used in their branding. We noticed a remarkable difference in color scheme from other types of nonprofits; for example, medical non-profits tended to be more minimalistic and clean, so we noted that there was a very specific vibe that these organizations seemed to equate with friendliness and food.

This process of evaluating the branding of other non-profits in the same field gave us a clear visual direction and inspiration to reference in the following stages of the design process.

Color explorations brought us closer to our design goal of overhauling the website's overall styling.

The color palette we selected was a good balance of cool and warm, to convey warmth and welcoming but also subtly assert professionalism and credibility. Colors like green and yellow signal health and good food.

We chose Rubik as our font because its roundness still conveys an air of lightheartedness and familiarity, but its simplicity and cleanliness is both accessible and credible.

All buttons, and all rectangular elements in general, were given rounded corners to further soften the branding and bring comfort and peace to the users.

Low Fidelity Wireframes

For full exploration of different types of layouts, each member of the team made their own initial sketches of how each page of the website could be structured. After discussion and feedback from our stakeholders and our mentors, we combined the elements with the most positive feedback to create our first set of wireframes/prototypes.

The main takeaway from this prototype was that there would be a clear division between sections to allow users to absorb the information at their own pace. This vision included a lot of statistics on pages that introduced the organization in order to build their credibility and gain trust within the community. To double down, we included sections that would allow volunteers and community members to share their stories.

This structure also contained a lot more information compared to the previous website. Since community members, volunteers, and donors had their own pages, these details were added to further explain their roles and provide accurate information on resources and locations they could access. This included more call to actions button as well so users could easily move between pages to access relevant information if it was related to the page they were currently on.

These wireframes satisfied our design goal of integrating statistics, photos, and text together as well as adding more call to action buttons. However, we would continue to iterate on them to improve how these elements would impact the user.

Mid-Fidelity Wireframes and Usability Testing

Our next step was to map out interactions and have users test the prototype in order to assess their usability and effectiveness. This included functional drop downs, text boxes, and buttons to test if the user would naturally lean towards these actions to use the website. More detail was added from the lo-fi prototype as well, with initial text content we had planned for each section and a few colors to distinguish elements.

We conducted user testing with a variety of subjects, including our stakeholders/other people on the Heaven’s Windows team, our mentors, and other people in our daily lives. By doing so, we were able to get a range of feedback, from people who were intimately familiar with the Heaven’s Windows website to people who had never heard of Heaven’s Windows before. We first had them do a number of tasks, specifically to find the link to donate, find the link to volunteer, find a summer meal site/food assistance, and find the Heaven’s Windows contact information. We chose these tasks because they were actions that users typically took when first visiting the website. From our user testing, we gained a significant amount of insights and made changes accordingly, such as changing our “Get Help” section to “Resources” to make things clearer to users and removing the 3rd button in the navigation bar to reduce the repetitiveness.

Hi-Fi Prototype

After some adjustments made from our feedback, we began the most detailed version of our prototype that would later be translated into the web builder of our choice, Wix. Here we began to incorporate Heaven's Windows new styling and planning the actual content that would go on each stage.

Final Implementation

Home Page

Before (left), after (right)

We wanted the home page to be a place where all major features of the website could be easily reached. In this redesign, users can explore a summary of Heaven’s Windows all in one page—the organization’s goal, how much of the goal they have achieved, ways to receive assistance and give assistance, and how to keep in contact with Heaven’s Windows.

It is broken up into four sections:

Heaven’s Windows welcome and description, with buttons to take the user to volunteer opportunities or to the about us page.
Impact section, with graphs to visually showcase how much work Heaven’s Windows has accomplished, and a button to the about us page.
A shortcut to the food assistance page for users who visit this website in hopes of finding resources.
Shortcuts to the different ways users can contribute to their community/Heaven’s Windows: through volunteering, donating, or contributing produce to the Village Garden Project.

‍

About Us

To further advertise Heaven’s Windows accomplishments, we separated the About Us section into two parts.

Mission: Through this tab, users can get a good idea of what Heaven's Windows stands for and if joining this community aligns with their personal goals. The statistics gives their work credibility.

Our Leadership: Here, website users can get to know the team behind Heaven's Windows and learn how to get in contact with them if needed. It is separated from the Mission tab for better organization and to make discovery of the contacts easier.

Before (left), about us: mission (middle), about us: meet leadership (right)

Resources

Resources (before) - 3 different pages

Previously, resources and programs provided by Heaven’s Windows were separated into three pages for food assistance, child nutrition, and community resources. We decided to combine these programs into one main page so that users don’t have to navigate to different places for general information on how to receive help. We added anchors to the menu bar so that they can still jump straight to the info they need right away.

The redesign remains quite faithful to the original, with an additional map to allow users to find food resources near them quickly. While we made minimal changes to this section, our final decisions were motivated by our main deliverable to make the website more user-friendly and informative for its different audiences.

Volunteer

One of the largest changes we made was to completely revamp the volunteer experience. Previously, there was no page for volunteers alone and one of the biggest pain points we discovered in our original surveys was how difficult it was to find any information on volunteering.

The addition of this page made the sign-up link easily accessible, and also clarified any questions about the process and experience that volunteers have with Heaven's Windows. In order to incentivize volunteering, we also included "Volunteer Stories", a section that would allow actual volunteers to talk about their favorite experiences with their community.

Overall, the intent of this page was to invite community members to help others and give them all the resources they might need.

Final Thoughts

A photo of the team behind the Heaven's Windows redesign.

During the 10 week period of this project, the team faced several challenges. Firstly, this was many of our first experiences working directly with a stakeholder and so constant communication was an extremely important factor in our success. Beyond the work we needed to do on the actual final product, organization and structure was the key to staying on track and keeping everyone informed of decisions, next steps to take, changes, etc, especially since we had a time limit. Secondly, we faced many problems during the research phase, as despite our attempts to reach out to volunteers and other members of the Heaven's Windows community, we received limited responses on our survey and limited users who were willing to be interviewed.

Despite the challenges, our chemistry as a team allowed us all to recognize what our greatest strengths were and how they could be combined for this collaborative effort. We allowed each team member to voice their own opinions and illustrate their ideas, and during each team meeting, our discussions were productive and deliberate. So despite us working on different sections, our cross-functionality allowed us to create a product that we are all proud of, and that our stakeholder was very satisfied with.

If we had more time with this project, we would have loved to add more content to the Heaven’s Windows website in order to appeal to potential donors and volunteers. For instance, it would have been great to add a volunteer shoutout section in order to recognize volunteers who have put in a significant amount of hours. However, given the short time frame and the fact that most information about the organization was not readily available for us, we are satisfied with the current product. Moving forward, we hope that the non-profit will be able to insert some of this information, and continue using the website as a tool to spread the word about Heaven’s Windows.

UPGrade 2023 Summer Design Initiative:

Heaven's Windows Website Redesign

Role

Team

Timeline

Link