South Bronx United Website Redesign and Development: Highlighting community impact and resources
Winter 2021
Develop for Good is an intercollegiate technology/design organization that aims to generate social good by providing web app and development services with non-profits. Some of our most notable partners include UNICEF, the World Bank, the Nature Conservancy and the World Health Organization. Check us out at https://www.developforgood.org/!
Project Summary
South Bronx United is a non-profit organization that uses soccer as a vehicle for social change, combining athletics with academic support, college access, mentoring, immigration legal services, and more. The goal of this project was to create a website that (1) easily maintained by SBU staff with little to no website development experience, (2) establishes an inviting and seamless experience for the target audiences (supporters/donors and participants/families), (3) provides information about all of SBU’s platforms and services in an organized way, (4) tells compelling stories about SBU’s community impact, (5) converts website traffic into donations and other forms of support, and (6) offers a user experience for South Bronx youth and families with options to be viewed in English, Spanish, and French.
The Team
Morgan Belous, Cornell University ’22
Alex Feng, Boston University ’22
Samantha Tripp, University of Southern California ’21
Avery Park, Georgia Tech ’21
Gray Wong, Stanford ’22
The Challenge
When we first spoke to our clients, they pointed out the two main user groups of the South Bronx United website, which are participants/families and supporters/donors.
- Participants/families
Geographically, the majority of these users live in the Bronx, with a small number living in northern Manhattan. Most of the families are multilingual, with primary languages being English, Spanish, and French. These users visit the website to register for programs, learn about events, and utilize community resources.
2. Supporters/donors
These users range from college students to retirees, the majority are native English speakers, and they mainly live in the New York Metropolitan area. They visit the SBU website to make donations, get involved in volunteer and career opportunities, and learn more about programs and impact.
Our clients wanted to make sure that we created an experience that satisfied both of these user groups in a clear and easy to understand way. The previous SBU website had a confusing navigation bar with many dropdown links, which made it harder for users to navigate the site seamlessly. Additionally, there was duplicated content present throughout the site, which made it feel cluttered and unorganized.
The largest challenges that we faced throughout this process involved technical constraints with Squarespace. While the platform is extremely powerful and makes building a website quick and easy for everyone, especially those with no technical experience, it has some limitations. Some issues we faced were having a hamburger menu on the desktop version, applying gradient effects to images programmatically, and creating lightboxes for board member bios.
Solution
To overcome these challenges, we did a complete information architecture redesign, used Figma to implement prototypes, and then utilized Squarespace with code injection (HTML, CSS, and JavaScript) to make our designs come to life. Using Squarespace was a necessity because we needed the site to be maintainable by SBU staff with no coding experience.
We consolidated all of the program information, community resources, and more, making sure to categorize them accordingly so that users can easily find what they are looking for. For the navigation, we decided on having 3 links (‘donate,’ ‘volunteer,’ and ‘register’ on the top in order to emphasize their importance and then put all other information inside of a hamburger menu.
We used lots of images, videos, and statistics throughout the website in order to better highlight the real impact that these programs are having on students. Additionally, we implemented a Google Translate button so that the site is accessible in various languages. In order to overcome some technical constraints with Squarespace, we used a browser extension called Squarespace ID finder to easily uncover the block ID for each section of the site rather than meticulously using the browser developer tools to search for them. Visit the new site: here.
Our Impact
This project will impact many different stakeholders. First, current SBU participants will be able to effortlessly utilize the abundance of resources on the website. Second, prospective students and families will be able to more easily find programs to register for and ways to get in contact with SBU staff members. Lastly, supporters and donors will be able to more clearly see the tremendous impact that SBU has on the community. This will hopefully result in more donations, further expanding SBU’s reach.
