Soccer Sports App

Typing in “4-3-3” into Google automagically generates a significant amount of links for soccer or “football.” When in reality it is an actual soccer/football formation.

Jacob McDaniel's Portfolio, 433 Soccer App

433, soccer sports app for watching, learning, and staying up-to-date on your favorite divisions, clubs, and players.

I was contracted to make this a much more significant experience than just a soccer/football structure. The users of this app would be from around the world, cultured, die-hard soccer/football fans, that truly just wanted to learn about their favorite sport.

Researching the latest and greatest of “quality” experiences in sports apps geared towards a single sport were pretty limited. AND I was asked to use CBS Sports, ESPN, and Yahoo Sports as “quality examples of an experience worth building.”

My research of competition and similar apps.

I decided early on that the experience in some fashion had to be different from the previously mentioned sports apps. If not, I thought, “what was the reasoning for creating just another sports app?”

Then I realized just how big a sports app could be.

Haha. (like Frankenstein laughing “Bawhahahahahhah”)

I laugh because I took the contract, thankfully on an hourly rate, and then realized that this was going to take quite a while.

I threw together a very very quick mockup of a sitemap in how I envisioned the UX working and what pages might exist.

Jacob McDaniel's Portfolio, 433 Soccer App

433: Sitemap 1.0

Jacob McDaniel's Portfolio, 433 Soccer App

433: Sitemap Breakdown

Jacob McDaniel's Portfolio, 433 Soccer App

433: Sitemap Single Match Breakdown

While this sitemap held for a while, I realized the actual app would 3-4x the expected number of screens I had anticipated designing. Good for me. Bad for the client.

(The client was ok with it as they had not thought too much into it either.)

Once the basic, (underestimated) sitemap was approved, I started on UX and creating high-fidelity wireframes to what I anticipated the user wants to do. Typically I would do sketches and share those; however, this project was about as fast as I could get it done.

The client had mentioned they wanted to see their “favorite teams and players.” Thus, I created the app to be geared towards the selection of your favorites first. This would be your default screen every time you logged in.

Jacob McDaniel's Portfolio, 433 Soccer App

Wireframes 1.0

Separating the experience a bit from the normal “sports app” was an awesome task. Connecting to a particular sport, I could design an experience around the formations, interactions of a match, penalties, cards, time, players, Pre, Live, and Post Match; not to mention the fact that I love soccer/football and I would absolutely love to use this app. Simply put, I was stoked!

Below you will see the variations of Pre, Live, and Post match scenarios in a high-fidelity scenario:

 

Jacob McDaniel's Portfolio, 433 Soccer App

Wireframes 1.1

 

Honestly, this was a super fun app to design.

As a lead on a team of two designers, I lead the UX and UI. The other designer tackled the UI and came up with these designs for the UI; quite fantastically.

Jacob McDaniel's Portfolio, 433 Soccer App

UI: Walkthrough & Favorites

Jacob McDaniel's Portfolio, 433 Soccer App

UI: Pre Match

Jacob McDaniel's Portfolio, 433 Soccer App

UI: Live Match

Jacob McDaniel's Portfolio, 433 Soccer App

UI: Post Match

Check out the whole app (feedback and comments are welcome):
https://invis.io/E5CWUGEKG

Another great example of a sports app that solves UX issues in today’s current apps. Stay tuned for a possible app launch.