Client
Intel & Liverpool Football Club
Role
Lead UX Designer
Platform
Android and iOS
Timeline
6 months
Users
Soccer Fans
Tech
FreeD, Voke VR, Clip Tagging
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.
The app leveraged FreeD (360-degree volumetric video), Voke (VR), and innovative clip tagging technology to showcase the technology and engage fans. This case study explores how we successfully delivered an engaging app that directly contributed to securing a multi-year deal with TNT for NBA VR experiences.
Challenge
The primary challenges we encountered in this project were:
Conflicting Stakeholder Needs
Balancing the requirements of three different stakeholder groups with varying priorities and expectations.
Tight Timeline
Delivering a complete native application for both iOS and Android within just 6 months.
Fan Engagement
Creating an application that would meaningfully boost fan engagement with soccer content.
Undefined Requirements
Working with unclear feature definitions and requirements from Intel, requiring extensive discovery work.
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 that resonates with soccer fans and keeps them engaged with the platform.
Solidify Leadership in Immersive Media Landscape
By dynamically delivering FreeD (360-degree volumetric video) and Voke (VR) content to fans, showcasing Intel's cutting-edge technology.
Increase Adoption Rate of Intel's Products
By connecting with a broader audience through immersive sports experiences and demonstrating the value of Intel's technology stack.
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.
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.
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 using the MVP feature set to help define the application's information architecture.
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.
Filtering
How a user would search through games to find certain plays.
Live-Match
How a live game would be handled in the app.
Post-Match
How a match that happened in the past would be presented.
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.
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.
The prototype validated our theories on what would excite and engage users. Now that our assumptions were confirmed, 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.
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:
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.
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 & Impact
The Intel LFC immersive soccer app delivered significant business value and successfully met all project objectives within the challenging timeline.
Secured a multi-year deal with TNT for NBA VR experiences, directly attributed to the success of this project.
Business Requirements Met
Successfully met all business needs and requirements defined by Intel.
User Engagement Success
MVP features successfully excited and engaged users, validating our design approach.
Dual Platform Success
Successfully delivered both iOS and Android applications within the 6-month timeline.
Scalable Framework
Established a scalable framework for future immersive sports applications.
Project Impact
This project was a great success considering all constraints and challenges. The client was so satisfied with our delivery that they wrote a poem expressing their satisfaction. The project not only met technical requirements but also started conversations for a Phase 2 development.