Synergy Soccer

Synergy Soccer is an elite suburban travel soccer club. The client wanted a tool to consolidate game schedules and communication for administrators, parents and players through one native app.

(Full case study coming soon)

Sitemap

After figuring out user flows focusing on main tasks and goals, I created an (annotated) sitemap to help determine the application’s navigation structure and page hierarchy. The annotations offer clear and concise content as well as the actions taking place on each page/screen.

Landing & Login Wireframes

Since the app is internal facing, users must sign up. Once the user has signed up and logged in, the system allows them to stay signed in. They may sign out in Settings.

An important factor I wanted to address here was to differentiate login from registration/sign up through a variation in color, while keeping the process simple and quick. Signup should be hassle free so that the user can actually get to the screen they want to asap.

Team Selection Screen

The modal gently informs the user what to expect next- which is to select teams to follow. An added convenient feature is the ability to pick and assign a color to the team the user wishes to follow. This enables easy reference at a glance when viewing game schedules. The user may choose to not pick any color and still view schedules as desired.

Once the teams have been selected, the system pulls up the respective schedules and displays it in one of two view formats:
list (week) view/date (month) view. The view format can be controlled by a non-intrusive toggle. 

At first glance, the schedule offers just enough information regarding game time & location. A carat drops down to show additional features such as  details of competitor team, field location (that can be mapped) and the option of adding event to phone calendar.

Communication

The app allows for direct messaging other team/ club members, as well as a social newsfeed to which users can post images and comments regarding game changes/meetups, etc.