NYC Department of Education

PSAL NYC
Sports App

In 2015, I helped design the mobile app for New York City’s Public Schools Athletic League. I was responsible for all of the UX design and worked closely with the client and our dev teams.

The Challenge

New York City has the largest public school athletic system in the country (PSAL). In 2014, over 150,000 people were visiting its website every month, and mostly from mobile devices.

Screenshot of the PSAL homepage with news and events shown at an illegibly small size.

The PSAL website on a mobile device.

Users were frustrated with the mobile experience, often giving up before finding what they needed.

VGD created a mobile app to help athletes, staff, and fans follow their favorite sports on the go. I was the UX lead on the project, while supporting our dev team and project manager.

Research & Interviews

Google Analytics revealed clear trends in user behavior; traffic consistently spiked after school and in the evening after events.

To learn more, my colleagues interviewed athletes, coaches, parents, athletic directors, and PSAL staff.

We learned that people rely on the website to find event locations, rosters, and rules. However, the site wasn’t designed for mobile devices, so people frequently called PSAL’s office for help.

two hand-drawn notes. wireframe of the team page with sections for schedule, news, and roster. diagram with the words sports, schools, and athletes branching from teams.

One of my sketches for the Team page and a diagram of the relationship between pages.

Prototypes & Testing

Athletes, coaches, and PSAL staff tested early Axure prototypes Axure prototypes. I enlisted and trained my teammates to conduct usability testing to help me cover the broad user-base.

We went through several iterations before settling on the app’s information architecture. Then I refined critical user flows, such as the login and registration process, through higher fidelity prototypes built in proto.io.

designs show variations in tab bar options and team section interface design

Two early wireframes for the Team page.

Specs & User Flows

I wrote the functional specs for our dev team and worked closely with PSAL to design their web services.

I also used Omnigraffle to create an interactive map of user flows. This helped our stakeholders understand the nuances of the app and visualize the progress we were making.

color-coded map of page titles. some are labelled "continue to:" A key identifies pages as approved, in-progress, info needed, etc.

My interactive map of the PSAL app.

PSAL generates a tremendous amount of content for its 25 sports and 400+ schools. That’s why we made sure the app could be personalized to each user's needs.

People were already selecting their favorite sports, teams, and athletes on the PSAL website, but the feature only offered shortcuts to each page. We extended this functionality to the app and used it to customize the news and event screens.