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 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
Discovering new overlooked pain points
Through user interviews and research, we learned that the stakeholder's vision was not aligned with what coaches actually needed. Instead, coaches highlighted more pressing issues: excessive scrolling, content overload, missing organizational structure, and no search function.
User Flow
I analyzed the user flow for what the process before looked like, uncovered friction points, and restructured the flow to remove them.
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.
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 with to bring the design to life.
Thanks for reading!
Want to learn more? Curious about the details? Feel free to reach out to me at
