UX Design | Brand Identity
FIFA-Go-iPhone-X-mock-up2.png

FIFA Go OLD

 

FIFA Go mobile app concept

FIFA go is a mobile app concept for streaming the FIFA World Cup with a new camera technology that lets you see the field from the player’s point of view. Users can watch the game live from the player’s view, switch players, and watch the game from a normal broadcast.

Brief:
The FIFA World Cup is an international soccer competition, hosted by FIFA every four years and is arguably one of the biggest sports tournaments in the world. For 2018, Fox Sports teamed up with FIFA to develop a new technology where players have stabilized cameras clipped to their jerseys. This allows for a multi-perspective screen view and and promises a first person, immersive experience for the audience. As a group of three designers, our objective was to find the entry point into the experience and find the best way to switch between view cameras. 

 
 

Role:
Class Project
UX Design
Lead Visual Design

Team:
Kelsey Dieterich
Greg Hirshland
Weston Hall

Duration:
2 weeks

Methods:
User Interviews
C+C Analysis
User testing
Wireframes
Design Studio
 

Tools:
Pen and Paper
Whiteboard
Sketch
Photoshop
Illustrator
Invision

Deliverables:
Hi-Fi Mock ups
Invision prototype
User Flow

Device:
Mobile

 
 
 
 

Discover

Since this is technology that doesn’t exist yet, we had a wider range of research that needed to be done. What would soccer fans want to do with this technology? Which platform is best suited for such an interactive experience? We started with user interviews and asked basic questions about how they watch sports (in groups? at a bar? at home, on your phone? cable?) what they like to watch, memories about watching past World Cups, and what is most important to them when watching the World Cup.

We got the feeling that the World Cup is more of an experience instead of just a tournament. From our answers, we built a proto-persona to focus on as our target audience. We decided to focus in on the casual sports fan, and eventually the product could scale with extra features specifically for hardcore soccer fans. 

 

 
Cam Sports Fan.jpg

Casual Cam

Age: 25
Location: Los Angeles
Job: Software Engineer

 

Doesn't watch soccer year round, but likes to watch the World Cup because it’s fun to pick a country to root for.

Likes following stats.

When watching sports, he doesn’t like extra steps that take him out of streaming the game. 

The World Cup is held in a different time zone, which can be frustrating when trying to watch live.

 

 

Define

Casual Cam needs an immersive way to watch the World Cup. How might we utilize the player view to help Cam experience the game, instead of just watch it?

Design Goals:

• Design a mobile streaming app where you can easily switch views of the game from the broadcast stream and between player cameras.
• Structure the app so you can access all of the basic game and tournament stats.
• Be able to customize the app to a user's team. 

 

Develop

Wireframes and Ideation:
We went through a lot of ideas, features, and flows to settle on a minimum viable product. We focused on one user flow, which is Casual Cam’s entry into the app to watch a game, and how he would switch between player view, changing players, and the normal broadcast stream. 

_Ideation-horizontal.png

Extra features would creep into our flow along the way, complicating the app and widening our scope. It was a challenge to stay focused on designing for our main feature, which is streaming the game live and switching between the broadcast view and the player view. 

UI Design goals: 
• Sports apps have a lot of content! Making sure the layout doesn’t feel cluttered. Page navigation organization = less clutter. A navigation bar designates what content fills in the page, and the content is delivered in a scrolling list. This way, pages with a lot of content can be organized into categories and give the user less to sift through.

• Make sure switching between player views doesn't feel invasive to the experience. 
Side menu player scroll: A side menu opens up when a user wants to change his or her player view while watching fullscreen. The player cards are compact but give a clear view of who the players are. A small navigation at the top lets you change between teams.

 
007 Widescreen 04.png
 

 

Visual Design goals:
• Can we customize the app to a players favorite country?
• Make the app feel like Fox Sports and FIFA World Cup 2018 Russia. 
Use color to relate and customize: The color palette for this app is informed from the navy colors in FOX Sports branding, the blue from FIFA branding, and pulls visual patterns from the FIFA World Cup 2018 Russia. Color can also be used to customize the interface, changing to the country flag colors when the user choses a home team. 

 
 
 
 

Deliver

The deliverable for this project was a mid/hi fidelity prototype of one user flow.