SFSFL

2017 – UX/UI Designer

Promoting soccer in San Francisco

San Francisco Soccer Football League (SFSFL) is a semi-pro soccer league established in 1902, the league consists of three skilled divisions, twelve teams per division with games being played throughout the year. The leagues mission is to provide the highest level of men’s semi-pro soccer and raise the overall standard of play in the bay area. It leverages its history, memberships stability and league management to establish a soccer footprint in new and non-existing communities.

Challenge and Opportunity

The SFSFL website was built 8+ years ago using an old CSM platform that no longer provides support or updates. As a result the website is lagging behind in features and UI improvements.

As an active SFSFL member and practicing UX/UI designer – I took it upon myself to apply my skills in user research, user testing and UI design to lead and direct the redesign of a new SFSFL website.

Roles and Responsibilities

Product Design • Scaling • Leadership

UX/UI Designer

Jan 2017 - Aug 2017

Simplify user experience
Responsive design
Elevate the brand

Discovery

My first crucial step was to interview key SFSFL board members such as President Jeff Staben and Vice President Genaro Camacho to help me uncover league objectives and how they define success.

Research

After familiarizing myself with the objectives of the league, I focused on investigating the needs and requirements of the soccer players and coaches. I conducted in person interviews before and after each soccer match allowing me to ask scripted questions and collect instant feedback from existing and new players. A few players took this opportunity to walk me through the incompatibility of the mobile website using their personal devices.

Analysis

After completing user research, I started my analysis of the quantitative data I collected. I created hypothetical personas to help me represent/reference my primary users and confirm that the most important assumptions I was making are valid.

Design

Before making any design decisions, I created a flow chart to help me determine page count and what happens to my user when they visit a particular page. I discovered that the new site would benefit greatly by having a primary and secondary navigation.

Reviewing all known requirement, I started sketching out concepts in how to tackle the new navigation system influenced by the flow charts.

I created low-fidelity wireframes to review with users and stakeholders and updated the structure of the pages based on their feedback. I repurposed the updated wireframes to create a clickable prototype to conduct rapid usability testing with stakeholders.

Validation

The feedback I received from the rapid user testing allowed me to further iterate on the final design and move forward to create a hi-fidelity prototype. I headed back to the soccer fields to conduct usability testing, in every session I asked players to complete essential tasks – create an account, register for a new season, check your teams schedule. The majority of players were able to easily navigate through the new mobile site, validating my design decisions.

Conclusion

Although far from being finished, the insights gathered from the design process provided SFSFL stakeholders with a validated glimpse into players frustration with the current site and the future potential of what redesigning basic tasks such as – filling out and submitting registration forms, checking games schedules and field changes can provide for the players and league.