UX Design | Brand Identity
FIFA_Go_zoomed-in.png

UX/UI Design

 

Overview: 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.

Challenge: Hypothetically, FOX Sports has teamed up with FIFA to develop a camera that can be clipped to the player's jerseys during the World Cup games. 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. 

Solution: We developed a FIFA World Cup mobile streaming app concept that provides games, stats, and multiple viewing options of live games and replays. Our focus was on the first person point of view stream, making it as seamless as possible to switch between different player views. 

Role: UX Design, Lead Visual Design.

Type: Class Project. 2 weeks.

Platform: Mobile App.

Deliverables: Hi-Fi Mock ups, Invision prototype, User Flow.

Tools: Pen and Paper, Whiteboard, Sketch, Photoshop, Illustrator, Invision.

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

 
 
 

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.

 
 

 

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.