Project Overview
InGame is an app designed for sports fans—specifically less experienced football fans who watch games at sports bars. Users can discover nearby bars, stay up to date with the game score and highlights, and get in the competitive spirit with fellow fans. InGame recreates the experience of watching games on T.V. by making it just as fun as actually attending games in person.
Design Process
Brainstorming
For our initial brainstorming, we focused on the quantity rather than the quality of ideas we generated. We brainstormed apps in numerous domains, and our our first step was to group our generated ideas into various categories. We had ideas in areas including apps for people who drink, professionals, the health conscious, sports fans, college students, tourists.
After collaborating and discussion our ideas as a group, we narrowed down our list to 4 apps. Here are our final ideas:
In the end, we decided to move forward with the sports app since we saw the most potential here for creating a smartwatch based app. This idea evolved into the final InGame app.
Personas
Our app is designed for less experienced football fans, but our target user group can be expanded to include fans of all levels who are interested in being a part of the football fan community. We created various personas to help us consider the types of users we would be designing our app for. We conducted contextual inquiries at a sports bar, and our findings helped us create our personas. Here are key findings from our contextual inquiries:
- people physically move during intense moments of the game
- some people watch the game alone while others come in groups
- the most engaged fans sit in the front and know a lot about the game and team
- less engaged fans sit farther back, talk more, and cheer and move around less
- there are many different types of people at the bar in terms of age, gender, and how much of a sports fan they are
Primary Persona
Name: Mark
Gender: Male
Age: 23
About: Mark’s father is a football coach who is enthusiastic about football. He used to go to football games with his father when he was a child but he never understood the rules or got interested in the game. When he joined Microsoft after graduating, he found that so many of his colleagues are super fans of Seattle Seahawks. They all share game news and watch games together. He wants to be more social and have more common interests with his coworkers, so he decides to start watching football games.
Likes: Drinking with friends at bars during weekends and showing off new apps on his phone to his friends.
Dislikes: Feeling isolated in groups.
Goals: Getting involved in heated discussions with his friends over sports.
Secondary Persona
Name: Jessica
Gender: Female
Age: 29
About: Jessica is a big fan of Arizona Cardinals. She likes watching football games with her family and boyfriend, but she can’t go to every Cardinals game. Whenever she can't get a ticket, she likes to go to sport bars to watch games while emerging herself in the heated team spirit. She likes cheering with others when the Cardinals are winning.
Likes: Having good beer while cheering with other Cardinals fans.
Dislikes: Missing important highlights during the game or failing to buy tickets for Cardinals big games.
Goals: Have something that keeps records of her team spirit. Have topics to talk with other friends at the bar after the game.
Scenarios
Initial Storyboards
Here are 3 initial storyboards we created that each show a different scenario in which someone would use InGame. The user in each scenario is based on a potential user of our app. These storyboards are from our initial design process, and we later created scenarios that reflect our refined personas and app functionalities.
Scenario
Here is a scenario that reflect contexts in which our primary persona would use InGame.
On Friday night, Mark’s friends are all going to the Seahawks game. Mark didn’t buy a ticket and is frustrated that he doesn't have any friends to hang out with on a Friday night.
Mark remembers this app called InGame that one of his friends introduced to him. He downloads the app to give it a try.
Mark figures he can just spend the night at a nearby bar and watch the Seahawks game, then he can talk about it with others back at work on Monday.
Mark opens up the app, browses nearby bars and finds a bar with 4.5 rating just one block away. So he goes to that bar.
Mark walks into the bar, realizes he just missed the first few minutes of the game and everyone is cheering. He pulls out his phone, clicks on the Seahawks game and browses through the highlights.
By browsing through the highlights, Mark realized that Seahawks are winning. He quickly adapts to the cheering atmosphere and gets really excited.
Mark feels his watch vibrate and sees a notification to keep cheering. He gets more excited and keeps cheering with other fellow fans at the bar.
- The game is over and the Seahawks win. People at the bar start heated discussions about the big highlights in the game. Mark sees the enthusiasm score on his watch and it surprises him that he cheered so much! He realizes that football is quite exciting and he might really get into the sport.
Initial Prototypes
Intermediate Prototypes
For our intermediate, medium-fidelity prototypes we used Framer. We created prototypes that reflect the core interactions of our app. We also created a color scheme at this stage.
User Testing
Overview
To conduct our testing, we had users at a sports bar perform 3 tasks as they interacted with our Framer app prototypes.
Task 1: Registering a game on the phone
1.1 Select an upcoming game from the list of games on the phone home page
1.2 Select the “Go To Game” button
1.3 Scroll through game score on highlights
Task 2: Browsing bar info on the phone
Task 3: Browse player info on the watch
3.1 Click “Players” button on center of watch screen
3.2 Scroll through various players
3.3 Click on specific player to browse his statistics
User Test 1
Here are our findings from our first user test.
-unable to leave Yelp bar page, didn’t see “back” button
-accidentally clicked “Exit” button on game highlights page
-really likes the user enthusiasm score feature and how it could make an even more social, competitive experience with friends
User Test 2
Here are our findings from our second user test.
-took user a while to figure out mobile home screen is a scrolling list
-thought interaction with app was done after browsing bars, hadn’t seen game highlights yet
-didn’t click “Exit” button when done interacting with mobile app
-expected information about bars on watch
-confused by information seen after clicking specific player
Common Findings
Here are our findings common to both user tests.
-took user a while to figure out mobile home screen is a scrolling list
-confusion about whether to click “Browse Bars” or “Go To Game” after game registration on mobile
-scrolled through very few players on watch before clicking on one
User Testing Summary
The results from user testing highlighted important findings. We realized that the player browsing function on our watch isn’t something people would use. Clearly, people care more about the quality rather than quantity of info in our app (they can use other sports apps or Google if they want more specific details). People just want the score and basic game info and, surprisingly, are more interested in the social aspects of our app. Users said they’d use the bar browse functionality and expressed positive feedback to our user enthusiasm score feature. Another key finding was that the user interaction flow we have in mind for our mobile app needs rethinking. Users didn’t interact with our mobile app in the series of steps we expected and were often confused about what to do or what to click. They weren’t clearly aware of the possible interactions with the mobile app. The final key finding was that our app can improve its design in terms of two usability heuristics (user control and freedom and error prevention).
Final Design & Wireframe
Based on the feedback from our user testing, we refined our final design. Here are some changes reflected in our final app design:
- we redesigned our mobile UI to be flexible and have 3 main tabs, rather than a strict user flow defined by various buttons
- we redesigned the watch app to have minimal interactions, so when the user clicks a game on the phone the watch app opens (no need to have a list of games on the watch)
- we removed the player information feature from the watch since this would require swiping through too many images and text on a small screen
- we created separate watch screens for each team's score for a clean, less cluttered UI
Technical Challenges
Map View
One technical challenge was syncing up the map and current location with the tabular view. Our app was made up of three fragments, which would all load up when the app started. Without any synchronization, the map would load up first and display some hardcoded values and the current location and yelp information would come after. We had to make sure that the map fragment waited until both the location data and the yelp query were finished before loading the map with those values.
Sport Data API
Another challenge was that the data we needed had to be accurate in real time so we searched for an inexpensive or free API to grab data from. The watch size and limitations introduced some UI implementation challenges that we did not initially anticipate.
After sorting through sports API’s, we converged on SportRadar for its wealth of real time data. This API has some restrictions for free users that complicated app development. We needed to work within the 1000 API calls per month quota. This was not too bad but it meant that we had to limit our frequency of testing. The biggest issue with this API was that we were also restricted to 1 call per second. This made the biggest impact on the user experience because this meant that if we weren’t clever, users would experience slowness using the app as API calls were spread out due to the rate limit. We got around this by grabbing data strategically when the user first opened up the app and when a game was selected from the scheduled games list.
Watch UI
A final challenge was the small real estate on the watch screen. Some of our initial designs had a list of games and several buttons on the watch screen. During the initial development phase, we realized that having many buttons and lists was not feasible. We compromised on our UI by removing buttons and adding tap gestures for switching between teams. We found that minimizing buttons and interactions on the watch was actually beneficial for the user experience.
Competitive Analysis
We identified a few of the top sports apps on the app store such as ESPN and theScore as our competitors based off of their similar functionalities to InGame. We realized that although these applications offered similar features, they differed in their goals.
ESPN and theScore both offer the most up to date information on a variety of sports and thus are targeted at more knowledgeable fans who care about statistics and standings. These apps end be being used as reference material while we use our data as part of an immersive experience at bars. They have long lists of statistics and this results in cluttered UI’s that require many user interactions. We differentiate ourselves by focusing on presenting only the basic information in a minimalistic fashion from live games so as to not intimidate less experienced sports fans who might be put off by all the numbers in our competitors. We offer a social experience by streamlining finding nearby bars to watch a game so users have others to watch the game with in a stimulating and exciting environment. Our enthusiasm score, a measure of the user’s excitement based off their wrist movements when cheering for their team, allows a variety of interesting use cases among users such as drinking games or bets. This enhances the user experience since the excitement of a game doesn’t abruptly end when the game ends.
Final Application
Final Presentation Slides
Video Demo
Conclusion
Future Directions
Our app is all about going out and having a good time, even if you’re by yourself. Thus, we’d like to make our app more socially aware and connect users. To do this, we thought about making our watch app spatially aware to sense other users around them, and also make the enthusiasm score a competitive group effort, where supporters of each team contribute their personal enthusiasm score towards the total score for their team. Moreover, we could expand to other sports as well as implement existing sport-related entertainment such as fantasy.
In terms of application aesthetics, we like our overall design because it is very straightforward has a bright color palette. However, one thing to improve on is minimizing the amount of text we have so that it is less intimidating for users. We would organize and simplify the text on our upcoming games tab and live scores tab.
Project Summary
What InGame provides is an extremely accessible entry point into the world of sports. Oftentimes, those new to sports may be turned off by all the polarizing opinions, rabid fans, and complicated terminology. We at Ingame believe that no one should feel left out of such a beneficial social experience. Being a sports fan provides a sense of communal belonging, as well as a means to improved mental health.
As a sports fan, you can form an instant connection with a stranger on the subway just because they are wearing the same jersey as you. Impromptu high-fives and cheers might seem inappropriate for two unfamiliar men walking past each other on the street, but not if it’s in the context of the “big game”. What InGame offers that no other app has before is a comprehensive solution to the issue of the isolated individual lost in the sports crowd. We want to bring the social sports experience, with all its fervor and companionship, to anyone who wishes to reach out and engage.
So that’s why if you can’t get to the game, get InGame.
Comments