Scattering Resources Website Redesign

Project goal: The goal is to convert website visitors to donors and inspire people to support Scattering Resources.
Client: Scattering Resources; Tamara Moore
Project Type: Website Redesign
Project Period: November 2021 - April 2022
Team Members: Christine Chung (PM) • Kelvin Dao (PM) • Ida Illashi (UX Designer) • Yuhan Wang (UX Designer) • Sophia Wang (UX Designer) • James Reyes (Developer) • Shutian Wang (Developer)

Current Website

New Redesigned Version

Project Summary

Scattering Resources is a nonprofit organization based in Atlanta Georgia, founded in 2009. Its mission is the purpose of helping those without the basic necessities to live with dignity in the U.S. and Haiti. It is the goal of SR to campaign on behalf of these disadvantaged individuals and provide resources that will enable them to move from a state of diasporas and desperation to independence and self-sufficiency.Scattering Resources’ contributions will be outreach, awareness discussions and workshops to individuals here in the U.S. Who have compassion for the plight of the individuals in Haiti. In addition, SR will also distribute donations of non-perishable items (i.e. send books, clothing, etc.) and send other resources to Haiti that will aid in the fight against poverty. Education Adequate Healthcare Access to Employment Training Opportunities and Counseling. This is for a website and mobile app development/redesign project with the aim of improving the user experience for donors, volunteers, and partners. Scattering Resources is seeking to create an app mobile to better facilitate and manage the operation and the engagement with participants. Redesign our current website to make it more user-friendly in terms of layout, design, and navigation as well as integrate efficiency between staff, volunteers, donors, and participants into a centralized nonprofit website.

Users

• Underserved communities; adults, children, and homeless individuals around the Atlanta area
• The School system and police department of Guinette county

Users Needs

• Share content to the public from the local school system and the police department.
• The police department wants to give updates on the county about important information on resources for community outreach

The Challenge

(What methods/processes/technologies/frameworks/languages were used to solve the specific problem, user needs, nonprofit requirements, and/or pain points? What are the features of the project, and how did they address the project objectives?)

Old/Current Website

The About Us tab doesn’t lead to the right section of the page. Instead, the user has to manually scroll up to view the About section

Social media buttons are too small -> factor for mobile devices.Social media buttons recurrent in 1 window (unnecessary)

Top header image resize? Takes too long to load.

Home page should have more “Why you should volunteer with us” information.- Testimonials before the volunteer button.

Contact email being hidden accidentally. -> Maybe move the newsletter or shrink the contact section’s font.
add notice info about what ‘signing up’ means like here ->Zip Code (dangerous) + Phone # are also useful for collecting user data/context.
OUR WORK and Donation Button should ideally not disappear when I resize my tab’s width (really important) -> factor mobile..
• “Contact US” page can easily be merged with the “About US” Page.
• Collecting surveys/stories from previous org participants could also be useful for growing the organization’s reach. -> can put on a blog section (?)

Scope & Constraints

The limitations of using WordPress plugins via Divi builder hindered our progress to implement our designs. The plugins were free and had limited functionality for us to develop certain designs (alignment of grids and responsiveness of certain sections when using a different media platform were all made difficult). Along with certain interaction elements of the design i.e. having a collapsible and expandable grid was difficult to figure out.This project was built with the Divi Editor, a plugin for WordPress. While the plug-in provided many helpful presets and options for website building, there were some things that were difficult to configure within the program.

The Solution

About Page (Our Team):→ make box fit and dynamic to profile image width.
Include the donation form button on the navbar to make it easier to donate. (Tools: Stripe, Paypal, ..?)
- Have a more integrated donation page on the website. With a simple donation methods option.

Create a separate events page with an archive list of past events. 

Our Work -> Our Services (rename) [efficient];

Different pages for volunteer work (recruiting)/ services and workshop services

The Impact

(Project success metrics, who or what will project impact)

This project will impact the users who rely on getting their information about Scattering Resouces or requests for services via the website.The project’s progress metrics are based on project timeline performance where the team follows weekly tasks and responsibilities. The tasks are a reflection of deliverables worked on by individual team members assigned to do. Weekly Monday meetings are held each week for the team to discuss and share updates.

Project Design Process

Research

To get a further in-depth analysis from users of the website we conducted the interviews to get an overall assessment how current user's experience are with the current website. By getting a better understanding of the user's feelings and thoughts when using the current website, our team can then better pinpoint what needs to be changed and what doesn't need fixing.

This is some text inside of a div block.

During the interview processes we also conducted usability tests where we ask the users to follow through certain tasks when navigating through the site.
The reason for doing the usability tests was to understand if our users are getting to the right information they needed and other goals they have when going through the site.

Insights we learned:
1. Donation button and overall presentation of donation page needed to be presented better. "Donate button - needs to be in larger font;bolder and stand out more, greener?"
• Takeaway: It should serve as one of the main feature of the website.

2. Possibly could the donation page automatically keep info on file, so current users don't have to enter each time to donate.

3. User's other goals when using the site was to look at recent events.
• Takeaway: Emphasize on redesigning the events page what will quickly capture user's attention and provide all the right events info they might need.

Design

Inspiration & References

As the project moves on from the research phase, my CO-PM and I delegated the tasks and responsibilities by assigning everyone each individual pages of the website that needed to be redesigned. I was tasked with working on the "Our Works" page.

Our client provided use with a couple of references she wanted us to take some ideas of and reimagined it into the new redesign.
• The World Wildlife Fund website (WWF.org)
• Americana Community Center Inc (americanacc.org)
• General comparison between similar existing nonprofit orgs

For the "Our Work" page revamp, I decided to take some inspiration from the WWF.org site.

Here they display content information regarding the work they do in a clear simple layout. I appreciate that they include the photos associating with each section to bring in visual context.
New features the client requested that I include in the page was a section showing financial tips. Where the users can go into the page and see helpful financial information regarding budgeting, credit cards and etc.

I looked outside into other inspirations including from dribble for example - this screenshot provided me some ideas on how to set up a card style scrollable carousel - for the financial tips section.


By making it into cards, the users can easily click or scroll through the different tips they want to learn. Information is clear and concise to the point for users to understand.
A section that the client wanted me to change was the Partnership's section. The section where all partnerships/sponsors with Scattering Resources are featured.

My client wanted to show more partners on the page while not cluttering it.

I figured that by using the card carousel design similar to the financial tips. I can display all the Partnerships (that'll be clickable and linked to their website for further information).

Low-fidelity Drafts

This is some text inside of a div block.
This is some text inside of a div block.

Design System

Through a team collaborated effort we alot pitched in design systems elements/themes we each had in our drafts, now into one cohesive design system for the overall new website. We needed a unified system where our developers can easily reference off of once they start building the pages.

Test

Feedback/Changes

Comments

  • User was confused on where to the "Workshops"
  • Wondering where the past workshop recordings would be placed
  • Had trouble finding classes/workshops information on the current website.

Takeaways

Based off on the comments made by the user. I decided it was best to seperate the two main topics of current page into two seperate pages. Made it easier for the users to find the topic and information that they are looking for.

Hi-Fidelity Mockup

Here are the finalized designs for the "Our Services" page and "Resource" page instead before where a lot of the information and still more content that was to be added per request by the client

Reflection

This experience thought me alot and made me learn new things I didn't expect. Acting as a PM for this team really showed me the importance of how to how