DFG - American Score Bay Area
Website revamp and understanding user pain points
Timeline
May - August 2025
Team
Nils Forstall, Jiewen Huang, Pronob Sarker, Johnson Shou, Eileen Calub, Mary Zhao
Tools
Figma, Square Space
Context
Who is America Scores Bay Area?
American Scores Bay Area is a California based nonprofit organization that combines soccer, poetry, and service learning to support various communities. They offer a balaced curriculum that supports the learnings of some underpriviledged communities.
The Ask
The Stakeholders tasked us with one goal: to migrate their old Radio Poets website to the new website ScoresU.
The old website was managed on wordpress, while scoresU is managed through Squarespace. The wordpress website is unsustainable and poses problems, and the stakeholders feared that the old site is not accessible to the coaches and daily learning environment.
Setting our priorities
What can we accomplish with the time and resources we have?
When we first began this project, I assumed the obvious goal was to revamp the website’s UI to better align with its branding guidelines. However, I quickly realized that the priority wasn’t visual cohesion: it was addressing critical usability issues. As Steve Job puts it, "Design is not just what it looks like and feels like. Design is how it works."
Target Audience
Understanding the users
During our initial meetings, we thought that the website is meant for kids, parents, and other visitors, and coaches. However, as we progressed further into the development proces, we helped the stakeholders realize coaches are the primary users of the site.
User Research
Using interviews and surveys, we discovered new overlooked pain points
We learned that migrating the Radio Poets section, which the stakeholders initially considered a top priority, was not actually what coaches needed most. Instead, coaches highlighted more pressing issues: excessive scrolling, content overload, missing organizational structure, and no search function.
User Flow
I narrowed the references down to a specific aesthetic: a retro-futuristic feel that pays homage to the past while expressing excitement for the future.
Step 1: Migrate the Poems and build new pages to store content
Research & Lo-Fi
Step 2: Everything else
After completing the migration process, we set out to fully transform the website.
I led a restructuring of the site architecture through heuristic evaluation, introducing a centralized Training Home that reduced scrolling by over 70% and improved navigation across web and mobile.
Within Coach Training, I added breadcrumbs, accordion-style content, and previous/next navigation to streamline lesson flow. To improve searchability under technical constraints, I created a centralized Google Sheet cataloging all resources for quick access.
Mobile Version
Reflection & Outcome
Fighting with Square Space and receiving feedback
One of the main challenges we faced was working around the limitations of Squarespace’s native code. In the end, we had to stay adaptable, adjusting our design approach to align with what was technically feasible.
Towards the end of the Develop for Good program, we presented our product to industry professionals at Bloomberg, where we received positive feedback. Our stakeholders also expressed appreciation for an excellent job and for going above and beyond the original scope of the project.
I want to give a special shoutout to Nils, who showed me the importance of a good PM in leading the project, steering us in the right directions, and facilitating communication with Stakeholders. I also want to give a shoutout to Mary, whom I worked together with to bring the design to life.