Securing Intel's Multi-Year Deal with an Immersive Soccer App

  • Clients:
    Liverpool Football Club (LFC)
    Intel
  • Role: Lead UX Designer
  • Platform: Android and iOS
  • Users: Soccer Fans
  • User Research
  • Feature Scope
  • User Experience
  • Wireframes
  • Prototypes
  • User Flows
  • Design
  • Animation

Project Overview

In 2017, I spearheaded the UX design for Intel's groundbreaking Immersive Media project, aiming to revolutionize soccer fan engagement through cutting-edge technology. Within a challenging six-month timeframe, I led a cross-functional team to develop a native Android and iOS application, navigating complex stakeholder requirements and a rapidly evolving technological landscape. My responsibilities included defining project scope with the Product Owner, prioritizing features, conducting user research, collaborating closely with both Android and iOS developers, and crafting the application's design and user flows. My team consisted of a Product Owner (PO), iOS and Android developers, and 2 UX Designers (including myself). This case study explores how we successfully delivered an engaging app that not only met Intel's business objectives but also directly contributed to securing a multi-year deal with TNT for NBA VR experiences.

The app leveraged FreeD (360-degree volumetric video), Voke (VR), and innovative clip tagging technology to showcase the technology and engage fans.

LFC Android and iOS app.
A sneak peak of the final iOS and Android app.

Challenge

The main challenges we faced in this project were balancing the needs of three different stakeholder groups, a quick timeline of 6 months, producing an application that would increase fan engagement in soccer, and a lack of defined features and needs from the client, Intel.

The primary challenges we encountered in this project were:

  • Conflicting needs of the three stakeholder groups
  • Short project timeline of 6 months
  • Delivering an application that would boost fan engagement with soccer
  • Lack of clearly defined features and requirements from the client, Intel

Define Business Objectives

Intel had a very narrow idea of what they wanted- additionally LFC had their own requirements. This project was also being used by Intel as a study on how they could use their technology to engage fans for other teams and other sports.

We did not have much time so it was crucial to download as much information as possible and clarify the business objectives as soon as possible. This was done through a series of discovery meetings and stakeholder interviews.

We defined our business objectives as the following:

  • Increase fan engagement and loyalty by providing access to personalized content.
  • Solidify leadership in an immersive media landscape by dynamically delivering FreeD (360-degree volumetric video) and Voke (VR) content to fans.
  • Increase adoption rate of Intel’s products by connecting with a broader audience.

Define Process

I've learned over my career that each project is unique and there is never a standard process. Therefore, I find it critical to define and align with my team on the best process for the particular project.

For the Intel project we decided that creating a Deliverables Map would be the best way to ensure that we were aligned on the process and would achieve our goal. We customized our process to balance business objectives with user needs and to make sure that the features we defined could be built by development in the short time period we had.

The Deliverables Map illustrated what we needed to do to accomplish our end goal. Providing a high-level overview of major milestones, the Map allowed us to track where we are in the process, and identify and expose potential risks and blockers early on in the process.

Discovery Deliverables on Postit notes.
Discovery workshop.

Defining what an MVP will look like took many meetings, brainstorming sessions, white boarding, and iterating on very crude wireframes. Once we had a loose idea of which features were needed to meet the business requirements, which features we thought would engage our users, and understood what was technically feasible in this short timeline, it was time to iterate on wireframes.

Sketches of mobile apps on whiteboard.
Here, the PO and I made initial sketches of potential features. This is an organic conversation that happens to get ideas flowing and to talk through use cases.
Whiteboard showing prioratized list of features.
Here, the PO and I made a list of features, refined the list, and then prioritized the features for a MPV and for later releases.

Continuing on the iterative feature building process, I wanted to get an idea of how the features will be sorted in the app so I made a site map (below) using the MVP feature set to help define the application’s information architecture.

Whiteboard showing sticky notes of sitemap.
Site mapping workshop.
A user flow of the app.
High level user flow.

Wireframing, Prototyping and User Interviews

We needed to validate that the features we defined for MVP would excite and engage the user, as well as meet their needs. To do this, we needed to put together a rough prototype for users to test once we began our research.

Wireframes of the app.
Rough wireframes fleshing out the backbone of the app.

So I took these wireframes and began to create the prototypes that we would use for the interviews. We defined the four main features that we wanted to demo to users:

  1. Filtering
    • How a user would search through games to find certain plays.
  2. Live-Match
    • How a live game would be handled in the app.
  3. Post-Match
    • How a match that happened in the past would be presented.
  4. Sharing
    • How sharing would work in the app.

I decided to do these prototypes in Principle because Principle gave me the ability to make the prototype feel like a real native app; I utilized animations and page transitions to convey the most realistic experience of the app to users during interviews.

High-fidelity mockups of the app.
Screenshots of part of the prototype in Sketch.

User Interviews

We created a screener in Google forms and recruited most of our interviewees from social media. Some of the members of our team were avid soccer fans so it was easy to get access to the Facebook Groups we needed to access and target the participants we needed. We offered $50 to help us out and had enough participants in no time. We decided to do 6 interviews, all in person.

Below you can see the prototype in action and highlights from our interviews:

  1. Filtering.mp4
    • How a user would search through games to find certain plays.
  2. Live-Match.mp4
    • How a live game would be handled in the app.
  3. Post-Match.mp4
    • How a match in that happened in the past would be presented.
  4. Post-Match.mp4
    • How sharing would work in the app.

Now that our theories on what would excite and engage users were validated it was time to dive deep into defining the design and the UX of the entire application on both iOS and Android.

Designing the Complete App

So far we had designed what I would call a branded wireframe for the prototype. We had not dived deeply into the design or how features would really work. Our goal for the designs so far were to convey to users and some stakeholders what our main features would be and validate that these features would meet the business goals and not only meet the users needs but engage them.

I began by creating a task flow which eventually turned into user flow shown below. I kept the user flow updated as I updated the comps. It was a great resource for the team and developers to reference.

Detailed user flow of the app.
Detailed user flows.

During the design I would frequently go back to pen and paper to iterate on different ideas and brainstorm on how features may work. A few examples are below:

Sketches of the app.
Iterations on switching between video formats.
Sketches of the app.
Iterations on switching between video formats.

I designed the app in Sketch and by default I create a clickable prototype to accompany my designs. This helps me grasp the flow of the design better and make sure I am not leaving out any pages or states. Using invision to do this, the prototype also helped me easily share the flow and design with members of my team.

Overview of a prototype made in Sketch app.
Overview of the Prototype.

Once I was satisfied that I had covered every page and state of the app it was time to work with the devs and translate the design.

Development

I collaborated closely with both iOS and Android development teams to ensure accurate translation of the client's vision and my designs into the app. By pairing and working directly with the developers, we minimized confusion and misinterpretations. Additionally, I created Principle videos to illustrate animation concepts, fostering a collaborative back-and-forth exchange of animation ideas with the developers. This enjoyable and productive collaboration with both teams added that special polish that elevated the app to the next level.

Outcome

Considering all of the constraints and challenges of this project, this project was a great success. We were able to build an app that met all of the client’s technical requirements, that users found engaging, and that all within our given timeframe and budget. It was a very fast paced project, but defining the process early on, and keeping the team engaged and focused on our end goal helped us reach the finish line and start the conversation for a Phase 2. The client even wrote an awesome poem on how satisfied they were with what we delivered (which I wish I had to show you)!

Results

  • Secured a multi-year deal with TNT for NBA VR experiences.
  • Met business needs and requirements defined by Intel.
  • MVP features did excite and engage users.